Color Picker

What is Color Picker?

Pick a colour with a native colour picker, then see its HEX, RGB, and HSL representations at once — with copy buttons on each. Adjust RGB channels via sliders, paste in any colour format (hex, rgb(), or rgba()) and the others update live. Great for sampling a shade from a design mockup and translating it into the format your stylesheet uses.

How do I use Color Picker?

1. Click the large swatch to open the native colour picker.
2. Or drag the R / G / B sliders.
3. Copy whichever format (HEX, CSS rgb(), CSS hsl()) you need.

Color Picker by the numbers

Models

HEX, RGB, HSL, HSV, CMYK

Alpha support

#RRGGBBAA / rgba()

Palettes

Shades, tints, complementary, analogous, triadic

Contrast

WCAG 2.1 AA / AAA live

Export

CSS var, Tailwind config, JSON

Common use cases for Color Picker

• Sampling a brand hex code from a design mockup.
• Generating an accessible text/background pair for a landing page.
• Producing a 5-shade palette from a single seed colour.
• Converting a Figma CMYK value to a CSS-safe HEX.
• Dialling in a precise HSL hue for a CSS accent.

Common pitfalls and how to avoid them

• Printed colour looks wrong — Screens are RGB; print is CMYK. The converter approximates — for critical print, verify with your printer's ICC profile.
• Contrast passes AA but fails AAA — AAA requires 7:1 for body text. Darken the foreground or lighten the background until the badge turns green.
• HEX has 8 digits — That includes alpha (#RRGGBBAA). Drop the last two characters for a solid HEX.

When should I use Color Picker?

Color Picker is for sampling and converting. For just the HEX↔RGB round-trip with a quick swap, HEX ↔ RGB is leaner. To build a gradient, use Gradient Generator.