Color Picker Terms: 12 Essential Words Explained Simply

A color picker shows one color in five notations at once, and every notation uses a few words that are rarely explained: hue, saturation, lightness, channel, gamut. This glossary defines each term in plain language and ties it to the same example color so the pieces fit together.

The example is #6366F1, a purple blue. You can paste it into the Color Converter Online Free and follow along. Every number below was worked out with the standard formulas.

One color, five color picker notations

Notice that saturation reads 84 percent in HSL and 59 percent in HSV for the identical color. That is not an error. The two models define saturation differently, and the glossary below explains how.

Glossary part 1: the basic building blocks

Channel

One of the three light components of a screen color: red, green or blue. Each channel is stored as a number from 0 to 255.

Hexadecimal

A base 16 number system that uses 0 to 9 and A to F. Two hex digits cover 0 to 255, so a color needs six digits, two per channel.

HEX code

A hash sign followed by six hex digits. #6366F1 means red 63, green 66, blue F1, which is 99, 102 and 241 in decimal.

RGB

A color written as three decimal channel values from 0 to 255. Black is 0, 0, 0 and white is 255, 255, 255.

Alpha

A fourth channel for opacity. 0 is fully transparent and 1, or 100 percent, is fully solid. RGBA and 8 digit hex both carry it.

sRGB

The default color space of the web. Every RGB value on a normal web page is read as sRGB unless the page says otherwise.

Short hex codes exist in a color picker too. The CSS Color specification allows three digits, where each digit doubles, so #06f is the same as #0066ff. Eight digit hex adds alpha at the end, so #0000ffcc is blue at 80 percent opacity, because CC in hex is 204 and 204 out of 255 is 0.8.

Worked conversion: from HEX to HSL by hand

Seeing the color picker arithmetic once removes the mystery. Start with #6366F1, which is 99, 102 and 241 in RGB. Scale each channel to a 0 to 1 range by dividing by 255.

Every color picker repeats this in microseconds. Knowing the steps helps you spot nonsense results, such as a saturation above 100 percent, which signals a typing error.

Glossary part 2: hue, saturation, lightness and value

Hue

The position of a color on the color wheel, measured in degrees from 0 to 360. Red is 0, green is 120 and blue is 240.

Saturation

How vivid a color is. A saturation of 0 is a grey, and a high value is a strong, pure color.

Lightness (HSL)

How close the color is to black or white. In HSL, 0 percent is black, 100 percent is white and 50 percent is the pure color.

Value (HSV)

How bright the color is, measured from black. In HSV, 100 percent means the brightest version of the hue, not white.

Tint, shade and tone

A tint mixes a color with white, a shade mixes it with black and a tone mixes it with grey. A color picker often builds them by moving lightness up or down in fixed steps.

Both models start from the largest and smallest channel values. HSL takes lightness as the midpoint of the two. HSV takes value as simply the largest. That one choice is what makes saturation differ.

Glossary part 3: color schemes and the hue wheel

A color picker builds harmonies by converting to HSL, rotating the hue by a fixed number of degrees, and converting back. The saturation and lightness stay put.

Complementary

The color directly opposite on the wheel, 180 degrees away. It gives the strongest contrast.

Triadic

Three colors spaced 120 degrees apart. Lively, and best when one dominates.

Analogous

Neighbours on the wheel, usually 30 degrees apart. Calm and harmonious.

Split complementary

A base color plus the two colors on either side of its complement. It keeps contrast but is less harsh.

Glossary part 4: accessibility words

Relative luminance

A measure of how bright a color appears, from 0 for black to 1 for white. It weights green most, then red, then blue, after undoing the gamma curve of sRGB.

Contrast ratio

A number from 1 to 21 that compares the luminance of two colors. The formula is (lighter + 0.05) divided by (darker + 0.05).

WCAG AA

The common accessibility level. It asks for at least 4.5 to 1 for normal text and 3 to 1 for large text.

WCAG AAA

The enhanced level, with at least 7 to 1 for normal text.

Here is a color picker result that surprises people. The purple blue looks like a color that wants white text, yet black text has better contrast. White narrowly fails the normal text threshold by 0.03.

Relative luminance in code

Copyfunction lin(c) {
  c = c / 255;
  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}
function luminance(r, g, b) {
  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
}
// luminance(99, 102, 241) = 0.185

Glossary part 5: print, gamut and why CMYK is only an estimate

CMYK

Cyan, magenta, yellow and key (black). Inks subtract light from white paper, so the model is subtractive while a screen is additive.

Gamut

The range of colors a device or color space can reproduce. Some bright screen colors have no ink equivalent.

ICC profile

A file that describes how a particular printer, ink and paper turn numbers into real color. Only a profile gives a trustworthy print match.

A color picker converts to CMYK with a simple formula: black is 1 minus the largest channel, and cyan, magenta and yellow are computed from what remains. For #6366F1 that gives 59, 58, 0 and 5 percent. The result is a starting point. A print shop working from an ICC profile may produce a visibly different blue.

Which format should you use? A quick decision list

To pull colors out of a photo instead of choosing them by eye, the Color Palette Extractor finds the dominant colors of an image, and the Gradient Generator blends them into CSS.

Color picker questions

• Color Contrast Checker
• Color Palette Extractor
• Gradient Generator

Sources: W3C CSS Color Module Level 4: hex notation and hsl() · W3C WCAG 2.1: contrast minimum, 4.5 to 1 and 3 to 1