Color Palette Generator
Generate harmonious color schemes from any base color. Export as CSS variables, Tailwind config, or copy hex codes.
Export
How It Works
Color Harmony
Uses color theory algorithms — complementary, analogous, triadic, and more — to generate visually balanced palettes.
One-Click Export
Copy your palette as CSS custom properties, Tailwind config, SCSS variables, or a plain array.
Random Mode
Hit the random button to explore unexpected color combinations and discover new palettes.
100% Client-Side
Everything runs in your browser. No data sent anywhere, no tracking, no analytics.
FAQ
What is color harmony?
Color harmony refers to aesthetically pleasing arrangements of colors based on their positions on the color wheel. Common harmonies include complementary (opposite colors), analogous (adjacent colors), and triadic (evenly spaced).
Can I use these palettes commercially?
Yes. Colors cannot be copyrighted. Any palette generated here is free to use in any personal or commercial project.
What's the difference between RGB, HSL, and Hex?
They're all ways to represent colors. Hex (#FF0000) is compact and widely used in CSS. RGB (255, 0, 0) breaks color into red, green, blue channels. HSL (0°, 100%, 50%) uses hue, saturation, lightness — which is more intuitive for generating harmonies.
How do I pick a good base color?
Start with your brand's primary color, or use our random generator to explore. A good base color has moderate saturation (40-80%) and lightness (30-60%) for the most versatile palettes.
How Color Palettes Work in Web Design
A color palette is a curated set of colors that work together visually, derived from principles of color theory. The three most useful palette types for web projects are complementary (colors opposite each other on the color wheel, which create high contrast and visual tension — good for calls-to-action), analogous (colors adjacent on the wheel, which feel harmonious and calm — good for backgrounds and content areas), and triadic (three colors equally spaced on the wheel, which create vibrant, balanced schemes).
When building a UI, most designers work with a base color (your primary brand color), a complementary or triadic accent (for buttons, links, and highlights), and a set of neutral tones (for backgrounds, text, and borders). The exact hues matter less than their relationship to each other — a well-structured palette keeps your interface coherent even as elements change across different pages and states.
Using the Output in Your Project
This tool generates palettes in HEX, RGB, and HSL formats. HEX values are the most common in web projects — paste them directly into CSS or your design system variables. HSL values are more useful when you need to programmatically adjust lightness or saturation (for hover states, active states, or dark mode variants), since the L and S values map directly to perceived brightness and color intensity. RGB values are most useful in CSS color functions that accept individual channel values, or when working with canvas drawing APIs in JavaScript.
The recommended workflow: generate a palette, pick your base and accent colors, then create a CSS custom properties (variables) file at the root of your project. Define colors as --color-primary, --color-accent, --color-surface, and so on. Reference those variables throughout your stylesheets rather than hardcoding hex values. When your brand colors change, you update one file instead of searching and replacing across dozens of CSS files.
Frequently Asked Questions
What makes two colors "work together"?
Colors work together when they maintain sufficient contrast for readability (WCAG AA requires a contrast ratio of at least 4.5:1 for normal text), while sharing a coherent relationship on the color wheel. Colors that are too similar in both hue and value blend into each other. Colors that are too different without a structural relationship (complementary, triadic, split-complementary) look chaotic. The goal is controlled tension — enough difference to create visual hierarchy, enough relationship to feel intentional.
How many colors should a UI color palette have?
Most practical UI design systems use 5-9 colors: one primary brand color in 5-9 tints and shades, one accent color, one semantic set (success green, warning yellow, error red, info blue), and 2-3 neutral grays. Fewer colors mean tighter consistency — systems with 30+ colors usually end up with inconsistent usage and visual clutter. Start minimal and add colors only when you have a specific design need they solve.
How do I test if my palette meets WCAG accessibility requirements?
After generating your palette, check text-on-background combinations with the CyberScryb WCAG Color Contrast Checker guide. WCAG AA compliance requires 4.5:1 for normal text, 3:1 for large text. WCAG AAA requires 7:1 for normal text. Always test your actual text color against your actual background color — not just your palette colors against each other.