Color Glossary
26 terms that come up whenever colors are discussed, defined without jargon and linked to the tool that puts each one to work. If you only read three: hue is the color, saturation is how vivid it is, and lightness is how much white or black is in it.
Color basics
- Hue
- The position of a color on the wheel, measured in degrees from 0° (red) through 120° (green) to 240° (blue). Hue is what people mean by "the color" itself, apart from how light or vivid it is.
- Explore hues on the wheel
- Saturation
- How pure a color is — the distance from grey to the most vivid version of that hue. 0% saturation is always a neutral grey, whatever the hue.
- Adjust saturation
- Lightness
- How much white or black is mixed into a hue, from 0% (black) through 50% (the pure color) to 100% (white).
- Read a hex code’s lightness
- Value (brightness)
- In HSV/HSB, the brightness of the strongest channel rather than a midpoint: 0% is black and 100% is the brightest version of the hue.
- Convert hex to HSV
- Chroma
- Colorfulness measured against a grey of the same lightness. Chroma is the C in OKLCH, where equal steps look like equal steps in vividness.
- Work with chroma in OKLCH
- Tint, shade and tone
- A tint is mixed with white, a shade with black and a tone with grey. All three keep the hue and change lightness or saturation.
- Generate tints and shades
Color models and spaces
- RGB
- An additive model where red, green and blue light are mixed, each channel running from 0 to 255. Screens work in RGB.
- Convert RGB to hex
- Hex code
- Six hexadecimal digits storing an RGB color as three byte pairs, written #RRGGBB — the most portable way to write a color in CSS.
- See a hex code in context
- HSL
- Hue, saturation and lightness: the cylindrical form of RGB. It is easier to reason about because you can change one property at a time.
- Convert HSL to hex
- HSV / HSB
- The same hue and saturation as HSL, but with value or brightness as the third channel. Most design tools show HSB; CSS uses HSL.
- Compare HSV with HSL
- CMYK
- A subtractive ink model using cyan, magenta, yellow and black. Its gamut is smaller than RGB, so printed colors are usually duller than on screen.
- Convert RGB to CMYK
- OKLCH
- A perceptually uniform CSS Color 4 space of lightness, chroma and hue. Equal numeric steps look like equal visual steps, which makes consistent palettes easier.
- Convert OKLCH to hex
- Gamut
- The range of colors a device or space can reproduce. sRGB is the web baseline; Display P3 is wider and cannot be written as a hex code.
- Browse reference charts
- Alpha
- The opacity channel, from 0 (invisible) to 1 (opaque), written in CSS as rgba(), hsla() or two extra digits in an 8-digit hex code.
- Add alpha to a hex code
Perception and accessibility
- Relative luminance
- The perceived brightness of a color, calculated from its RGB channels with the sRGB gamma curve applied. Every contrast ratio is derived from it.
- Check a contrast ratio
- Contrast ratio
- The luminance ratio between two colors, written x:1 and ranging from 1:1 to 21:1. WCAG asks for 4.5:1 for normal text and 3:1 for large text.
- See palettes that pass
- Color temperature
- The warm or cool bias of a color: reds, oranges and yellows read warm, blues and greens cool. Mixing temperatures is what makes a palette feel balanced or uneasy.
- Simultaneous contrast
- The effect where a color appears to change depending on its surroundings — the same grey looks lighter on black than on white, so a color must be judged in context.
- See a color in context
- Color vision deficiency
- A reduced ability to distinguish certain hues, most commonly reds and greens. Simulating it shows whether a palette still works when hue is unavailable.
- Simulate color blindness
- Color space
- A defined system for describing colors, with its own primaries, white point and transfer function. sRGB, Display P3 and OKLCH are all color spaces.
- Browse the color library
Palettes and practice
- Palette
- A set of colors chosen to be used together: usually one dominant color, one or two accents and a neutral for the space between them.
- Generate a palette
- Color scheme
- A palette built from one base hue with a fixed rule on the wheel — complementary, analogous, triadic, split-complementary, tetradic or monochromatic.
- Compare all six rules
- Complementary colors
- Two hues opposite each other, 180° apart. Each makes the other look more vivid, which suits focal points and not large areas.
- See complementary pairs
- Analogous colors
- Neighbouring hues within about 30° of the base. They share an undertone, so the result reads as calm and cohesive rather than contrasting.
- Complementary vs analogous
- Monochromatic
- One hue at several lightness levels. It cannot clash with itself, which makes it the safest scheme to extend into a full interface or brand ramp.
- Build a monochromatic scale
- 60-30-10 rule
- A proportion guide for three-color palettes: about 60% of the area in the dominant color, 30% in the secondary, 10% in the accent.
- Apply it to a pairing
Color vocabulary gets confusing because the same property has three names depending on the model: HSL calls it lightness, HSV calls it value and OKLCH calls it lightness again — but measured perceptually rather than geometrically. This glossary keeps the definitions short and points each one at a working tool, so when a definition says chroma you can open the OKLCH converter and change it.
Frequently asked questions
Hue is the position on the color wheel, saturation is how far the color is from grey, and lightness is how far it is from black or white. Together they describe any color in HSL.
Good to know
- 26 definitions across 4 groups, each with a working example to open.
- Definitions are also published as schema.org DefinedTerm data for answer engines.
- Every term connects to a tool, so the vocabulary and the practice stay in one place.
Put the vocabulary to work
Change a hue, lift the lightness, check the contrast — the fastest way to make these definitions stick.
Guides for Color Picker
Longer reads for the questions that come up around color picker.
