Color Picker & Converter

Five notations, one color

Every color a screen or printer produces can be written in more than one way, and none of the notations is more "correct" than another — they're just different coordinate systems for the same point in color space. HEX and RGB describe how a monitor mixes red, green and blue light (additive color: stack all three at full strength and you get white). HSL and HSV re-describe that same light using hue, saturation and either lightness or value/brightness, which maps much closer to how people actually think about color ("a darker version of this blue"). CMYK flips the model entirely: it describes ink absorbing light off paper (subtractive color), so a designer preparing artwork for offset or digital print needs numbers in that space, not RGB.

Knowing which notation to reach for — and how to convert between them by hand — matters whenever a design tool, a CSS file, a print house and a client screenshot each hand you the same color in a different format.

HEX — compact hexadecimal for CSS

#RRGGBB packs the red, green and blue channels into two hexadecimal digits each (base 16, digits 0–9 and A–F), so every channel runs from 00 (0) to FF (255). An optional fourth pair, #RRGGBBAA, adds alpha (transparency) the same way. It's the format CSS, design tools and version-controlled style sheets use by default because it's short, copy-pastable and unambiguous.

RGB(A) — the channels a screen actually lights up

rgb(r, g, b) writes the same three channels in plain decimal, 0–255 each, with an optional fourth alpha value from 0 (fully transparent) to 1 (fully opaque) in rgba(). This is the literal voltage sent to a pixel's red, green and blue sub-elements, which is why image-processing code and canvas APIs work in RGB rather than hex strings.

HSL vs. HSV/HSB — the same wheel, two different third axes

Both start from hue, the angle around a color wheel from 0° to 360° (0/360 = red, 120 = green, 240 = blue), and saturation, how far the color sits from gray. They diverge on the third axis. HSL's lightness runs 0% (always black) to 100% (always white, regardless of hue), with pure, fully-saturated color sitting at 50% lightness. HSV/HSB's value (or "brightness") instead runs 0% (black) to 100% (the brightest, most vivid version of that hue) — at 100% value a fully saturated color stays fully saturated, it never fades toward white the way HSL does. That difference is exactly why most design-app color pickers use HSV (drag a big square for saturation × value, then pick a hue) while CSS gradients and "make it 20% lighter" tweaks read more naturally in HSL.

CMYK — subtractive ink for print

Cyan, Magenta, Yellow and Key (black), each 0–100%, describe how much of each ink a printer lays down. Light bounces off white paper and each ink layer absorbs (subtracts) part of the spectrum before it reaches your eye, which is the opposite process from a screen's additive RGB. Black ink (K) exists mainly because mixing 100% cyan+magenta+yellow gives a muddy dark brown rather than true black, and using pure black ink for text and shadows is both cheaper and sharper than three overlapping color inks.

How the math converts one into another

Every conversion starts by normalizing R, G, B from 0–255 to a 0–1 fraction (r′, g′, b′). From there:

• To HSL: lightness L = (max + min) ÷ 2 of the three fractions. Saturation is the spread (max − min) rescaled against how close L already is to black or white. Hue comes from which channel is largest and how far the other two lag behind it, mapped onto the 360° wheel.
• To HSV: value V = max of r′, g′, b′ directly. Saturation is (max − min) ÷ max — a much simpler ratio than HSL's, which is part of why HSV is easier to build a slider UI around. Hue uses the same formula as HSL.
• To CMYK: black K = 1 − max(r′, g′, b′). Then each ink channel is (1 − channel′ − K) ÷ (1 − K), which effectively "factors out" the shared darkness into K before computing the pure color underneath.

Worked examples

Format quick-reference

Common mistakes

• Reading a screen's CMYK as press-ready. Any on-screen CMYK figure — including this tool's — is computed with a simple formula, not a specific press or paper ICC profile. It's a useful ballpark, but a print shop's calibrated separation can shift the actual ink percentages noticeably.
• Treating HSL lightness and HSV value as interchangeable. 100% lightness is always white no matter the hue; 100% value can still be a fully saturated, vivid color. Dragging a "lightness" slider to max and a "value" slider to max do very different things.
• Assuming 3-digit hex shorthand always exists. #fff only works when both digits of every channel repeat (#RRGGBB → #RGB); a color like #D946EF has no shorter form.
• Forgetting alpha isn't part of hue/saturation/lightness math. Opacity is a separate compositing step layered on top of any of these five models — converting formats doesn't change how transparent something looks.

What this tool doesn't cover

All the math above assumes the sRGB color space, the default that web browsers and CSS use. Wide-gamut spaces such as Display P3 or Adobe RGB can represent some colors — deeply saturated reds and greens especially — that sRGB simply can't reach, so a P3 swatch sampled from a modern photo may shift slightly once expressed as sRGB hex or RGB. This tool also doesn't perform perceptual color-difference (ΔE) calculations or color-blindness simulation; its accessibility check is limited to the WCAG contrast ratio described in the FAQ below.