About the Color Picker
This color picker lets you choose a color with a visual picker, type or paste a code, or — in Chrome, Edge and Opera — grab any pixel on your screen with the built-in eyedropper. The moment you pick, it shows the color in every format you are likely to need: HEX for CSS, RGB and HSL for code, HSV/HSB for design tools, CMYK as a print starting point and OKLCH for modern CSS color work.
It is built for web designers matching a brand color from a screenshot, developers who need the exact code of an element on a page, and anyone who wants to know "what color is this?" Alongside the codes you get the nearest CSS color name, the color's relative luminance, and whether white or black text is more readable on top of it.
The screen eyedropper uses the browser EyeDropper API, which needs a user click and is not yet available in Firefox or Safari; there you can still use the standard picker or paste a code. CMYK is the simple device-independent conversion, not a calibrated print profile.
How to use the color picker
- 1Click the color swatch to open the picker, or press "Pick from screen" to use the eyedropper.
- 2Alternatively type or paste a HEX, rgb() or hsl() value.
- 3Read the color in every format and copy the one you need.
- 4Check the readable text color and contrast before using it as a background.
Formula and method
A picked color is stored as red, green and blue channels from 0 to 255. HEX writes each channel as two hexadecimal digits. HSL and HSV are derived from the largest and smallest channel: hue is the angle set by the dominant channel, HSL lightness is the average of max and min, and HSV value is the max. CMYK uses K = 1 − max and C = (1 − R′ − K) ÷ (1 − K) for each ink.
OKLCH comes from the OKLab perceptual color space (Ottosson, 2020), as used by CSS Color 4. Relative luminance and contrast follow WCAG 2: channels are linearised with the sRGB curve, weighted 0.2126/0.7152/0.0722, and contrast = (L₁ + 0.05) ÷ (L₂ + 0.05). The nearest name is the CSS named color with the smallest OKLab distance.
- R, G, B
- Red, green, blue channels (0–255)
- R′
- Channel divided by 255
- Y / L
- WCAG relative luminance, 0–1
- ΔE
- Distance in OKLab × 100 (≈2 is just noticeable)
Worked examples
Tailwind blue-500 #3B82F6
3B, 82 and F6 in hexadecimal are 59, 130 and 246. Blue dominates, giving a hue of 217°; lightness is (246 + 59) ÷ 2 ÷ 255 ≈ 60%. White text only reaches 3.68:1, so black text (5.71:1) is the AA-compliant choice for body copy.
Picking pure CSS "tomato"
rgb(255, 99, 71) converts to #FF6347, which is exactly the CSS named color tomato. Its hue is 9° (a warm red-orange) at 64% lightness, so black text is more readable on it.
Dark slate #1E293B
A very dark blue-gray: lightness is just 17%, and white text on it reaches 14.63:1 — far above the 7:1 AAA threshold, which is why it is a popular dark-mode background.
Frequently asked questions
How do I pick a color from my screen?+
Click "Pick from screen" and then click anywhere on your display — another tab, an image or a desktop app window. This uses the EyeDropper API, available in Chrome, Edge and Opera on desktop. Firefox and Safari do not support it yet.
What is the difference between HEX and RGB?+
They describe the same thing. RGB lists red, green and blue as decimal numbers from 0 to 255; HEX writes the same three numbers in base 16. rgb(59, 130, 246) and #3B82F6 are the identical color.
What is OKLCH and should I use it?+
OKLCH is a perceptual color format supported in all modern browsers: lightness, chroma and hue. Changing its lightness looks even across hues, which makes it great for building color scales and themes. HEX is still the most widely supported format.
Why does the picked color look different in another app?+
Displays and apps can use different color profiles (sRGB, Display P3). The eyedropper returns sRGB values; a wide-gamut screen or an app that applies its own color management may show the same code slightly differently.
How do I know if text will be readable on my color?+
Look at the contrast values. WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1. The tool tells you whether white or black text gives the higher ratio.