The Complete Color Design Glossary: 60 Terms Every Designer Should Know

Design conversations move faster and produce better outcomes when everyone in the room uses the same vocabulary. Color has a precise lexicon that spans art history, perceptual psychology, physics, and software engineering — and knowing it fluently separates designers who talk about color clearly from those who rely on subjective, imprecise descriptions. Here are 60 essential color terms, grouped by category, with clear definitions and practical context.

Fundamental Color Properties

Hue — The attribute of a color that places it on the color wheel — the quality we refer to when we say something is "red" or "blue" or "green." In HSL and HSB, hue is measured in degrees from 0 to 360. Changing hue shifts the color family without changing its intensity or depth.

Saturation — The intensity or purity of a color. At maximum saturation, a color is as vivid as it can be. At zero saturation, a color becomes gray. Also called chroma in some color models. Related concept: a desaturated color is a tone of the original hue.

Lightness — In the HSL model, the dimension that controls how light or dark a color is, from 0% (black) to 100% (white). At 50% lightness, a color is at its most vivid expression. Distinct from brightness in HSB.

Brightness / Value — In the HSB model, the dimension controlling luminosity. At 0% brightness, any color is black. At 100% brightness with 0% saturation, the color is white. Confusingly different from lightness in HSL — the two models represent the same color space with different navigation methods.

Chroma — The colorfulness of a color relative to a white of the same lightness. Used in perceptually uniform color models like LCH and OKLCH. Distinct from saturation, which is relative to the maximum possible saturation at a given lightness level.

Luminance — The perceived brightness of a color as measured by its physical light output, weighted by the sensitivity of human vision at different wavelengths. Used in contrast ratio calculations for accessibility. Critical for WCAG compliance — our article on WCAG Color Contrast and Why Your Website Needs It explains luminance in the accessibility context.

Contrast Ratio — The ratio of relative luminance between a foreground and background color, expressed as X:1. White on black is 21:1. WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text.

Color Relationships and Harmonies

Complementary Colors — Colors directly opposite each other on the color wheel, separated by 180°. They create maximum hue contrast when placed together. Example: blue and orange.

Analogous Colors — Colors adjacent to each other on the color wheel, within approximately 30-90° of each other. They feel naturally cohesive because they share spectral proximity. Example: blue, blue-green, green.

Triadic Colors — Three colors equally spaced around the color wheel, separated by 120° each. Offer balance and variety simultaneously. Example: red, yellow, blue (the primary triad).

Split-Complementary — A variation on complementary harmony where one color is paired with the two colors adjacent to its complement. Offers contrast without the tension of true complementary pairings.

Tetradic / Square — Four colors arranged in a square or rectangle on the color wheel. The richest and most complex harmony type, requiring careful proportion management.

Monochromatic — A color scheme using a single hue at varying levels of saturation and lightness. Produces high visual unity when built with adequate tonal range.

Color Modifications

Tint — A pure hue with white added, increasing lightness and reducing visual weight. Pastel colors are tints. In HSL, created by increasing the lightness value.

Shade — A pure hue with black added, decreasing lightness and increasing visual weight. Navy is a shade of blue. In HSL, created by decreasing the lightness value.

Tone — A pure hue with gray added, reducing saturation without dramatically changing lightness. Muted, sophisticated colors are tones. In HSL, created by decreasing the saturation value. Covered in depth in our article on What Are Tints, Shades, and Tones? The Difference Explained Simply.

Desaturation — The process of reducing a color's saturation, moving it toward gray. Synonymous with toning when the lightness is held constant.

Color Models and Formats

RGB — Red, Green, Blue. The additive color model used by screens. Each channel ranges from 0 to 255. Full red+green+blue = white. Zero of all = black.

HEX — Hexadecimal notation for RGB values. A six-character code where each pair represents a color channel in base-16. #ff0000 = full red (255, 0, 0 in RGB).

HSL — Hue, Saturation, Lightness. A perceptually intuitive representation of the RGB color space. Preferred for design work because each parameter maps to a distinct perceptual quality. Covered in our article on HEX vs RGB vs HSL: Which Color Format to Use and When.

HSB / HSV — Hue, Saturation, Brightness (or Value). The color model used by most design tool color pickers. Related to HSL but navigates the color space differently. Covered in our article on Understanding Hue, Saturation, and Brightness: The HSB Color Model Explained.

CMYK — Cyan, Magenta, Yellow, Black. The subtractive color model used in print. Describes ink coverage for each channel. Has a smaller gamut than RGB. Conversion from RGB to CMYK can produce gamut clipping for highly saturated digital colors.

LAB — A device-independent color model based on human vision. L = lightness, A = green-red axis, B = blue-yellow axis. Used for precise color measurement, gamut mapping, and color difference calculation.

LCH — Lightness, Chroma, Hue. A polar representation of LAB. More intuitive than LAB because hue is expressed as degrees (like HSL) rather than as X/Y coordinates. Perceptually uniform: equal steps in L produce equal perceived brightness changes.

OKLCH — An improved version of LCH with better perceptual uniformity across the full hue range. Increasingly supported in modern CSS. The recommended format for building perceptually consistent design token scales.

sRGB — Standard Red Green Blue. The default color space for web content and most consumer screens. Colors specified in CSS are assumed to be in sRGB unless otherwise specified.

P3 / Display P3 — A wider color gamut than sRGB, supported by modern iPhone displays, recent MacBooks, and HDR monitors. CSS Color Level 4 allows specifying colors in the P3 gamut using color(display-p3 r g b) syntax.

Gamut — The range of colors that can be represented within a given color model or reproduced by a given device. sRGB is a smaller gamut than P3. CMYK is generally a smaller gamut than sRGB, particularly for highly saturated colors.

Color Perception

Color Temperature — The perceived warmth or coolness of a color. Warm colors (reds, oranges, yellows) evoke fire and sunlight. Cool colors (blues, blue-greens) evoke sky and water. Also refers to the technical measure of light color in Kelvin — incandescent light is warm (~3000K), daylight is neutral (~6500K).

Simultaneous Contrast — The phenomenon where a color appears to change when its surrounding colors change. The same gray looks darker against white than against black. Critical understanding for evaluating colors in context rather than in isolation.

Successive Contrast — The phenomenon where an afterimage of a color's complement appears after staring at a color and then looking at a neutral surface. Fatigued color receptors create the perception of the complementary hue.

Color Constancy — The perceptual tendency to perceive a color as relatively constant despite changes in illumination. A white paper looks white in both sunlight and candlelight, even though the actual wavelengths reflected are dramatically different.

Metamerism — The phenomenon where two colors appear identical under one light source but different under another. Relevant in print color matching, where colors that match on screen may not match under different lighting conditions.

Chromatic Adaptation — The ability of the human visual system to adjust to different illuminant color temperatures, maintaining approximate color constancy. The mechanism behind the visual system's tendency to correct for ambient light color.

Accessibility and Standards

WCAG — Web Content Accessibility Guidelines. The international standard for web accessibility, published by the W3C. Current version is 2.1; version 3.0 is in development. Includes specific color contrast requirements for text and UI components.

APCA — Advanced Perceptual Contrast Algorithm. The contrast calculation method proposed for WCAG 3.0. More perceptually accurate than the current WCAG 2.1 contrast formula, accounting for text size, weight, and polarity (light text on dark vs dark text on light).

Deuteranopia — A form of color vision deficiency affecting approximately 5% of men, characterized by inability to distinguish between red and green hues. The most common color vision deficiency.

Protanopia — A form of color vision deficiency affecting approximately 2% of men, characterized by reduced sensitivity to red light in addition to red-green confusion. Reds appear very dark and may be confused with black.

Tritanopia — A rare form of color vision deficiency affecting the blue-yellow axis. Blue appears green-like; yellow appears pink or red-like.

Achromatopsia — Complete color blindness, resulting in monochromatic vision. Extremely rare. Designs accessible to achromatopsia users are accessible to all other forms of color vision deficiency as well.

Color Systems and Tokens

Color Token — A named variable that stores a color value in a design system. Tokens abstract colors from their values, enabling theme switching and ensuring consistent usage. Primitive tokens store raw values; semantic tokens store role-based references.

Semantic Color — A color defined by its functional role rather than its visual appearance. color-action-primary is a semantic color name. blue-500 is a primitive color name. Semantic colors enable theme switching — the same semantic token maps to different primitive values in light and dark themes.

Color Scale — A systematic set of color values that span the full lightness range of a given hue, typically in 8-12 steps from near-white to near-black. The foundation of design token color systems. Building color scales correctly is covered in our article on From Color Shades to Full Palettes: How to Scale Any Color Correctly.

Design Token — A named constant that stores a design decision — a color value, a spacing value, a typography value. Design tokens are the interface between design and development, ensuring that design decisions are implemented consistently across a codebase.

CSS Custom Property — A user-defined CSS variable, declared with two dashes (--my-variable: #3b82f6) and referenced with var(--my-variable). The primary mechanism for implementing color token systems in web development.

Advanced Color Concepts

Color Harmony — A structured relationship between colors that produces a sense of visual coherence. Common harmony types include complementary, analogous, triadic, and monochromatic. Covered comprehensively in our article on Complementary, Analogous, Triadic: A Practical Guide to Color Harmonies.

Color Palette — A curated set of colors selected for use in a design project or brand system. A palette defines the available colors; a color system defines how those colors are used.

Color System — The complete architecture of color in a design system, including the palette, usage rules, semantic tokens, component tokens, and documentation. More comprehensive than a palette — it includes the logic governing how colors are applied, not just the colors themselves.

Pantone — A proprietary color matching system widely used in print, manufacturing, and fashion. Pantone colors are specified by a fixed ink formula, ensuring consistent reproduction across printers and materials. PMS stands for Pantone Matching System.

Color Rendering Index (CRI) — A measure of how accurately a light source renders colors compared to natural light. High CRI (90+) light sources reveal colors more accurately. Relevant for physical product design and retail display environments.

Itten's Color Theory — The color theory framework developed by Johannes Itten at the Bauhaus, covering color contrasts (hue contrast, light-dark contrast, cold-warm contrast, complementary contrast, simultaneous contrast, saturation contrast, and extension contrast). Foundational to how most designers learn to think about color relationships.

Albers Color Theory — Josef Albers' contribution to color theory, centered on the observation that color perception is always relative to context (simultaneous contrast). His book "Interaction of Color" remains one of the most important texts in design education.

Color Psychology — The study of how colors affect human emotion, behavior, and decision-making. Applied in branding, marketing, UX, and healthcare environments. Key findings and applications are covered in our article on Color Psychology: How Hues Influence Emotion and Buying Decisions.

This glossary covers the core vocabulary of color design — from fundamental perceptual properties through technical formats, accessibility standards, and design system architecture. Return to it when terminology in specifications, accessibility audits, or design system documentation requires clarification. Precision in color language produces precision in color work.