Color & Design·4 min read

Color Codes Explained: One Color, 17 Formats

A single color can be written a dozen ways, and each tool you touch seems to want a different one. Figma hands you hex, a CSS refactor asks for oklch(), the print shop wants CMYK, and an Android teammate needs a Kotlin value. The Color Converter shows one color in every common format at once, but knowing what each format actually describes is what lets you pick the right one without guessing. This guide walks through them using one worked color, #6366F1, a familiar indigo.

Open the free Color Converter All insights

Why one color has so many codes

Same light, different descriptions.

A screen pixel is three tiny lights: red, green and blue. Every format on this page is a different way of describing how bright those three lights are, or of describing what a person sees when they look at the result. Some formats are just the same three numbers written differently. Others rearrange them into ideas people find easier to adjust, like hue and lightness. A few model human vision directly.

That split explains most of the confusion. HEX, RGB, HSL, HSV and HWB are all exact rewrites of each other for screen colors, so converting between them loses nothing beyond rounding. CMYK is different in kind, because it predicts ink, and the perceptual formats such as CIE LAB and OKLCH measure appearance rather than light output.

The screen formats: HEX, RGB and their relatives

Three numbers, many spellings.

HEX is RGB in base 16. #6366F1 splits into 63, 66 and F1, which are 99, 102 and 241 in decimal, so the color is rgb(99, 102, 241). RGB percent writes the same channels as fractions of 255, and the decimal value packs all three into one 24 bit integer, 6,514,417 for this indigo, a form some databases and game engines store. The binary row is the same three bytes written out bit by bit.

HSL, HSV and HWB start from the same hue angle, 239 degrees here, and differ in how they describe the rest. HSL says 84% saturation and 67% lightness, where 50% lightness is the purest version of the hue. HSV, which many design apps call HSB, says 59% saturation and 95% brightness, where 100% brightness is the pure hue. HWB says how much white and black are mixed in: 38.8% white and 5.5% black. CSS accepts hsl() and hwb() directly.

The perceptual formats: CIE LAB, LCH, OKLab and OKLCH

Numbers that track what eyes see.

Screen formats are convenient but not even. Moving HSL lightness by ten points on a yellow looks like a tiny change, while the same move on a blue looks huge. CIE LAB was built so equal distances look like roughly equal differences. Our indigo is lab(50.1% 38.69 -70.49): half lightness, a push toward red on the a axis and a strong push toward blue on the b axis. LCH writes the same point as lightness, chroma and hue angle.

OKLab and OKLCH are newer takes on the same idea that fix a known flaw in LAB, where blues drift toward purple as they get lighter. The indigo is oklch(58.54% 0.2041 277.12). Modern CSS accepts oklch() and Tailwind v4 defines its default palette in it, so it is worth knowing if you maintain a design system. The converter uses the D65 white point for LAB, the reference white for sRGB screens, so figures from print software set to D50 will differ a little.

CMYK and web safe: formats with caveats

Read these as estimates.

CMYK describes cyan, magenta, yellow and black ink. The converter uses the plain formula, which gives cmyk(59%, 58%, 0%, 5%) for the indigo. Real presses convert through an ICC profile for a specific ink and paper, and bright screen colors like this one often cannot be printed exactly, so treat the numbers as a starting point for a conversation with your printer.

The nearest web safe color is a leftover from 256 color displays. Rounding each channel to a multiple of 51 turns #6366F1 into #6666FF. No modern screen needs it, but it still shows up in old style guides and some email checklists, so the converter lists it for reference.

Which format to use where

A quick map.

Match the format to the tool that will read it, not to personal taste. When in doubt, store hex as the source of truth and generate the rest.

Design tokens and brand guides: HEX, because every tool reads it.
CSS you will tweak by hand: hsl() or oklch(), where lightness is one number.
Theme scales and gradients: OKLCH, whose steps look even.
Measuring whether two colors match: CIE LAB and Delta E.
iOS, Android, Flutter and Unity: the code snippets on the converter page.
Print briefs: CMYK as a starting value, then a proof or a Pantone ink.

Reading the rest of the converter page

Context around the numbers.

Under the formats, the page describes the color in plain words, a light, vivid blue in this case, and names the closest CSS keyword, which for #6366F1 is mediumslateblue at a Delta E of about 3.9. It also shows contrast with white and black. The indigo gives 4.47:1 on white, just under the 4.5:1 that WCAG AA asks for normal text, and 4.70:1 on black, a useful warning before you set body text in it.

Further down you get eight color schemes, rows of tints, shades and tones, and how the color may look with four types of color blindness. Clicking any swatch loads it into the converter, so you can walk from a brand color to its complement to a darker hover state and copy each code on the way. When you find the one you need, Copy link to this color gives a URL you can drop into a ticket.