How to use the picker
- Drag the round marker across the large square. Left to right adds saturation; bottom to top adds brightness.
- Move the hue strip underneath to swing the whole square to another color family. The number next to the label is the hue angle in degrees.
- If you already have a code, paste it into the text field. It accepts
#D9481C,D9481C,#d48,rgb(217 72 28),hsl(14 77% 48%),oklch(60% 0.19 36)and all 148 CSS names such ascornflowerblue. - Press Copy next to the format you need. The value goes straight to your clipboard.
- Share link puts the color in the address bar as
?c=D9481Cand copies the URL, so a teammate opens the picker on the same color.
The sliders below the square do the same job as dragging, which helps on a phone or if you prefer the keyboard: tab to a slider and use the arrow keys for one-step changes.
Why the square is HSV, not HSL
The square uses the HSV model (hue, saturation, value), the same model Photoshop, Figma and most operating-system pickers use. In HSV the top-right corner is the purest version of a hue and the whole bottom edge is black. That layout makes it easy to "aim" at a vivid color and then pull it darker.
HSL, the model behind CSS hsl(), puts pure hues at 50% lightness and white at the top. Both describe the same colors, so the picker shows you the HSL reading too. If you are writing CSS by hand, copy the HSL line; if you are matching a value someone read out of Figma, check the HSV line.
What each readout means
| Format | Example for #D9481C | Where you would paste it |
|---|---|---|
| HEX | #D9481C | CSS, Figma, brand guides, almost everywhere |
| RGB | rgb(217, 72, 28) | CSS, Android XML, game engines |
| HSL | hsl(14 77% 48%) | CSS when you want to tweak lightness by hand |
| HSV | hsv(14, 87%, 85%) | Photoshop, Procreate, Figma's HSB mode |
| CMYK | cmyk(0%, 67%, 87%, 15%) | A first guess for print, not a press-ready value |
| Lab | lab(52% 56.3 55.5) | Color-managed work and measuring color difference |
| OKLCH | oklch(60.1% 0.189 36.2) | Modern CSS where you want even lightness steps |
The name line is the closest entry in a 4,900-name list, measured with the CIEDE2000 formula. Treat it as a description, not an official name. For a wider search with alternatives, use the color name finder.
Worked example: matching a brand color from a PDF
Say a brand guide lists "Pantone 7597 C, RGB 216 70 32" but no HEX. Type 216, 70, 32 into the field and the picker reads it as RGB. The HEX line shows #D84620. Copy it into your stylesheet.
Now say the same guide gives a CMYK breakdown of 0, 80, 100, 0 for print. Typing cmyk(0%, 80%, 100%, 0%) gives #FF3300, a much brighter orange. That is not an error. A naive CMYK-to-screen conversion assumes perfect inks on perfect paper. Printed orange is duller than the screen version, so the guide's RGB values are the ones to trust for the web. Our RGB to CMYK converter explains why the two never line up exactly.
Recent colors
When you stay on a color for about a second, it is added to the Recent colors strip. Up to 16 are kept in your browser's local storage. They are never sent anywhere, and Clear wipes them. Click a chip to load that color back into the picker.
Tips for picking better colors
- Very saturated colors at full brightness, like
#FF0000, look harsh on large areas. Pull the marker a little left and down for something easier on the eyes. - If you need several colors that feel equally bright, compare their OKLCH lightness (the first number). HSV brightness and HSL lightness both lie about this: pure yellow and pure blue have the same HSV value of 100% but look nothing alike in brightness.
- To check whether text will be readable on your color, take the HEX to the contrast checker.
- Need lighter and darker versions? The shades generator builds a full ramp from the color you picked.
Limits
The picker works in sRGB, the standard color space of the web. Wide-gamut screens (Display P3 on recent Macs and iPhones) can show a few colors outside sRGB, and those cannot be expressed as a six-digit HEX code. The color you see also depends on your screen's calibration and brightness, so two monitors can show #D9481C slightly differently even though the code is identical.
FAQ
How do I get a HEX code from a color on my screen?
Use the screen color picker. In Chrome and Edge it opens an eyedropper that can sample any pixel on your display. This picker is for choosing a color, not capturing one.
What is the difference between a 6-digit and an 8-digit HEX code?
The extra two digits are alpha (opacity). #D9481C80 is the same orange at about 50% opacity, since 80 in hex is 128 and 128 ÷ 255 ≈ 0.5.
Is this the same as the Google color picker?
No, it is a separate tool. When you search for "color picker" on Google, the results page shows a small built-in widget with a hue slider and HEX, RGB, CMYK, HSV and HSL fields. It is handy for a quick lookup. This picker covers the same formats and adds Lab and OKLCH, a list of recent colors that survives a page reload, contrast against black and white, and a link that reopens the exact color. Nothing here is affiliated with Google.
Are HEX codes case-sensitive?
No. #d9481c and #D9481C are the same color. We display uppercase because it is easier to read aloud and compare.
Why does my color look different in another app?
Usually color management. Some apps treat untagged colors as sRGB and others as the display's own profile. Checking that both apps use sRGB solves most mismatches.