Learn Color Theory
Master color with interactive guides.
Glossary
A curated reference for the color theory terms that matter most in palette design and UI systems. Each entry connects concepts to practical decisions — not just definitions, but why each term matters when you're building real products.
Start here
Hue
The attribute of a color that places it on the spectrum — red, orange, yellow, green, blue, violet, and everything between.
Saturation
How vivid or muted a color appears — high saturation is intense and pure, low saturation approaches gray.
Lightness
How light or dark a color is, independent of its hue or saturation — ranging from black to white.
Complementary
Two colors positioned directly opposite each other on the color wheel — creating maximum hue contrast.
Contrast Ratio
The mathematical ratio between two colors' relative luminance — the standard used by WCAG to determine text readability.
Additive & Subtractive Color
Two fundamentally different color systems — additive mixes light (RGB, screens) while subtractive mixes pigment (CMYK, print).
Chroma
The absolute colorfulness of a color — how far it is from a neutral gray of the same lightness.
Color Wheel
A circular diagram organizing hues by their angular relationship — the visual foundation for harmony rules and palette construction.
Hue
The attribute of a color that places it on the spectrum — red, orange, yellow, green, blue, violet, and everything between.
Lightness
How light or dark a color is, independent of its hue or saturation — ranging from black to white.
Luminance
A measure of the perceived brightness of a color, weighted by how the human eye responds to different wavelengths.
Opacity
How transparent or opaque a color is — controlled by the alpha channel, ranging from fully transparent (0%) to fully opaque (100%).
Saturation
How vivid or muted a color appears — high saturation is intense and pure, low saturation approaches gray.
Value
The lightness or darkness of a color in the HSB/HSV model — where 100% value means the most vivid form of the hue, not white.
Muted Color
A color with reduced saturation or chroma — softer and less vivid than its pure form, achieved by mixing with gray, its complement, or both.
Shade
A color mixed with black — darker than the original while preserving the underlying hue.
Tint
A color mixed with white — lighter than the original while preserving the underlying hue.
Tone
A color mixed with gray — less saturated than the original, creating a muted, sophisticated version.
Afterimage
A phantom image in the complementary color that appears after prolonged exposure to a strong color stimulus, caused by cone cell fatigue.
Chromatic Gray
A gray that carries a subtle but discernible hue — warmer, cooler, or tinted compared to a pure achromatic gray.
Chromostereopsis
A depth illusion where red and blue elements appear to sit at different distances from the viewer, caused by the eye's chromatic aberration.
Color Vibration
A shimmering or buzzing effect at the boundary between two highly saturated colors of similar lightness, caused by the visual system's inability to form a stable edge.
Cool Colors
Colors in the blue-green-violet range of the color wheel — perceived as calm, professional, and visually receding.
Hermann Grid Illusion
An illusion where phantom gray dots appear at the intersections of white channels in a grid of dark squares, caused by lateral inhibition in retinal ganglion cells.
Mach Bands
An illusion where uniform-color bands appear to have lighter and darker edges at each boundary, caused by lateral inhibition in the retina.
Metamerism
The phenomenon where two colors appear identical under one lighting condition but visibly different under another.
Neutral
A color with very low or zero chroma — grays, off-whites, and near-blacks that serve as the quiet foundation of most interfaces.
Overtone
In paint and pigment, the color visible in a thin layer — as opposed to the mass tone seen in a thick layer. Not directly applicable in digital color.
Simultaneous Contrast
The phenomenon where a color appears to shift in hue, saturation, or lightness depending on the colors surrounding it.
Temperature
The perceived warmth or coolness of a color — warm colors lean toward red/orange/yellow, cool colors lean toward blue/green/violet.
Undertone
The subtle secondary color family beneath a color's surface — revealed by comparison or desaturation, not immediately apparent.
Warm Colors
Colors in the red-orange-yellow range of the color wheel — perceived as energetic, inviting, and visually advancing.
Analogous
Colors that sit next to each other on the color wheel — typically within a 30–60° hue range — creating harmonious, low-contrast palettes.
Complementary
Two colors positioned directly opposite each other on the color wheel — creating maximum hue contrast.
Monochromatic
A palette built from a single hue, varied only in lightness and saturation — the most cohesive harmony type.
Rectangular Tetrad
Four colors forming two complementary pairs with unequal spacing — a rectangle on the color wheel, also known as double complementary.
Split Complementary
A color paired with the two colors flanking its complement — offering strong contrast with less visual tension than a direct complement.
Square Tetrad
Four colors evenly spaced at 90° intervals on the color wheel — maximum hue variety with perfect symmetry.
Triadic
Three colors spaced equally at 120° intervals around the color wheel — vibrant, balanced, and visually rich.
Accessible Color Pair
A foreground and background color combination that meets WCAG minimum contrast requirements for text readability.
Color Space
A mathematical model that defines how colors are organized, represented, and converted — like sRGB, Display P3, OKLCH, or CIELAB.
Contrast Ratio
The mathematical ratio between two colors' relative luminance — the standard used by WCAG to determine text readability.
Gamut
The range of colors a device or color model can reproduce — colors outside the gamut are clipped or approximated.
Perceptual Uniformity
The property of a color space where equal numerical changes produce equal perceived visual changes — making color math match human perception.
Accent Color
The most chromatic, attention-commanding color in a palette — used sparingly for primary actions, links, and focus indicators.
Color Role
A functional assignment that gives a color a specific job in a design system — like primary, secondary, surface, error, or success.
Color Scale
A graduated series of a single hue at evenly spaced lightness and chroma levels — the foundation of design system color tokens (e.g., blue-50 through blue-900).
Design Token
A named variable that stores a design decision — like a color value, spacing unit, or font size — so it can be referenced consistently across a product.
Dominant Color
The color that occupies the most visual area in a design — typically a neutral or tinted surface color that sets the overall mood.
Palette Cohesion
The degree to which all colors in a palette feel like they belong together — driven by shared undertones, consistent chroma, and intentional relationships.
Semantic Color
A color that conveys a specific meaning — like red for errors, green for success, yellow for warnings, and blue for information.
Surface Color
A background color applied to UI containers — cards, modals, sheets, and page regions — that establishes visual layering and depth.
47 terms across 6 categories — curated for palette design and UI systems.