Reference

Color glossary

Every color term you'll meet on this site, defined in plain language and demonstrated in actual color. 60 entries; every band is computed to show its own term, and every swatch copies its hex.

• A
  Copy #EEECE4 Copy #EEECE4 Copy #EEECE4 Copy #D05A9E

  Accent color

  A small, high-impact color used to draw attention: a button, a link, one throw pillow. Accents are usually the most saturated color in a palette.

• Copy #FF3B30 Copy #34C759 Copy #3B82F6

  Additive color

  Color made by adding light, as screens do with red, green, and blue. Add all three fully and you get white.

• Copy #D97706 Copy #E19B45 Copy #EABF85 Copy #F3E0C4 Copy #FBF4E9

  Alpha channel

  The transparency value attached to a color. An alpha of 1 is fully opaque; 0 is invisible. Hex can carry it as a fourth pair of digits.

• Copy #73A434 Copy #00AD72 Copy #00A8A2

  Analogous colors

  Colors that sit next to each other on the wheel, within about 30 degrees. They share an undertone and read as calm and cohesive.

• Copy #E46894 Copy #DD7C00 Copy #8CA507 Copy #00B19B Copy #00A2EE Copy #A87EEB

  Analogous vs complementary

  The two most common harmony choices: analogous colors sit together for calm, complementary colors sit opposite for punch. Most palettes lean on one or the other.

• C
  Copy #9B9797 Copy #B38E8A Copy #C8847E Copy #DB7771 Copy #EF6661

  Chroma

  A more perceptually accurate cousin of saturation, used in Lab and OKLCH. Chroma measures colorfulness independent of lightness, which is why it gives more even results when building palettes.

• Copy #00B7C3 Copy #E0218A Copy #F5D90A Copy #16150F

  CMYK

  The subtractive model for print: cyan, magenta, yellow, and key (black) inks. Screens add light; ink subtracts it, which is why vivid screen colors often dull in print.

  See RGB to CMYK →
• Copy #C0392B Copy #8A7A2B Copy #5D6D3B Copy #2B6D8A

  Color blindness

  Reduced ability to distinguish certain colors, most often red and green. Designing with enough lightness contrast keeps interfaces usable for everyone.

• Copy #F5F1E6 Copy #F2F2EE Copy #EEF1F4 Copy #F4EDE9 Copy #EFF2EC

  Color cast

  An unwanted tint over an entire image, usually from the light source. A photo under a warm bulb has an orange cast that shifts every color.

• Copy #A45E00 Copy #BC9B11 Copy #637D00 Copy #4CB774 Copy #008477

  Color harmony

  A pleasing relationship between colors based on their positions on the wheel, such as complementary or analogous schemes.

• Copy #7D9B82 Copy #63A471 Copy #3EAB5E Copy #00AF51 Copy #00AF51

  Color model

  A way of representing color with numbers, like RGB, HSL, or CMYK. A model plus a precise definition of its primaries becomes a color space.

• Copy #7D9B82 Copy #63A471 Copy #3EAB5E Copy #00AF51 Copy #00AF51

  Color space

  A defined system for describing colors numerically, like sRGB, Display P3, or Lab. The same numbers mean different colors in different spaces.

• Copy #E36654 Copy #E18528 Copy #CBA63A Copy #0093C2 Copy #5D91E7

  Color temperature

  Whether a color feels warm (reds, oranges, yellows) or cool (blues, greens, violets). Temperature drives a lot of pairing decisions, since opposite temperatures add contrast.

• Copy #E46894 Copy #DD7C00 Copy #8CA507 Copy #00B19B Copy #00A2EE Copy #A87EEB

  Color wheel

  A circular arrangement of hues used to find relationships like complements and triads. Our wheel is spaced in OKLCH so the distances match how the colors actually look.

  See the interactive wheel →
• Copy #D55753 Copy #0098A4

  Complementary colors

  Two colors opposite each other on the wheel. They create the strongest contrast and make each other look more intense, so they work best used unevenly.

• Copy #16150F Copy #FAFAF7 Copy #6E6A5E Copy #FAFAF7

  Contrast ratio

  A number from 1:1 to 21:1 comparing the luminance of two colors. WCAG requires 4.5:1 for normal text (AA) to keep it readable for most people.

  See the contrast checker →
• Copy #E36654 Copy #E18528 Copy #CBA63A Copy #0093C2 Copy #5D91E7

  Cool colors

  Blues, greens, and violets. They feel calm and tend to recede.

• D
  Copy #3A7CA5 Copy #3B7DA6 Copy #3A7CA5 Copy #7C3AA5

  Delta E (ΔE)

  A measure of how different two colors look. Below 1 the difference is invisible to almost everyone; below 2.3 most people can't tell them apart; above 10 they are clearly different colors. We use CIEDE2000, the modern standard.

  See measured comparisons →
• Copy #7D9B82 Copy #63A471 Copy #3EAB5E Copy #00AF51 Copy #00AF51

  Display P3

  A wider color space than sRGB, used by modern phones and laptops. It can show more saturated reds and greens that sRGB clips.

• Copy #2F5D50 Copy #2F5D50 Copy #2F5D50 Copy #E2B13C

  Dominant color

  The color that covers the most area in an image or design. Palette extractors surface it first, and it usually sets the overall mood.

• G
  Copy #7D9B82 Copy #63A471 Copy #3EAB5E Copy #00AF51 Copy #00AF51

  Gamut

  The full range of colors a device or space can show. sRGB is the common screen gamut; Display P3 is wider. A color outside a gamut cannot be shown accurately there and must be mapped inward.

  See how we map gamut →
• Copy #3DBFAE Copy #00B5C5 Copy #00A5DB Copy #3490E9 Copy #6776EA Copy #8A5ADB

  Gradient

  A smooth blend from one color to another across a shape. Gradients look best when the colors share lightness or are blended in a perceptual space.

• Copy #C0392B Copy #B45628 Copy #A46C3B Copy #957B58 Copy #8A8578

  Grayscale

  Colors with no hue or saturation, running from black to white through grays. Converting to grayscale reveals a palette's value structure.

• H
  Copy #FF6B35 Copy #FF8C42 Copy #FFA94F Copy #FFC15C Copy #FFD869

  Hex code

  A six-digit base-16 way of writing an RGB color, like #FF6B35. Two digits each for red, green, and blue. It is the most common notation in web and design tools.

  See hex to RGB →
• Copy #E3769B Copy #D38E22 Copy #63B564 Copy #00B1CF Copy #9B8FF0

  HSL

  A color model with hue, saturation, and lightness axes. HSL is easy to edit by hand: keep the hue, change the lightness for a darker version.

  See hex to HSL →
• Copy #E3769B Copy #D38E22 Copy #63B564 Copy #00B1CF Copy #9B8FF0

  HSV

  Hue, saturation, and value. Very similar to HSL but with a value axis instead of lightness. Most color pickers in design software use HSV internally.

• Copy #E46894 Copy #DD7C00 Copy #8CA507 Copy #00B19B Copy #00A2EE Copy #A87EEB

  Hue

  The attribute we usually mean by the word color: where it sits on the wheel, from red through yellow, green, blue, and back. Hue is what changes when you rotate a color wheel and stays the same when you only lighten or dull a color.

  See the color wheel →
• Copy #CB5E73 Copy #CD5F62 Copy #CD6151 Copy #CB6440 Copy #C7692C

  Hue family

  One of the broad color groups we sort colors into: red, orange, yellow, green, cyan, blue, purple, pink, brown, gray, black, and white.

• L
  Copy #00481D Copy #067132 Copy #3E9858 Copy #69C27E Copy #93ECA6

  Lab

  A color space built to match human vision, with a lightness axis and two color axes (green-red and blue-yellow). Lab is where perceptual difference formulas like ΔE do their work.

• Copy #001B36 Copy #004479 Copy #3772AC Copy #67A3E0 Copy #AED5FF

  Lightness

  The light-to-dark axis. In HSL it runs from black at 0% through the pure hue at 50% to white at 100%. In OKLCH, lightness is perceptually uniform, so equal steps look equal.

  See the converter →
• M
  Copy #8A8A6D Copy #8A8A6D Copy #87856D Copy #8A8A6D

  Metamerism

  When two materials match under one light source but differ under another. It is why a paint chip can match your sofa in the store and clash at home under different bulbs.

• Copy #38185F Copy #60438D Copy #8C6EBD Copy #BA9CEF Copy #DECEFF

  Monochromatic

  A palette built from a single hue, varied only in lightness and chroma. Monochrome schemes are impossible to get wrong and always read as intentional.

• Copy #9B9797 Copy #B38E8A Copy #C8847E Copy #DB7771 Copy #EF6661

  Muted color

  A color with the saturation dialed down, giving a grown-up, understated look. Muted palettes age well.

• N
  Copy #FF6B35 Copy #FF8C42 Copy #FFA94F Copy #FFC15C Copy #FFD869

  Named colors

  Human names for specific colors, from CSS keywords like rebeccapurple to community datasets of tens of thousands. We match against 31,912 of them.

  See the encyclopedia →
• Copy #F5F1E6 Copy #F2F2EE Copy #EEF1F4 Copy #F4EDE9 Copy #EFF2EC

  Neutral

  A low-saturation color like gray, beige, or off-white that supports brighter colors without competing. Every strong palette needs one.

• O
  Copy #00481D Copy #067132 Copy #3E9858 Copy #69C27E Copy #93ECA6

  OKLCH

  A modern, perceptually uniform color space with three axes: lightness, chroma, and hue. Equal steps in OKLCH look equal to the eye, which makes it the best space for generating shade scales and harmonies.

  See the generator →
• Copy #D97706 Copy #E19B45 Copy #EABF85 Copy #F3E0C4 Copy #FBF4E9

  Opacity

  How solid a color is, from fully transparent to fully opaque. In code it appears as the alpha channel, like the last value in rgba().

• P
  Copy #E05252 Copy #E08B3D Copy #6FBF5A Copy #3DBFAE Copy #8A5ADB

  Palette

  A chosen set of colors that work together. A good palette usually has a dominant color, a secondary, one or two accents, and a neutral.

  See the generator →
• Copy #E05252 Copy #E08B3D Copy #6FBF5A Copy #3DBFAE Copy #8A5ADB

  Pantone

  A proprietary color matching system widely used in print and branding. Its values are licensed, so we discuss Pantone but never print its codes as lookups.

• Copy #FACAC5 Copy #E3D8AF Copy #B7E4CF Copy #B5DEF7 Copy #E0CFF5

  Pastel

  A pale, soft color: high lightness and low chroma. Pastels feel gentle and are easy to combine.

• Copy #FF3B30 Copy #34C759 Copy #3B82F6

  Primary colors

  The base colors a system mixes from. Light uses red, green, and blue; print uses cyan, magenta, and yellow; traditional paint theory uses red, yellow, and blue.

• R
  Copy #E05252 Copy #E08B3D Copy #6FBF5A Copy #3DBFAE Copy #8A5ADB

  RAL

  A European color standard common in paint and coatings. RAL values are widely published, and we show the nearest RAL as an approximate reference.

• Copy #001B36 Copy #004479 Copy #3772AC Copy #67A3E0 Copy #AED5FF

  Relative luminance

  How bright a color appears to the eye, weighting green most and blue least. Contrast ratios are built from the luminance of the two colors involved.

• Copy #FF3B30 Copy #34C759 Copy #3B82F6

  RGB

  The additive model screens use: red, green, and blue light combined to make every on-screen color. Full red, green, and blue together make white.

  See RGB to hex →
• S
  Copy #9B9797 Copy #B38E8A Copy #C8847E Copy #DB7771 Copy #EF6661

  Saturation

  How pure or intense a color is. High saturation looks vivid; low saturation drifts toward gray. Saturation is one axis of HSL and HSV.

• Copy #C0392B Copy #8F3800 Copy #603200 Copy #362605 Copy #16150F

  Shade

  A color mixed with black, which lowers its lightness. Maroon is a shade of red. Shades feel deeper and more grounded.

• Copy #D55753 Copy #009D82 Copy #0091C9

  Split-complementary

  A base color plus the two colors on either side of its complement. It keeps most of a complement's contrast with less tension.

• Copy #7D9B82 Copy #63A471 Copy #3EAB5E Copy #00AF51 Copy #00AF51

  sRGB

  The default color space of the web and most screens. If a color is described without a space, it is almost always sRGB.

• Copy #00B7C3 Copy #E0218A Copy #F5D90A Copy #16150F

  Subtractive color

  Color made by removing light, as pigments and inks do. Mix many paints and you approach black, because each absorbs more of the spectrum.

• Copy #E05252 Copy #E08B3D Copy #6FBF5A Copy #3DBFAE Copy #8A5ADB

  Swatch

  A single sample of a color, physical or on screen. Swatch sheets let you compare and copy colors quickly.

• T
  Copy #D8625C Copy #8A9500 Copy #009FAC Copy #9477DD

  Tetradic

  A four-color scheme made of two complementary pairs. Rich and varied, it needs one color to lead and the rest to support.

• Copy #C0392B Copy #D57061 Copy #E7A094 Copy #F5CFC9 Copy #FFFFFF

  Tint

  A color mixed with white, which raises its lightness. Pink is a tint of red. Tints feel softer and more open than the base color.

• Copy #C0392B Copy #B45628 Copy #A46C3B Copy #957B58 Copy #8A8578

  Tone

  A color mixed with gray, which reduces its saturation without changing lightness much. Tones read as muted and sophisticated.

• Copy #D8625C Copy #47A34E Copy #5F87E7

  Triadic colors

  Three colors spaced evenly around the wheel, 120 degrees apart. Triads balance contrast and harmony better than most schemes.

• U
  Copy #F5F1E6 Copy #F2F2EE Copy #EEF1F4 Copy #F4EDE9 Copy #EFF2EC

  Undertone

  The subtle secondary bias in a color that seems neutral. A gray can have a blue or green undertone; a white can lean warm or cool. Undertones decide whether two near-neutrals clash or agree.

• V
  Copy #001B36 Copy #004479 Copy #3772AC Copy #67A3E0 Copy #AED5FF

  Value

  How light or dark a color is, also called brightness or lightness depending on the model. Two colors can share a hue but differ entirely in value, like navy and sky blue.

• Copy #9B9797 Copy #B38E8A Copy #C8847E Copy #DB7771 Copy #EF6661

  Vibrant color

  A color at high saturation and chroma, reading as bold and energetic. Vibrant colors work best in small, deliberate doses.

• W
  Copy #E36654 Copy #E18528 Copy #CBA63A Copy #0093C2 Copy #5D91E7

  Warm colors

  Reds, oranges, and yellows. They feel energetic and tend to advance toward the viewer.

• Copy #16150F Copy #FAFAF7 Copy #6E6A5E Copy #FAFAF7

  WCAG

  The Web Content Accessibility Guidelines, the standard for accessible design. Its AA and AAA contrast levels are the ones most designers and laws reference.

• Copy #F5F1E6 Copy #F2F2EE Copy #EEF1F4 Copy #F4EDE9 Copy #EFF2EC

  White balance

  Correcting a color cast so whites look neutral. Cameras do it automatically; getting it right is key to accurate color from photos.