Web Colors: HEX, RGB, HSL and CMYK Explained

How screens make color (additive RGB)

Get close enough to a screen and you can spot three tiny lights in every dot: one red, one green, one blue. Every pixel is one of those trios, and the color you perceive is the sum of those three lights. That is why the model is called additive RGB: you start from black — screen off, no light at all — and add intensity until you reach white, which is all three at full blast.

Each channel runs from 0 to 255. That range is not arbitrary: it is 8 bits per channel (2⁸ = 256 values, 0 through 255). Three 8-bit channels make 24 bits total — "true color" — capable of 256 × 256 × 256 = 16,777,216 distinct colors. A few quick examples:

• rgb(0, 0, 0) — black (everything off)
• rgb(255, 255, 255) — white (everything maxed out)
• rgb(255, 0, 0) — pure red
• rgb(255, 255, 0) — yellow (red + green, no blue)
• rgb(128, 128, 128) — mid gray

Here is the catch that trips up anyone who learned to mix paint in school: in light, red plus green makes yellow, not some muddy brown. Additive mixing has its own rules because it is summing light, not pigment. Hold on to that — it is the exact opposite of what happens in print, which we get to at the end.

HEX: RGB written in hexadecimal

When you see #FF5733 in a stylesheet or in Figma, that is just RGB in disguise. HEX writes the same three channels, only in base 16 (hexadecimal) instead of base 10. Each channel takes two hex digits, running from 00 (0 in decimal) to FF (255 in decimal). The format is #RRGGBB.

Decoding it is straightforward. Take #1E90FF (dodger blue):

• 1E → 1×16 + 14 = 30 (red)
• 90 → 9×16 + 0 = 144 (green)
• FF → 15×16 + 15 = 255 (blue)

So #1E90FF is exactly rgb(30, 144, 255). Remember that in hexadecimal the letters A through F stand for 10 through 15. The pair FF is the ceiling (255) and 00 is the floor (0). When both digits in each pair match, there is a three-digit shorthand: #F00 equals #FF0000 (pure red) and #FFF is white. The browser simply doubles each digit.

Before dropping a code into your CSS, it pays to check that it is well formed — three or six hex digits (or eight, with alpha), nothing outside the 0–9 / A–F set. The Hex Color Validator flags a missing digit or a stray G instantly. And to go from HEX to RGB and back without doing the math in your head, the Color Converter handles both directions.

HSL: thinking in hue, saturation and lightness

RGB and HEX tell you how much of each light, but they are terrible for human reasoning. If I ask you to "make this blue a bit lighter," you have no idea off the top of your head which of the three numbers to nudge. HSL fixes that by describing color the way we actually think, with three quantities:

• H (hue) — the color itself, as an angle from 0° to 360° around a wheel. 0° is red, 120° is green, 240° is blue, and 360° loops back to red.
• S (saturation) — how intense the color is, from 0% (pure gray) to 100% (vivid).
• L (lightness) — how light it is, from 0% (black) through 50% (the "full" color) to 100% (white).

Now "lighter" is just raising L. "More muted" is lowering S. And a harmonious palette is often the same H with S and L shifting. Let's convert rgb(255, 128, 0) (an orange) into HSL to feel the logic:

1. Normalize each channel to 0–1: R = 1, G = 0.502, B = 0.
2. Find the max (max = 1, the red) and the min (min = 0, the blue).
3. Lightness: L = (max + min) / 2 = (1 + 0) / 2 = 0.5 → 50%.
4. Saturation: since L = 0.5, S = (max − min) / 1 = 1 → 100%.
5. Hue: red is the max, so H = 60 × (G − B) / (max − min) = 60 × 0.502 ≈ 30°.

Result: hsl(30, 100%, 50%). That checks out — orange sits between red (0°) and yellow (60°), right in the middle at 30°. The Color Converter shows HSL alongside HEX and RGB, which is handy when you want to spin up lighter and darker variants of a single brand color.

CMYK and why print is a different story

A screen emits light; paper reflects it. That one difference changes everything. In print you start from the white of the paper and subtract light with ink — a subtractive model. The inks are Cyan, Magenta, Yellow and Key (black), each measured from 0% to 100%. The separate black exists for economy and crispness: mixing the three colored inks at full strength gives a muddy dark brown and soaks the paper, so real black ink is used instead.

Converting RGB to CMYK starts with K. For pure red rgb(255, 0, 0):

• R' = 1, G' = 0, B' = 0
• K = 1 − max(R', G', B') = 1 − 1 = 0%
• C = (1 − R' − K) / (1 − K) = (1 − 1) / 1 = 0%
• M = (1 − G' − K) / (1 − K) = (1 − 0) / 1 = 100%
• Y = (1 − B' − K) / (1 − K) = (1 − 0) / 1 = 100%

So screen red is cmyk(0%, 100%, 100%, 0%) — magenta plus yellow, no cyan. The RGB ⇄ CMYK Converter runs that conversion both ways.

The most common headache is not the formula — it is the gamut: the set of colors each model can actually produce. A screen's RGB reaches far more vivid greens, oranges and blues than any ink can. Send a logo in an electric lime green off to print and it comes back looking washed out, because the color was outside the CMYK gamut. That is why anyone designing for print works in CMYK from the start instead of discovering the surprise at the print shop. The formula conversion is only an approximation; a faithful result depends on the color profile (ICC) of the press and the paper.

Contrast and accessibility (WCAG)

Picking pretty colors is not enough — the text has to be readable. The WCAG guidelines measure this with a contrast ratio between the text color and its background, running from 1:1 (identical colors, unreadable) up to 21:1 (pure black on pure white, the maximum possible).

The calculation uses each color's relative luminance, weighting green far more than blue (the human eye is most sensitive to green). The practical targets are:

"Large text" means 18pt regular or 14pt bold and above. Here is a mistake plenty of people make: that elegant light gray #999999 on a white background scores only ≈ 2.8:1 — it fails even AA. The lightest gray that still passes AA on white is around #767676 (≈ 4.5:1). And #FFFF00 (yellow) on white is nearly invisible, while the same yellow on black has very high contrast. So test the pairing before you lock the design, adjusting the lightness (the L in HSL) until it clears the target. The Color Converter helps you find a darker variant of your brand color that keeps the identity but gains contrast.

Frequently asked questions

Are HEX and RGB the same color?

Yes. They are just two ways of writing the same three channels. #1E90FF and rgb(30, 144, 255) produce the exact same pixel — one is in base 16, the other in base 10. HEX is more compact for CSS; RGB is more readable and lets you add the alpha channel explicitly with rgba().

When should I use HSL instead of HEX?

Use HSL when you need to reason about the color: building a palette (same hue, different lightness), lightening or darkening a button's :hover state, or generating shades of gray. To store a fixed color in a file, HEX is what most tools expect. Both describe the same color; it is purely a matter of convenience.

Why does my color look different when I print it?

Because the screen uses RGB (light, additive) and the printer uses CMYK (ink, subtractive), and the CMYK gamut is smaller. Highly saturated colors — vivid greens, neon oranges, electric blues — simply do not exist in ink and come out duller. To avoid surprises, work the file in CMYK from the start and trust the print shop's color profile, not just the automatic conversion.

What do the two extra digits in an 8-character HEX mean?

They are the alpha channel — the opacity. In #RRGGBBAA, the final pair runs from 00 (fully transparent) to FF (fully opaque). #00000080, for example, is black at about 50% transparency, since 80 in hex is 128.

What is the minimum contrast text needs?

Under WCAG level AA, 4.5:1 for normal text and 3:1 for large text (18pt and up, or 14pt bold). The stricter AAA level asks for 7:1 and 4.5:1 respectively. These are accessibility recommendations, not legal advice — statutory requirements vary by country and by type of site.