Color Tools
Inar Color Palette Builder
Create beautiful color schemes with Inar Color Palette Builder, a smart and easy-to-use tool for generating, customizing, and previewing professional color palettes for websites, apps, branding, and graphic design.
Inar Color Palette Builder
Create Harmonious Color Schemes — with a Live UI Preview
A professional online color palette builder. Generate harmonious color schemes from a single base color, lock the swatches you love, preview your palette on real UI components, check WCAG contrast ratios for accessibility, explore tints and shades, and export to CSS, SCSS, Tailwind, JSON and more. Everything runs locally in your browser: nothing is uploaded, and no sign-up is required.
Palette
0 colorsLive UI preview
cardsExport
What is a Color Palette Builder?
A tool that generates harmonious color schemes and previews them on real UI.
A color palette builder helps you create a set of colors that work together. Instead of picking colors at random and hoping they look good, you start with a base color and let color theory do the rest — analogous hues for a subtle look, complementary for a bold one, triadic for something lively.
This builder focuses on three things that make a palette actually useful: harmony, accessibility, and practicality. Every palette is generated using real color theory, checked for WCAG contrast against black and white text, and previewed on the components you'll actually use it on — buttons, cards, dashboards and hero sections.
Inar Color Palette Builder runs entirely inside your browser. Your palettes never leave your device — there is no upload, no server call and no third-party processing.
Color Harmony Explained
Six harmony rules, six very different moods.
Harmony
Choose how colors relate on the color wheel. Analogous uses neighbouring hues for a subtle, cohesive feel. Complementary pairs opposite hues for maximum contrast. Triadic and Tetradic pick evenly-spaced hues for a lively, balanced palette.
Contrast
WCAG defines minimum contrast ratios between text and background: 4.5:1 for body text (AA), 3:1 for large text, and 7:1 for AAA. The accessibility tab reports each color's contrast against black and white.
Export
Copy your palette as CSS custom properties, SCSS variables, a Tailwind config, JSON, a plain JS array, Android XML, Swift or a printable SVG. Every format is ready to paste.
Features
Everything you need to build a professional color scheme.
Harmony generator
Six harmony rules — analogous, complementary, triadic, split, tetradic and monochrome — plus random generation.
Lock swatches
Lock the colors you love and regenerate the rest until you get exactly what you want.
Live UI preview
See your palette on cards, dashboards, landing pages, buttons and text — five different preview scenes.
WCAG contrast checker
Every color's contrast against black and white, with AA/AAA pass/fail per WCAG guidelines.
Tints & shades
Eleven-step tint and shade ramps for every color — perfect for building a full color system.
8 export formats
CSS, SCSS, Tailwind config, JSON, JS array, Android XML, Swift and printable SVG.
50+ presets
Curated palettes across eight categories: warm, cool, nature, pastel, neon, cosmic, minimal and retro.
Sort & invert
Sort by lightness for a clean gradient, or invert all colors in one click.
Named swatches
Give each color a semantic name like --brand-primary for cleaner exported CSS.
Copy HEX
One-click copy of your entire palette as a comma-separated list of HEX values.
Session persistence
Your palette, locks and settings are saved to local storage between visits.
Keyboard-first
Download with Ctrl+S, copy with Ctrl+Shift+C.
How to Use the Builder
Five steps from a single color to a full palette system.
Start from a preset or generate
Pick a preset from the Presets tab, or hit Generate to create a random palette. Every palette is built from real color theory.
Pick a harmony rule
Choose Analogous, Complementary, Triadic, Split, Tetradic or Monochrome. Then hit Generate to reshuffle within that rule.
Lock the colors you like
Click the lock icon on any swatch. Locked colors stay put when you generate — unlock them any time.
Preview on real UI
Switch between Cards, Dashboard, Landing, Buttons and Text previews to see how your palette performs in context.
Check accessibility & export
Open the Accessibility tab to see WCAG contrast ratios. Then export as CSS, SCSS, Tailwind, JSON or any other format.
Palette Design Tips
Small things that make a real difference.
Follow the 60-30-10 rule
Use 60% of your palette as a neutral base, 30% as a secondary, and 10% as an accent. Most great palettes follow this distribution, no matter how many colors they contain.
Test contrast against both black and white
A medium-lightness color often fails against both. Reserve those for backgrounds and decorations, and use deeper or lighter colors for text and interactive elements.
Name by role, not by color
Name your swatches --brand-primary and --surface-raised, not --blue-500. Names by role survive redesigns; names by color do not.
Frequently Asked Questions
Answers to the most common questions about color palettes.
What is a color palette builder?
A visual tool that generates harmonious color schemes. You pick a base color and a harmony rule, and it produces a set of colors that work well together, ready to export as CSS or any other format.
What does "harmony" mean in color theory?
Color harmony describes how colors relate to each other on the color wheel. Analogous colors sit next to each other, complementary colors sit opposite, and triadic colors form an even triangle. Each relationship produces a distinctly different mood.
Is my palette uploaded anywhere?
No. Inar Color Palette Builder runs entirely in your browser. Your colors are processed locally and never leave your device.
What is WCAG contrast and why does it matter?
WCAG contrast is a numeric ratio between the luminance of two colors. A ratio of 4.5:1 is the AA minimum for body text, 3:1 for large text, and 7:1 for AAA. Failing contrast is one of the most common accessibility problems on the web.
Can I lock colors so they don't change?
Yes. Click the lock icon on any swatch and it stays put when you generate a new palette. This is the standard way to build a palette incrementally: lock one color at a time until you have what you want.
What are tints and shades?
A tint is a color mixed with white (lighter), and a shade is a color mixed with black (darker). Eleven-step tint and shade ramps are the foundation of most design systems — they give you a consistent set of options for every state of every component.
Which export format should I use?
Use CSS custom properties for a plain HTML/CSS project, SCSS variables for a Sass codebase, Tailwind for a Tailwind project, JSON or Swift for native apps, Android XML for Android, and SVG for design handoff and documentation.
Can I generate more than five colors?
Yes. Click Add color to add more swatches — there is no limit. Palettes of six or eight colors are common for larger design systems.
Is there a way to save my palette?
Your palette is saved automatically to your browser's local storage. For permanent storage, export it as CSS, JSON or any other format and save the file in your project.
Is the Color Palette Builder free?
Yes. It is completely free to use, with no account, no sign-up and no usage limits.
More Inar Developer Tools
More free, privacy-friendly tools from Inar Learn — built for developers and learners.
Inar Learn