Complete Color Terminology Glossary
Your visual dictionary for color theory, design systems, and accessibility. Every term clearly defined with examples.
Hue
Color Theory
The pure spectrum color without any tint (white) or shade (black) added. Hue is what we typically mean when we say "color" — red, blue, green, yellow, etc. Measured in degrees on the color wheel (0-360).
Example: Red at 0°, Yellow at 60°, Green at 120°, Cyan at 180°, Blue at 240°, Magenta at 300°
Saturation
Color Theory
The intensity or purity of a color. High saturation means vivid, pure color. Low saturation means the color appears washed out or grayish. Measured as a percentage (0-100%).
Example: 100% saturation = Pure red (#FF0000), 50% saturation = Dusty red, 0% saturation = Gray
Lightness / Value
Color Theory
How light or dark a color is, ranging from black to white. In HSL, it's measured from 0% (black) through 50% (pure color) to 100% (white). Value is the equivalent term in HSV color space.
Example: Navy blue has low lightness, sky blue has high lightness
Chroma
Color Theory
The colorfulness or departure from neutral gray at the same lightness. Similar to saturation but independent of lightness. High chroma colors are vibrant; low chroma colors are muted.
Example: Hot pink has high chroma, dusty rose has low chroma
Tint
Color Variation
A hue with white added to it. Tints are lighter versions of the original color, creating pastel variations. Essential for creating color scales and design systems.
Example: Pink is a tint of red, sky blue is a tint of blue
Shade
Color Variation
A hue with black added to it. Shades are darker versions of the original color. Used extensively in UI design for hover states and depth.
Example: Navy is a shade of blue, maroon is a shade of red
Tone
Color Variation
A hue with gray added to it. Tones are more muted, sophisticated versions of pure colors. Commonly used in professional design for a refined aesthetic.
Example: Sage green is a tone of green, dusty blue is a tone of blue
Complementary
Color Harmony
Colors opposite each other on the color wheel. They create maximum contrast and visual tension when used together. When mixed, they neutralize each other to gray.
Example: Red & Cyan, Orange & Blue, Yellow & Purple
Analogous
Color Harmony
Colors that sit next to each other on the color wheel, typically 30-60 degrees apart. They create harmonious, cohesive palettes that feel natural and pleasing to the eye.
Example: Yellow, Yellow-Orange, Orange OR Blue, Blue-Green, Green
Triadic
Color Harmony
Three colors evenly spaced around the color wheel (120 degrees apart). Creates vibrant, balanced schemes with high contrast while maintaining harmony.
Example: Red, Yellow, Blue (primary colors) OR Orange, Green, Purple (secondary colors)
Tetradic
Color Harmony
Four colors arranged into two complementary pairs. Also called a double complementary scheme. Offers rich color variety but requires careful balance to avoid chaos.
Example: Red & Green paired with Blue & Orange
Monochromatic
Color Harmony
A color scheme using variations (tints, shades, and tones) of a single hue. Creates cohesive, sophisticated designs with built-in harmony. Popular in minimalist and modern design.
Example: Navy, royal blue, sky blue, powder blue (all variations of blue)
AAA
WCAG
Accessibility
Web Content Accessibility Guidelines. International standards for making web content accessible to people with disabilities. Includes specific requirements for color contrast ratios.
Example: WCAG AA requires 4.5:1 contrast for normal text, WCAG AAA requires 7:1
21:1
Contrast Ratio
Accessibility
The ratio of luminance between two colors, expressed as a ratio from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability for text.
Example: Black text on white background = 21:1 (perfect), Gray on white = 4.5:1 (AA minimum)
Luminance
Accessibility
The perceived brightness of a color, calculated using a specific formula that weights RGB channels based on human perception. Yellow appears brighter than blue at the same technical brightness.
Example: Yellow has higher luminance than purple, making it more visible on dark backgrounds
#2D5BE3
HEX (Hexadecimal)
Color Format
A six-digit code representing RGB values in base-16. Format: #RRGGBB where each pair represents red, green, and blue channels (00-FF). The most common color format in web design.
Example: #FF0000 = Red, #00FF00 = Green, #0000FF = Blue