Color Picker
Pick a color, paste one in any format, or grab it from your screen. Every field is editable and the others follow.
Color formats explained
HEX and RGB describe the same thing: how much red, green and blue light to mix, from 0 to 255. HSL and HWB rearrange those numbers into hue, plus saturation and lightness (or whiteness and blackness), which is easier to adjust by hand.
OKLCH is the newer CSS format built on a perceptual model: equal changes in lightness look equal to the eye, and changing hue doesn't make a color suddenly look brighter. It's the best choice for building scales and themes. Every modern browser supports oklch().
CMYK here is a simple mathematical conversion. Real print colors depend on the printer's ink profile, so treat it as a starting point and check proofs with your printer.
Tips
Type or paste into any field — tomato, #f63, rgb(255 99 71) and oklch(70% 0.2 35) all work. Pick from screen appears in browsers that support the EyeDropper API (Chrome and Edge on desktop). The page address updates with the current color, so you can bookmark or share it.
Questions
How do I convert HEX to RGB?
Split the six digits into three pairs and read each pair as a base-16 number: #2B7FFF is 2B = 43, 7F = 127, FF = 255, so rgb(43, 127, 255). Paste any HEX code above and the RGB field shows it instantly.
What is OKLCH and should I use it?
OKLCH is a color format based on how people perceive lightness, chroma (colorfulness) and hue. It makes consistent palettes much easier: two colors with the same L value look equally light. It works in all current browsers; for very old ones, provide a HEX fallback.
How do I pick a color from an image or another app?
In Chrome or Edge on desktop, click “Pick from screen” and then click anywhere on your screen, including other windows. In other browsers, use your operating system's color picker, which opens when you click the big swatch.
Why does the CMYK value differ from my design app?
Apps like Photoshop convert using a specific print profile (for example, coated FOGRA39), which models real ink behaviour. This tool uses the plain formula without a profile, so values will be close but not identical.
What does “nearest CSS name” mean?
CSS has 140-odd named colors like tomato and steelblue. The tool finds the one that looks closest to your color, measured in the OKLab color space, and says whether it's an exact match.