Palette Generator
Generate complementary, analogous, triadic and other palettes plus a 50–950 scale from one color, and export CSS variables or Tailwind config.
Supports HEX, rgb(), hsl(), hwb(), oklch(), oklab() and CSS color names.
Harmonies
Complementary
- #3366cc
- #916300
Analogous
- #3366cc
- #0077ac
- #7253c3
Triadic
- #3366cc
- #ba363d
- #1b8316
Split complementary
- #3366cc
- #b04900
- #6f7300
Tetradic (square)
- #3366cc
- #b03776
- #916300
- #008364
Monochromatic
- #001a7d
- #1141a4
- #3366cc
- #558cf5
- #85b4ff
Scale 50–950
Lightness follows the Tailwind CSS default palette; the step closest to the base color’s lightness uses the base color itself.
- 50#f1f6fd
- 100#e1eafc
- 200#c7dafb
- 300#a1c1fb
- 400#6c9dfc
- 500#4985fa
- 600#3872e6
- 700Base#3366cc
- 800#264ea0
- 900#244382
- 950#0f2147
Export scale
Used in variable names, e.g. --color-primary-500.
How to use
- Enter any CSS color as “Base color”, or pick one. “Random color” generates one for you.
- “Harmonies” shows complementary, analogous, triadic, split complementary, tetradic and monochromatic palettes. Every swatch shows its code; click “Copy” to grab it.
- “Color format” switches what is shown and copied: HEX, RGB, HSL or OKLCH.
- “Scale 50–950” builds 11 steps from light to dark, which “Export scale” turns into CSS variables, a Tailwind v4 @theme block or JSON.
FAQ
How are the harmonies calculated?
Everything is computed in OKLCH. Complementary, analogous, triadic and the other harmonies keep lightness and chroma and only rotate the hue (180° for complementary, 120° for triadic). Monochromatic palettes and the scale keep the hue and change lightness. OKLCH is perceptual, so colors with the same lightness look equally light, which gives more even palettes than an HSL color wheel.
Why does the complement differ from an HSL color wheel?
OKLCH hue angles are not the same as HSL’s. In HSL the complement of red is cyan; in OKLCH it is closer to teal. Both are valid; the OKLCH result keeps lightness more consistent.
How is the 50–950 scale built?
Each step has a target lightness modeled on the Tailwind CSS v4 default palette, with chroma highest in the middle and fading toward both ends. The step whose lightness is closest to the base color uses the base color itself, so the exported scale always contains your color.
Why do some colors have less chroma than the base?
How vivid a typical (sRGB) screen can get depends on hue and lightness: a very light blue or a very dark yellow cannot be very saturated. When a color does not fit, the tool follows CSS Color 4 and lowers chroma while keeping lightness and hue.
How do I use the exported code?
Paste “CSS variables” into a stylesheet and use var(--color-primary-500). Paste “Tailwind v4 @theme” into your Tailwind v4 CSS file to get classes such as bg-primary-500. “JSON” goes into theme.extend.colors in a Tailwind v3 config.
Is my data uploaded?
No. Everything is calculated in your browser, and random colors come from your browser’s cryptographic random number generator.
Related tools
Color Converter
Convert colors between HEX, RGB, HSL, HWB, OKLCH and OKLab, with a color picker and WCAG contrast check.Contrast Checker
Check the WCAG contrast ratio of text and background colors for AA and AAA, with alpha support and the closest passing color suggestions.Gradient Generator
Design linear, radial or conic CSS gradients with color stops, angle and center, preview them live and copy the CSS, with optional OKLCH interpolation.