Elegir color
Color Picker takes a colour — typed, pasted or sampled with your system's eyedropper — and reads it back as HEX, RGB, HSL, HSV, OKLCH and CMYK at once. It also builds an eleven-step tint and shade ramp in OKLCh, so every step keeps the hue it started with, and reports each step's contrast against white and black so you can see straight away which ones can carry text.
La interfaz de esta herramienta está en inglés.
#00696frgb(0 105 111)hsl(183 100% 21.8%)hsv(183 100.0% 43.5%)oklch(0.474 0.0806 201.7)cmyk(100% 5% 0% 56%)- Hue
- 183°
- Lightness
- 47%
- Chroma
- 0.081
Tints and shades
Eleven steps on an OKLCh lightness curve. The ratios are against white and black — a step needs 4.5:1 to carry body text.
1.1 / 19.5
1.2 / 17.9
1.4 / 14.9
1.8 / 11.5
2.5 / 8.4
3.5 / 5.9
5.1 / 4.1
7.5 / 2.8
10.6 / 2.0
14.3 / 1.5
18.0 / 1.2
Harmonies
Hue rotated in OKLCh, so every colour in a scheme holds the lightness of the one it came from. Rotate in HSL instead and the yellow blinds you while the blue disappears.
Complementary
The opposite hue. Maximum separation, and the reason it is hard to use for more than an accent.
Analogous
Neighbours 30° either side. Quiet, and the safest choice for a whole interface.
Triadic
Three hues 120° apart. Balanced, and strong enough that two of them usually want muting.
Tetradic
Two complementary pairs. Four hues is more than most layouts can carry at full strength.
Split complementary
The opposite hue, split 30° either side. Most of the contrast, less of the vibration.
Monochromatic
One hue, varied by lightness and chroma. What a design system actually ships.
On white, and on black
La guía de abajo solo está disponible en inglés.
How does Color Picker work?
A colour on a screen is three numbers, and every format here is the same three numbers in different clothes. Hex and rgb() are the same value written in base 16 and base 10. hsl() and hsv() are the same value in polar coordinates, which is why a hue slider exists. Those four are lossless round trips of each other, and this tool converts between them exactly.
Why the ramp is built in OKLCh
HSL has one useful property and one fatal one. The useful one is that a hue slider makes sense. The fatal one is that its lightness is not lightness: hsl(60 100% 50%) is a blinding yellow and hsl(240 100% 50%) is a near-black blue, and HSL calls them both 50%. Build a tint ramp by walking HSL lightness and you get a scale where the middle steps jump around in apparent brightness while the numbers march evenly.
OKLCh does not have that problem. Its lightness axis tracks what the eye reports, so stepping down it produces a ramp that reads as even. Every step here is also checked against the sRGB gamut and pulled back in if it falls outside — without that, the most saturated steps clip to the same colour and the scale silently flattens at exactly the end a designer is looking at.
The eyedropper
The colour well next to the field opens your operating system’s own picker, which on macOS, Windows and most Linux desktops includes an eyedropper that can sample any pixel on screen — including pixels in other applications. No page can do that on its own, which is why the native control is here rather than a canvas imitation of one. It cannot express transparency, so the text field carries alpha: type #00696f80 and the well shows the opaque teal while the field keeps the 50%.
CMYK, and what it is worth
The CMYK figures are the device-independent approximation, the same one every online converter uses. A real conversion needs an ICC profile for the press, the paper and the ink set, and the same sRGB value becomes different numbers on coated stock than on newsprint. Treat it as a starting point for a conversation with a printer, not as a specification to send them.
One colour
#00696f
Every representation of it
hex #00696f rgb rgb(0 105 111) hsl hsl(183 100% 21.8%) oklch oklch(0.4849 0.0872 202.1) cmyk cmyk(100% 5% 0% 56%)
What options and edge cases does Color Picker support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| HEX | #rrggbb | 6 digits | The shortest form, and the only one that survives a paste into anything. 4 and 8 digits add alpha; 3 digits is shorthand for doubled pairs. |
| RGB | 0–255 | rgb() | The same three numbers in base 10. Modern syntax separates them with spaces and alpha with a slash; the comma form still works everywhere. |
| HSL | deg %, % | hsl() | Hue, saturation, lightness. Good for a hue slider, misleading for anything that depends on brightness — its lightness is not perceived lightness. |
| HSV | deg %, % | hsb() | Hue, saturation, value. What most colour pickers are built on, including Photoshop's. Not valid CSS. |
| OKLCH | 0–1, 0–0.4, deg | oklch() | Perceptually uniform. Equal steps look equal, hue holds through a lightness change, and it is what CSS Color 4 uses. Supported in every current browser. |
| CMYK | 0–100% | naive | The device-independent approximation. Useful for a rough print reference, not for a press specification — that needs an ICC profile. |
| Scale | 50–950 | 11 steps | Tints and shades on a fixed lightness curve, with chroma tapering at both ends so the light steps are not fluorescent and the dark ones do not glow. |
| Contrast | ratio | vs #fff / #000 | Each step's WCAG 2.x ratio against white and black, which is what decides whether text can sit on it. |
Frequently asked questions
How do I use an eyedropper to pick a colour from my screen?
Click the colour well beside the text field. That opens your operating system's own picker, which on macOS, Windows and most Linux desktops has an eyedropper that samples any pixel on screen, including in other applications. A web page cannot read pixels outside itself, so the native control is the only route to that — an in-page canvas picker can only sample an image you have already loaded.
What is OKLCH and should I be using it instead of HSL?
OKLCH is a perceptually uniform colour space: equal numeric steps look like equal visual steps, and changing lightness does not shift the hue. HSL does neither, which is why an HSL-generated tint ramp has steps that look uneven even though the numbers are evenly spaced. Every current browser supports oklch() in CSS. Use HSL when you want a hue slider; use OKLCH when the value feeds a ramp, a mix, or any decision about brightness.
Why do the tints in the ramp look different from lightening the hex value?
Because lightening a hex value means moving three sRGB channels towards 255, and that changes the hue as well as the lightness — most visibly in blues and purples, which drift towards grey. The ramp here moves lightness in OKLCh and holds hue and chroma, then pulls each step back into the sRGB gamut if it lands outside. That is what keeps step 100 and step 800 recognisably the same colour.
Can I get a colour with transparency?
Yes. Type an 8-digit hex like #00696f80, or rgba(0 105 111 / 50%), and the alpha is kept through every conversion that has a place to put it. The native colour well cannot show transparency — it is a limitation of the control, not of this page — so it displays the opaque colour while the text field holds the real value.
Is the CMYK conversion accurate enough to send to a printer?
No, and no online converter's is. CMYK is device-dependent: the same sRGB value becomes different ink percentages on coated stock than on uncoated, and different again on a different press. This is the standard device-independent approximation, which is right for picking a swatch and for talking to a printer about roughly what you mean. The printer will do the real conversion with the profile for their press.
Does anything I pick get sent anywhere?
No. Every conversion here is arithmetic running in this tab. The page makes no network request after it loads — turn off your connection and the picker keeps working, which is the test worth running if you would rather check than take our word for it.
Which related tools should I use next?
- Círculo cromáticoGira el círculo y lee esquemas complementarios, análogos y triádicos
- Comprobar contrasteComprueba texto y fondo contra WCAG 2.2 y da el color que pasa
- Códigos de colorTodos los nombres de color CSS con su HEX, RGB y HSL
- Test de daltonismoHaz un test de daltonismo y simula cómo ve las imágenes quien lo tiene