Color Picker & Palette
Pick colors, convert formats, build palettes.
About Color Picker & Palette
Color picker + palette generator with modern color spaces.
How to use
- 1Pick a base color.
- 2Read it in HEX, RGB, HSL and OKLCH.
- 3Generate complementary / analogous / triadic palettes and copy any swatch.
Color is one of the trickiest parts of any design system: most pickers expose HEX and RGB, give you no perceptual reasoning, and leave palette generation to instinct. This picker shows every color in HEX, RGB, HSL, and OKLCH simultaneously, then generates real palettes — complementary, analogous, triadic, monochromatic — that you can copy and use in CSS, Figma, or Tailwind config.
Why OKLCH matters
OKLCH is a perceptually uniform color space (defined in 2020, supported in CSS Color Level 4, shipping in every modern browser). The L is lightness — but a uniform L value looks uniformly bright across hues, which isn't true of HSL or HSV. Move the H (hue) channel and the color shifts perceptually evenly. This makes palette generation, accessibility checks, and theme tokens far easier: a row of swatches at `oklch(60% 0.15 H)` for varied H values looks like a balanced palette. The same trick in HSL produces wildly uneven brightness. If you're picking colors for a new design system in 2026, picking them in OKLCH and storing them in OKLCH is the right default.
The palette generators, briefly
Complementary: opposite on the hue wheel — high contrast, useful for accents. Analogous: adjacent on the hue wheel — calm, harmonious, good for backgrounds and large surfaces. Triadic: three evenly-spaced hues — vibrant and balanced, common in illustration. Monochromatic: same hue, varied lightness — easy to ship, low-risk, great for data viz when you need an ordered scale.
Frequently asked questions
Quick answers to the questions people actually ask about Color Picker & Palette.
What's the difference between HEX, RGB, HSL, and OKLCH?
What's the difference between HEX, RGB, HSL, and OKLCH?
HEX and RGB are equivalent representations of the same sRGB color — `#3B82F6` is the same color as `rgb(59, 130, 246)`. HSL is a different parametrisation of the same color space: hue, saturation, lightness. OKLCH is a perceptually uniform color space — moving the L value by the same amount looks like the same brightness change across every hue, which isn't true of HSL. For design tokens in 2026, OKLCH is the right format to author and store in.
Why is the palette generator output not what I expected?
Why is the palette generator output not what I expected?
Palette generators work by manipulating the hue channel (complementary = 180° away, analogous = 30° away, triadic = 120° spacing). Different color spaces give different perceptual results — a complementary pair in OKLCH looks more balanced than the same operation in HSL. We use OKLCH for the math by default; toggle to HSL if you need the old-school version.
Does it support the P3 color space?
Does it support the P3 color space?
Output is shown in sRGB and OKLCH. OKLCH can represent colors outside the sRGB gamut (wide-gamut P3 monitors can show them), but for current CSS support and broad device coverage, sRGB is what most projects ship. Display P3 support is on the roadmap.