Skip to content
Design · Color

Color Palette Generator

Enter a HEX, RGB, or HSL color and instantly generate harmonious palettes using complementary, analogous, triadic, and other color theory rules. Copy as CSS variables or Tailwind config — everything runs in your browser.

In-browser only HSL color model WCAG 2.2 contrast
Harmony
Palette — Complementary · 2 swatches
  • #3C83F6rgb(60, 131, 246)hsl(217, 91%, 60%)
  • #F6AF3Crgb(246, 175, 60)hsl(37, 91%, 60%)
Copy format:
Color-blind preview:

Getting started

How to Generate a Color Palette

  1. 1
    Enter your base color

    Type a hex code (e.g. #E85D04), RGB value, or HSL value into the color input. Or click the color swatch to open the native color picker.

  2. 2
    Choose a harmony rule

    Click one of the six harmony buttons — complementary, analogous, triadic, tetradic, split-complementary, or monochromatic. The palette updates instantly.

  3. 3
    Review your palette

    Each swatch shows its HEX, RGB, and HSL values. Toggle the contrast panel to see WCAG accessibility ratings, or enable color-blind preview to check how the palette looks to users with color-vision differences.

  4. 4
    Copy or export

    Click any swatch to copy its color code in your preferred format (HEX, RGB, or HSL). Use the Export button to copy the entire palette as CSS variables, a Tailwind config snippet, or plain text.

  5. 5
    Compare all harmonies

    Click “Compare all” to see all six harmony rules displayed at once. Click “Use This” on any row to switch to that harmony.

  6. 6
    Share your palette

    Click “Share” to copy a URL that restores the exact palette. Paste it into a message or document to share with colleagues.

Color theory

Harmony Rules Reference

Harmony Rules Reference
RuleColorsHue offsetsBest for
Complementary20°, 180°Maximum contrast; bold, high-energy designs
Analogous5−60° to +60°Harmonious, low-contrast palettes; natural scenes
Triadic30°, 120°, 240°Vibrant, balanced designs; data visualization
Tetradic40°, 60°, 180°, 240°Rich, complex designs; requires careful balance
Split-Complementary30°, 150°, 210°High contrast with less tension than complementary
Monochromatic5Same hue, varied lightnessSubtle, cohesive palettes; minimal design systems

Accessibility

Designing Accessible Color Palettes

  • Check WCAG contrast ratios

    Toggle the contrast panel to see the WCAG 2.2 ratio for each swatch against a white background. Aim for AA (4.5:1 normal text, 3:1 large text) or AAA (7:1) where possible.

  • Preview for color-blind users

    Use the color-blind preview modes (protanopia, deuteranopia, tritanopia) to simulate how your palette appears to users with color-vision deficiencies. Ensure key content is distinguishable without relying on color alone.

  • Avoid hue-only distinctions

    Do not rely solely on hue to convey information. Pair color differences with lightness contrast, pattern, shape, or text labels to ensure your design works for all users.

  • Test with real content

    Contrast ratios are calculated against white in this tool. Always test your palette with real text and UI components on the actual backgrounds you plan to use in production.

Frequently Asked Questions

Where does my color data go?
Nowhere. All color calculations happen entirely in your browser. No color data is sent to any server. The tool works offline once loaded.
How accurate are the generated palettes?
The harmony rules follow standard color theory mathematics on the HSL hue wheel. The generated colors are mathematically correct for the selected rule. Color perception is subjective, so use the palettes as a starting point and fine-tune as needed.
What color formats are supported?
You can input colors as HEX (3 or 6 digits), RGB, or HSL. Output is available in all three formats, plus CSS variables, Tailwind config, and plain text.
How does the color-blind preview work?
The preview applies established color transformation matrices that simulate how the palette appears to users with protanopia (red-blind), deuteranopia (green-blind), or tritanopia (blue-blind). These are approximations for design preview purposes.
Can I use the generated palettes in commercial projects?
Yes. The palettes are generated from mathematical color theory rules. There are no licensing restrictions on the colors themselves.
Why do some harmony rules produce similar-looking colors?
When the base color has very low saturation (near gray), hue-based harmony rules produce visually similar colors because there is little hue to rotate. For more varied palettes, start with a saturated base color.
What is the difference between complementary and split-complementary?
Complementary pairs the base color with the color directly opposite on the hue wheel (180° apart), creating maximum contrast. Split-complementary uses the two colors adjacent to the complement (150° and 210°), giving high contrast with less visual tension.
How do I check if my palette meets WCAG accessibility standards?
Toggle the contrast panel to see the contrast ratio between each palette swatch and a white background. The tool shows whether each pair passes WCAG AA and AAA thresholds for normal and large text.
Can I save my palettes?
The tool automatically stores your last 10 palettes in your browser’s local storage. You can also share any palette via a URL link.
Does the tool work on mobile?
Yes. The layout adapts to any screen size. On mobile, swatches stack vertically and all features remain accessible.