A designer hands you a HEX code from Figma. A backend developer needs that same color in RGB for an SVG. The print shop wants CMYK. The Tailwind config expects hex in square brackets. The new design system uses HSL for everything because it makes light and dark variants easier to compute. If you have ever wondered why so many color formats exist or felt mildly lost switching between them, this article is the practical guide you needed.
Why so many formats?
Colors look like a single thing (a patch of red) but underneath they are points in a multi-dimensional color space. Different fields care about different dimensions:
- Engineers care about exact bits to send to a screen (RGB).
- Designers care about hue and lightness when picking palettes (HSL, HSV).
- Print shops care about how much ink lands on paper (CMYK).
- Researchers and modern design systems care about perceptual uniformity (LAB, OKLCH).
Each format is just a different lens on the same physical color. Convert between them and the actual color does not change; only the numbers do.
HEX: the web default
HEX is six hexadecimal digits prefixed with a hash, like #8B5CF6. The six digits split into three pairs representing red, green, and blue, each from 00 to FF (0 to 255 in decimal). It is the most common format on the web because it is compact and easy to copy.
Short form
Three-digit HEX like #F00 is shorthand for#FF0000. Each digit is doubled to make six. Use the long form whenever you need precise colors; only six possible short forms exist for each three-digit shorthand.
HEX with alpha
Eight-digit HEX adds an alpha channel for transparency: #8B5CF680. The last two digits are the opacity from 00 (fully transparent) to FF (fully opaque). Modern CSS supports this directly.
RGB and RGBA
RGB writes the same data as three decimal values from 0 to 255: rgb(139, 92, 246). RGBA adds an alpha value from 0 to 1: rgba(139, 92, 246, 0.5).
Use RGB or RGBA when you need to compute colors programmatically (linear interpolation, gradients) since the components are easier to manipulate than HEX. CSS, SVG, Canvas, and WebGL all accept RGB directly.
HSL: hue, saturation, lightness
HSL describes color as three more intuitive values:
- Hue (0 to 360): the angle around the color wheel. 0 is red, 120 is green, 240 is blue.
- Saturation (0 to 100%): how vivid the color is. 0% is gray, 100% is fully saturated.
- Lightness (0 to 100%): how light or dark. 0% is black, 50% is the pure color, 100% is white.
Example: hsl(258, 90%, 66%). HSL shines when you need to generate variations: a darker version of a brand color, a hover state, a complementary accent. Just shift the lightness or rotate the hue.
The hover state recipe
HSV (also called HSB)
HSV is similar to HSL but with a slightly different math model. Hue is the same (an angle on the color wheel). Saturation is similar but defined relative to maximum brightness. Value (or Brightness) is how bright the color is, from 0 (black) to 100% (full color).
Adobe products (Photoshop, Illustrator) use HSV. Most web tools use HSL. The two are interconvertible but not identical. For new web work, prefer HSL.
CMYK: the print format
Screens emit light: more light equals brighter. Printers deposit ink: more ink equals darker. The math is reversed. CMYK uses Cyan, Magenta, Yellow, and Key (black) as percentages from 0 to 100, like cmyk(43%, 63%, 0%, 4%).
The Key channel exists because mixing C, M, and Y inks theoretically makes black but in practice produces a muddy brown. Adding pure black ink lets printers achieve a true deep black with less total ink.
Screen colors and print colors do not match
Modern formats: LAB, LCH, and OKLCH
Older color formats (RGB, HSL) have an annoying property: they are not perceptually uniform. A 10 percent lightness change in HSL looks bigger in some hues than others. Yellow at HSL lightness 50% looks much brighter than blue at lightness 50%. This breaks design systems that try to compute consistent contrast or palettes.
LAB, LCH, and OKLCH are perceptually uniform color spaces designed to fix this. OKLCH is the most modern and is now supported in all major browsers. The format looks like oklch(0.7 0.2 265): lightness from 0 to 1, chroma (saturation), and hue in degrees.
OKLCH is what Tailwind CSS v4 uses for all its color primitives. It is what modern design tokens are starting to standardize on. If you are designing a new color system today, OKLCH gives you the most predictable results.
Side by side
| Format | When to use | |
|---|---|---|
| HEX | Compact text format, three or six digits | Web markup, copy from design tools, brand colors |
| RGB | Three values 0 to 255 | Programmatic color computation, SVG, Canvas |
| HSL | Hue, Saturation, Lightness | Generating palettes, hover states, dark mode |
| HSV | Hue, Saturation, Value | Color picking in Adobe products |
| CMYK | Cyan, Magenta, Yellow, Key | Print production |
| OKLCH | Perceptually uniform | Modern design systems, predictable color math |
Tailwind class snippets
Tailwind accepts arbitrary colors in square brackets:
bg-[#8B5CF6]: background with a HEX valuetext-[rgb(139,92,246)]: text with an RGB valueborder-[hsl(258,90%,66%)]: border with HSLbg-[oklch(0.7_0.2_265)]: background with OKLCH (note: spaces become underscores in arbitrary values)
Color blindness and contrast
About 8 percent of men and 0.5 percent of women have some form of color blindness. Designs that rely solely on color to convey information (red bad, green good) fail for these users. Always pair color with text, icons, or position.
Contrast matters for everyone. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5 to 1 for normal text, 3 to 1 for large text. Tools that show the contrast ratio between two colors are essential for accessible design.
Common questions
Why does my color look different on another screen?
Monitors, phones, and printers all have different color profiles and gamuts. The same HEX code displayed on two screens can look slightly different. For pixel-perfect color, hardware calibration is required. For most practical work, treating colors as approximately correct is fine.
How do I add transparency?
Use RGBA: rgba(139, 92, 246, 0.5). Or use the modern HEX form with alpha: #8B5CF680. Or in HSL: hsla(258, 90%, 66%, 0.5).
Why does CMYK look slightly different from RGB?
Conversion is an approximation since the two color spaces cover different ranges. Some RGB colors cannot be reproduced in CMYK (very saturated greens and blues are common offenders). The conversion picks the closest available CMYK color.
Should I switch all my code to OKLCH?
For new design systems, yes. For existing projects, the migration cost may not be worth it unless you are running into the perceptual uniformity issues. HEX, RGB, and HSL are not going away anytime soon.
Convert between formats instantly
ToolHub Color Picker shows your color in HEX, RGB, HSL, HSV, and CMYK simultaneously. Click any format to copy. Includes Tailwind class snippets and a curated palette to pick from.
Free tool
Try the Color Picker now
Pick colors and convert between formats
Summary
HEX is the universal web shorthand. RGB is the underlying truth screens render. HSL makes palette generation intuitive. HSV is what Photoshop uses. CMYK is for print and is always an approximation from RGB. OKLCH is the modern future for perceptually uniform color systems. Knowing which to use when is one of those small skills that pays off every time you cross between design and code.