About Color Palette Generator
Color palette generator with complementary, analogous, triadic, and monochromatic schemes. Pick a base color, explore harmonies, and export hex, RGB, and HSL values free.
How to use
- Pick a base color in the visual picker or type a hex code directly (e.g.,
#3b82f6 for Tailwind blue-500). The base color is the seed for every harmony calculation — all output swatches are derived by rotating the hue, scaling saturation, or shifting lightness from this single value. If you have a brand color already, paste it; if you do not, start from a saturated mid-lightness color (around HSL 50% saturation, 50% lightness) since extreme blacks or near-whites flatten the harmony output.
- Choose a harmony type. Complementary rotates the hue 180 degrees (blue → orange). Analogous picks neighbors at +/-30 degrees. Triadic spaces three colors 120 degrees apart. Split-complementary uses 150 and 210 degrees from the base for softer contrast than full complementary. Monochromatic holds hue constant and varies lightness/saturation — the safest choice for dashboards because there is zero risk of clashing.
- Inspect the generated swatches. The harmony shows 3-7 colors depending on type, each labeled with its hex, RGB, and HSL values. The base color always appears first; the rest are derived in a fixed mathematical relationship to it, so changing the base regenerates the entire palette in real time.
- Verify contrast for any pair you plan to use as text/background. WCAG 2.1 AA requires 4.5:1 for body text and 3:1 for large text (18pt+ or 14pt+ bold); AAA bumps these to 7:1 and 4.5:1. A vibrant palette can still ship inaccessible — cross-check the foreground/background pairs in our Color Picker before committing them to a design system.
- Pick the format that matches your tooling. Hex is universal and the densest representation (
#3b82f6, 7 chars). RGB matches design tools like Figma and image-pipeline code. HSL is the right choice for design tokens because varying only the lightness value generates an entire shade scale: hsl(217 91% 95%) for the 50 step down to hsl(217 91% 20%) for the 900 step.
- Click any swatch to copy. Build out a Tailwind-style scale by saving each swatch as a token (
--brand-500, --brand-600) and using HSL math to derive hover and disabled states — typically -5% lightness for hover and -30% saturation, +20% lightness for disabled. This keeps states visually anchored to the base without manual color picking.
- Apply the 60-30-10 rule when laying out the palette: 60% dominant/neutral (backgrounds and large surfaces), 30% secondary (cards, navigation), 10% accent (CTAs, links). This ratio keeps any single color from dominating and is the same proportion used by Material Design and most production design systems.
Frequently asked questions
What is a complementary color palette?
A complementary palette pairs colors that sit directly opposite each other on the color wheel — for example, blue and orange, or red and green. This creates maximum contrast and visual tension, making it ideal for call-to-action buttons, accent elements, and designs that need to grab attention. The tradeoff is that complementary colors can clash if used in equal amounts, so most designers use one as the dominant color (60-70% of the design) and the other sparingly as an accent (10-20%).
Analogous vs triadic palettes?
Analogous palettes use 2-4 colors that sit next to each other on the color wheel (within about 30-60 degrees), creating a harmonious, low-contrast feel. They work well for backgrounds, gradients, and designs that should feel calm and unified. Triadic palettes use three colors spaced exactly 120 degrees apart on the color wheel, offering more variety and visual energy while maintaining mathematical balance. Triadic palettes are common in children's branding, sports teams, and playful UI designs.
How do I export my palette?
Click any color swatch to copy its value to your clipboard. You can switch between hex (e.g., #3B82F6), RGB (e.g., rgb(59, 130, 246)), and HSL (e.g., hsl(217, 91%, 60%)) formats depending on where you need to use the color. Hex is the most common format for CSS stylesheets. RGB is the standard in design tools like Figma and Sketch. HSL is preferred when you need to programmatically generate lighter or darker variants of a color.
How many colors for a UI palette?
Most effective UI palettes use 3-5 core colors: a primary brand color for buttons and key actions, a secondary accent for supporting elements, and a neutral gray scale for text, backgrounds, and borders. On top of these, add 2-3 semantic colors — green for success states, red for errors and destructive actions, and amber/yellow for warnings. Design systems like Material Design and Tailwind CSS follow this exact pattern, each with a primary color extended into 9-10 shade levels from lightest to darkest.
What is the 60-30-10 color rule?
The 60-30-10 rule is a classic design principle borrowed from interior design. Apply your dominant/neutral color to 60% of the design (backgrounds, large surfaces), your secondary color to 30% (cards, navigation, headers), and your accent color to just 10% (buttons, links, highlights). This ratio creates visual hierarchy and prevents any single color from overwhelming the layout. Use this generator to pick your three colors, then apply the ratio in your CSS using the
Color Picker to fine-tune shades.
How do I check color contrast for accessibility?
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). When building a palette, always test your foreground/background color pairs against these thresholds. A beautiful palette is useless if users with low vision cannot read the text. Tools like our
Color Picker can help you evaluate contrast ratios between any two colors in your palette.
What is a monochromatic palette?
A monochromatic palette uses a single hue and creates variation through different levels of saturation and lightness — essentially, tints (adding white), shades (adding black), and tones (adding gray) of one color. Monochromatic palettes are the easiest to get right because there is zero risk of color clashing. They are popular for minimalist designs, professional dashboards, and any interface where content should take priority over visual decoration.
Part of ToolFluency’s library of free online tools for Developer Tools. No account needed, no data leaves your device.