Color vocabulary comes from several traditions: painting, printing, photography, vision science, and digital imaging. The same word can describe a perceptual quality in one setting and a numerical component in another. Clear color communication begins by naming the model or medium, not by assuming that one diagram explains every kind of color.
Hue, saturation, lightness, and value
Hue is the family commonly named red, yellow, green, blue, and so on. In many color models it is represented as an angle around a circle. Hue does not by itself specify a color: a pale blue, vivid blue, and nearly black blue can share a similar hue while looking very different.
Saturation broadly describes colorfulness relative to a neutral or to the maximum possible in a model. Its exact definition depends on the model. HSL saturation is a computed coordinate, not a universal measurement of perceived vividness. Two colors with the same HSL saturation can appear unequally colorful.
Lightness usually describes how light or dark a color appears, or a light–dark coordinate in a particular model. HSL “lightness” is a simple function of sRGB components and is not perceptually uniform. Value, especially in art education and the HSV model, also refers to a light–dark dimension, but it is not interchangeable with every technical definition of lightness or luminance.
Tint, shade, and tone
In traditional paint vocabulary, a tint is a hue mixed with white, and a shade is a hue mixed with black. A tone is often a hue mixed with gray, or more loosely any moderated version of a color. Actual pigments interact through subtractive mixing, so the physical result is not identical to moving a slider in screen software.
These terms are useful directional language: “a lighter tint” communicates a design intention better than naming an arbitrary new hue. They are not complete production specifications. A paint formula, print ink recipe, or CSS value is needed to reproduce the result.
Chroma and contrast
Chroma is colorfulness relative to the brightness of a similarly illuminated white, with precise meanings in color science and in models such as CIELAB/LCH. Designers sometimes use “chroma” as a general synonym for intensity. That shorthand can work conversationally, but a technical workflow should identify the color space and coordinate.
Contrast is a difference between adjacent or compared elements. It can involve lightness, hue, saturation, size, texture, or another property. For readable text, light–dark contrast is crucial. WCAG defines a contrast ratio based on relative luminance; normal text generally needs at least 4.5:1 and large text at least 3:1 under the AA criterion. A pair can have strong hue contrast but insufficient luminance contrast for text.
Accessible communication: never make color the only carrier of status or meaning. Pair it with a label, icon shape, pattern, or text. The labeled swatches here remain identifiable even if their colors are not perceived.
Color temperature
“Warm” and “cool” are perceptual and artistic groupings: reds and oranges are often called warm, blues often cool. The terms are relational—a red can look cool beside an orange and warm beside a violet.
In lighting and photography, correlated color temperature is a technical quantity measured in kelvins. Counterintuitively, lower-temperature light sources often look visually “warmer” (more yellow-orange), while higher-temperature daylight can look “cooler” (more blue). Artistic temperature and a lamp’s kelvin rating are connected ideas, not identical scales.
RGB and screens
RGB represents color with red, green, and blue components. Displays create light additively: greater component values generally add more emitted light. In the common 8-bit notation, each channel ranges from 0 through 255. Thus rgb(0 0 0) is black, rgb(255 255 255) is white, and rgb(45 106 163) is the base blue shown above.
RGB numbers are meaningful only with a color space. On the web, ordinary RGB and hex colors resolve to sRGB. Wider-gamut spaces exist, and device output still depends on calibration, display capability, ambient light, and color management. A numeric match does not guarantee identical physical appearance on every screen.
HSL and hexadecimal notation
CSS HSL expresses sRGB using hue, saturation, and lightness coordinates. For example, hsl(209 57% 41%) approximates the base blue. HSL is convenient for choosing related colors because its controls are named in familiar terms. It is not a perceptually uniform color space: equal numerical steps do not produce equal-looking steps.
Hexadecimal notation is another way to write sRGB channel values. #2D6AA3 divides into 2D red, 6A green, and A3 blue. Hex digits run 0–9 then A–F; each two-digit channel ranges from 00 (0) to FF (255). The shorthand #369 expands to #336699. Four- and eight-digit forms add an alpha channel for transparency.
Hex is compact, but it is not inherently more accurate than rgb(), and neither notation names a pigment or print ink. Alpha changes compositing, not the intrinsic color: a translucent foreground produces different visible results over different backgrounds.
A practical vocabulary
For creative discussion, “a muted, cooler blue with more light–dark contrast” may be enough. For implementation, follow it with values and context: “sRGB #2D6AA3 on #F5F0E7.” For accessibility, record the tested contrast ratio and non-color cue. For print, use the printer’s requested color space, profile, stock, and proofing process rather than converting screen values by guesswork.
Color terms are most reliable when they do not pretend to be more exact than they are. Artistic vocabulary describes relationships and intentions; technical models encode coordinates under stated assumptions. Both are useful, and knowing which one is speaking prevents many avoidable disagreements.