Color Picker
Precision color extraction and format conversion with WCAG accessibility insights.
#F5C842
245, 200, 66
45°, 90%, 61%
0%, 18%, 73%, 4%
Accessibility Analysis
WCAG Contrast Ratio
This color provides sufficient contrast for readable text against the default dark theme background.
Color Harmony
Tonal Palette
Saved History
No colors saved.
Frequently Asked Questions
Picking Colors With a System, Not a Mood
The formats you'll be asked for
Same color, different costumes — tools and teams each demand their own:
| Format | Looks like | Native habitat |
|---|---|---|
| HEX | #7c3aed | CSS, design handoffs, brand guides |
| RGB / RGBA | rgb(124, 58, 237) | CSS with alpha, canvas, image code |
| HSL | hsl(263, 84%, 58%) | Building palettes — adjust lightness, keep hue |
| CMYK | Percentages of ink | Print shops only |
HSL is the palette cheat code
HEX values hide relationships; HSL exposes them. Keep hue fixed and step lightness (95%, 85%, 70%, 55%, 40%) and you get a coherent tint scale of one brand color — the thing design systems call color-100 through color-900. Shift hue ±30° for harmonious neighbors, 180° for a complement. That arithmetic is impossible to see in #7c3aed and obvious in hsl(263, 84%, 58%).
From swatch to shipped
Grab a color from anything on your screen with the screen color picker, convert formats with the CSS color converter, and before any color carries text, verify it passes accessibility in the contrast checker — the step that separates palettes that look good from palettes that work.