Pick → read
Hex Color Picker
Choose a color with the picker, or type a code — both directions stay in sync.
—
—
—
—
—
Two ways in, four ways out
The picker and the text field are linked. Drag in the picker and the code updates; type a code and the picker moves. Whichever you use, you get the hex, the RGB values, the HSL values, the individual channel bytes and a contrast ratio.
The picker itself is your operating system's, not a reimplementation. That means it behaves the way you already expect, supports whatever eyedropper your platform provides, and stays accessible without any work from us.
Picking a color that will actually work
A color looks different in a small swatch than it does across a whole page, and it looks different again to someone else's eyes. Three checks catch most problems before they ship.
- Check the contrast figure. Anything under 4.5:1 will fail for body text. This is the check people skip and then have to redo.
- Look at the saturation. Fully saturated colors are exhausting over large areas. Backgrounds usually want saturation well under 30%.
- Watch the hue against your existing palette. Two blues thirty degrees apart look like a mistake rather than a choice.
Reading the numbers
| Reading | Tells you |
|---|---|
| Hex | The code to paste into CSS or a design tool |
| RGB | Channel values, for opacity and any calculation |
| HSL | Where the color sits on the wheel, and how to make variants |
| Channels | Each byte in hex and decimal side by side |
| Contrast | The WCAG ratio against whichever of black or white does better |
From one color to a palette
Once you have a base color, the useful moves are all in HSL. Pick here, then adjust there.
base keep hue and saturation hover lightness −7 active lightness −13 tint lightness raised to ~92% disabled saturation dropped to ~20% accent hue +180 for the complement
Every one of those is a single number changed, which is why palettes built this way stay coherent.
Pure yellow on white scores 1.07:1 and is close to unreadable, despite looking bright and high-energy. Pure blue on white scores 8.6:1 and is comfortable. Perceived vividness and measured contrast are unrelated, so trust the number.
Where these codes go
- CSS and HTML — hex is the most common form, and all three notations are valid.
- Design tools — Figma, Sketch and Adobe apps all accept a pasted hex code.
- Brand documentation — hex is the standard way to record a digital color, usually alongside a print equivalent.
- Config files and themes — terminal themes, editor themes and dashboards almost always take hex.
Frequently asked questions
How do I get a hex code from a color?
Use the picker above and read the hex value, or type an existing code and adjust it.
Can I pick a color from an image?
The picker uses your operating system's color dialog. On platforms that provide an eyedropper there, you can sample from anywhere on screen.
What contrast ratio do I need?
4.5:1 for normal body text under WCAG AA, or 3:1 for large text. 7:1 meets the stricter AAA level.
Why does the picker show lower case and the field upper case?
The operating system picker uses lower case. Use the case chips to control what this page outputs; the value is identical either way.
Can I enter a 3-digit or 8-digit code?
Yes. Three digits expand by doubling each one, and eight digits include an alpha pair.
Are my colors saved anywhere?
No. Nothing is stored and nothing is sent anywhere. Refreshing the page clears everything.