Color Palette Generator
Generate shades, complementary, analogous, triadic, split-complementary, and monochromatic palettes from any seed color. Copy as CSS variables or Tailwind config.
Seed Color
#E7F0FE
rgb(231, 240, 254)
hsl(217, 92%, 95%)
#B6D1FC
rgb(182, 209, 252)
hsl(217, 92%, 85%)
#85B2F9
rgb(133, 178, 249)
hsl(217, 91%, 75%)
#5593F7
rgb(85, 147, 247)
hsl(217, 91%, 65%)
#2474F5
rgb(36, 116, 245)
hsl(217, 91%, 55%)
#0A5ADB
rgb(10, 90, 219)
hsl(217, 91%, 45%)
#0846AA
rgb(8, 70, 170)
hsl(217, 91%, 35%)
#06327A
rgb(6, 50, 122)
hsl(217, 91%, 25%)
#031E49
rgb(3, 30, 73)
hsl(217, 92%, 15%)
#010A18
rgb(1, 10, 24)
hsl(217, 92%, 5%)
W = contrast against white | B = contrast against black (WCAG AA requires ≥ 4.5)
Frequently Asked Questions
What palette types does this tool generate?
Six types: Shades (10 tints and shades of your seed color), Complementary (seed + opposite hue), Analogous (5 colors 30° apart on the wheel), Triadic (3 colors 120° apart), Split-Complementary (seed + two colors 150° from the complement), and Monochromatic (8 variations of the same hue with different saturation and lightness).
How do I use the CSS Variables export?
Click 'Copy as CSS Variables' to copy a :root block with --color-1 through --color-N variables. Paste it into your global CSS file and reference them anywhere with var(--color-1), var(--color-2), etc.
What are the W and B numbers on each swatch?
W is the WCAG contrast ratio of that color against white (#ffffff), and B is the contrast against black (#000000). WCAG AA requires a minimum of 4.5:1 for normal text and 3:1 for large text. Use these to decide whether to put white or dark text on top of a given swatch.
Can I click a swatch to copy the hex code?
Yes. Click any color swatch to instantly copy its HEX code to the clipboard. The copy icon appears on hover.
Does the color picker sync with the hex input?
Yes. The browser native color picker and the hex text field are fully synced. Changing either one updates the palette immediately.