Zum Hauptinhalt springen
ToolsByUs

Farbe auswählen

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.

Nur lokal

Die Oberfläche dieses Tools ist auf Englisch.

HEX
#00696f
RGB
rgb(0 105 111)
HSL
hsl(183 100% 21.8%)
HSV
hsv(183 100.0% 43.5%)
OKLCH
oklch(0.474 0.0806 201.7)
CMYK
cmyk(100% 5% 0% 56%)
approximate
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

On white: 6.46:1Body text passes AALarge text passes AA
On black: 3.25:1Body text fails AALarge text passes AA

Die folgende Anleitung ist nur auf Englisch verfügbar.

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?

Formats and what each is for
ParameterTypeDefaultBehaviour & edge cases
HEX#rrggbb6 digitsThe 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.
RGB0–255rgb()The same three numbers in base 10. Modern syntax separates them with spaces and alpha with a slash; the comma form still works everywhere.
HSLdeg %, %hsl()Hue, saturation, lightness. Good for a hue slider, misleading for anything that depends on brightness — its lightness is not perceived lightness.
HSVdeg %, %hsb()Hue, saturation, value. What most colour pickers are built on, including Photoshop's. Not valid CSS.
OKLCH0–1, 0–0.4, degoklch()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.
CMYK0–100%naiveThe device-independent approximation. Useful for a rough print reference, not for a press specification — that needs an ICC profile.
Scale50–95011 stepsTints 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.
Contrastratiovs #fff / #000Each 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.

ToolsByUs team · How we check our tools