All 38 terms
Alpha compositing is combining a translucent color with what is behind it, weighted by the alpha channel.
The source-over formula is straightforward, but it has the same trap as every other color arithmetic: done on gamma-encoded values it produces a result darker than it should be. Correct compositing linearises first.
It also means a color with alpha has no fixed contrast ratio — the value depends on the backdrop. Any contrast check on a translucent color has to flatten it against its actual background first.
Tools: Overlay & Scrim Calculator, Glassmorphism Generator
See also: Scrim, Gamma correction, Blend mode
APCA is a perceptual contrast model developed for WCAG 3 that reports a signed lightness contrast accounting for polarity, font size and weight.
Where the WCAG 2 ratio is symmetric, APCA is not — and neither is vision. Light text on a dark background needs measurably more separation than dark text on a light one to feel equally solid, and APCA's signed output captures that. It also expects a font size and weight, because a hairline at 12px and a bold at 24px do not have the same requirements.
It is not a conformance standard yet. Run both: WCAG is what an audit will cite, APCA is what will explain why a technically-passing pair still looks thin.
Tools: APCA Contrast Calculator, WCAG Contrast Checker
See also: Contrast ratio, WCAG
Banding is the visible stepping in a gradient that should look smooth, caused by there being fewer distinct 8-bit values available than the ramp needs.
It is worst exactly where large soft gradients are most used: dark, low-contrast, spread across a whole page background. In that region the 8-bit steps are further apart perceptually than anywhere else, so the boundaries between them become visible edges.
The standard fix is dithering — adding a small amount of noise so the step boundaries are broken up and the eye integrates a smooth ramp. A few percent of fine grain as a generated CSS or SVG texture is enough and costs a fraction of a kilobyte.
Tools: Noise & Grain Generator, CSS Gradient Generator
See also: Dithering, Interpolation
A blend mode is a function that combines a source color with the backdrop color, producing effects that plain alpha compositing cannot.
The separable modes — multiply, screen, overlay, hard light — operate channel by channel. Multiply always darkens, screen always lightens, and the contrast modes pick between them per channel depending on the backdrop.
The non-separable modes are more interesting: hue, saturation, color and luminosity decompose both layers and recombine them selectively. color takes the hue and chroma of the source with the luminosity of the backdrop, which is why it can recolor a photograph while keeping its shading intact.
Tools: CSS Blend Mode Lab, Duotone Generator
See also: Alpha compositing, Interpolation
Chroma is how far a color sits from gray at its own lightness — an absolute measure of colorfulness, not a percentage of some maximum.
In OKLCH, chroma runs from 0 at neutral gray to roughly 0.37 at the most saturated color sRGB can produce, and how much is actually available depends on both the lightness and the hue you asked for. There is far more room for vivid yellow near the light end than for vivid blue.
That is why generated ramps clamp chroma to the gamut boundary at each step. Ask for more than the space holds and something has to give — either the hue shifts, the lightness moves, or the color clips.
Tools: OKLCH Explorer, Saturate a Color
See also: Saturation, Gamut, OKLCH
CIE XYZ is the 1931 device-independent color space that every other color space is defined against, with Y carrying luminance by construction.
It is not designed to be looked at or authored in — its primaries are deliberately non-physical, chosen so all visible colors have positive coordinates. Its job is to be the neutral middle of every conversion: sRGB to XYZ to Lab, or Display P3 to XYZ to sRGB.
Because Y is defined as luminance, XYZ is also where relative luminance comes from, which makes it the ultimate source of every WCAG contrast ratio.
Tools: Universal Color Converter
See also: Relative luminance, CIELAB, Color space
CIELAB is the 1976 CIE perceptual color space, with an L* lightness axis and a* and b* opponent axes, and it is the basis of the ΔE color difference metrics.
It was the first widely-adopted attempt at a space where numeric distance approximates perceived difference, and it remains the reference for color difference work in print, textiles and manufacturing. When a spec talks about ΔE tolerance, it almost always means a formula defined over CIELAB.
Its weaknesses are known: hue is not uniform in the blue region, and L* does not track perceived lightness as closely as later models. OKLab addresses both while keeping the same shape, which is why new work tends to start there.
Tools: RGB to Lab Converter, HEX to Lab Converter
See also: Delta E, OKLab, CIE XYZ
CMYK is the subtractive four-ink model used in printing — cyan, magenta, yellow and a black key plate.
Subtractive means the inks remove light from white paper rather than emitting it, which is why the model runs the opposite direction from RGB and why its gamut is a different shape rather than simply smaller.
The important caveat: a correct RGB to CMYK conversion needs an ICC profile for a specific press, ink set and paper stock. Any formula-based converter, including the one here, is an approximation useful for mockups and for spotting colors that print cannot reach. It is not a proof, and it is not a file to send to a printer.
Tools: HEX to CMYK Converter, RGB to CMYK Converter
See also: Gamut, ICC profile, Color space
A color ramp is an ordered series of steps of one hue, numbered so that the same step means the same weight across every hue in a system.
The numbering is only meaningful if the steps are perceptually even. A ramp built by stepping HSL lightness is not: its dark end bunches up and its steps land differently for yellow than for blue, so 600 stops meaning anything consistent.
Built in OKLCH — lightness marching evenly, chroma following a curve that peaks in the middle, each step clamped to the gamut boundary at its own lightness — the number becomes a reliable contract. Nine to twelve steps covers most systems.
Tools: Tailwind Palette Generator, Shades, Tints & Tones, Design Token Exporter
See also: Design token, OKLCH, Gamut
A color space is a coordinate system for color: a set of axes, a defined range on each, and a rule for turning a point into a physical color.
Choosing one is choosing what will be easy. sRGB makes display output easy and perceptual reasoning hard. Lab and OKLab make perceptual reasoning easy and are useless as a wire format. HSL makes typing easy and lies about lightness. None of them is more correct than the others; they are tools with different grain.
Spaces divide into device-referred — describing what some hardware does, like sRGB and CMYK — and device-independent, describing what a standard observer sees, like CIE XYZ and Lab. Converting between the two families always passes through XYZ, which is why every conversion chain on this site has it in the middle.
Tools: Universal Color Converter, OKLCH Explorer
See also: sRGB, OKLCH, CIELAB
Color temperature describes a white or near-white color by the temperature in kelvin of a black body radiating that color.
Lower numbers are warmer: a candle is around 1900K, an incandescent bulb 2700K, daylight around 6500K. The scale runs counter to intuition — "warm" light has a lower temperature — because it describes the physics of the radiator, not the feeling.
On the web it matters mostly for photography white balance and for the warm and cool cast of near-white and near-black surfaces, where a few hundred kelvin is the difference between an interface that feels clinical and one that feels soft.
Tools: Color Temperature Converter
See also: Hue, sRGB
Color vision deficiency is a shifted or absent response in one of the three cone types, affecting roughly 1 in 12 men and 1 in 200 women.
The common forms are red-green: deuteranomaly and protanomaly, where one cone's sensitivity is shifted, and deuteranopia and protanopia, where it is absent. Tritan deficiencies affecting blue-yellow are far rarer. Complete achromatopsia is rarer still.
What follows for design is narrow and specific: hue must never be the only carrier of meaning. Red and green are fine together provided they also differ in lightness and are paired with an icon or a label. Avoiding them is not the fix; redundancy is.
Tools: Color Blindness Simulator, Deuteranopia Simulator, Protanopia Simulator
See also: LMS color space, Hue, WCAG
A color wheel is a circular arrangement of hues used to describe relationships between colors by the angle between them.
The traditional artist's wheel is based on red-yellow-blue primaries and subtractive mixing; the digital wheel is based on red-green-blue and additive mixing. They disagree about what sits opposite what, which is why "the complement of blue" is orange to a painter and yellow to a screen.
Neither is wrong; they answer different questions. For interface work the perceptual wheel — hue angle in OKLCH — is the useful one, because it is the only version where equal angles correspond to equal perceived change.
Tools: Interactive Color Wheel, Complementary Colors, Opposite Color Finder
See also: Hue, Complementary color
A complementary color is the hue directly opposite another on the color wheel, 180° away.
Which color that is depends entirely on the wheel. On an RGB wheel the complement of blue is yellow; on a traditional pigment wheel it is orange; in OKLCH it is a perceptual opposite that matches neither exactly. All three are defensible answers to different questions.
A complementary pair is two colors at maximum mutual tension. That makes it excellent for a single accent against a neutral field and poor as the basis for a set of six categorical colors, where the tension has nowhere to resolve.
Tools: Complementary Colors, Opposite Color Finder, Split Complementary Colors
See also: Color wheel, Hue
Contrast ratio is the WCAG measure of the difference between two colors, from 1:1 for identical colors to 21:1 for black on white.
It is computed as (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the relative luminances of the lighter and darker color. The 0.05 offset models ambient light reflecting off the screen, which is why the maximum is 21 rather than infinity.
The thresholds are 4.5:1 for body text, 3:1 for large text and for non-text elements that convey boundary or state. They are conformance floors. Text at exactly 4.5:1 is legible in good conditions and tiring across a long article; comfortable extended reading starts closer to 7:1.
Tools: WCAG Contrast Checker, Contrast Grid, Accessible Palette Builder
See also: Relative luminance, APCA, WCAG
Delta E (ΔE) is a measure of how different two colors look, defined so that roughly 1.0 is the smallest difference a person can notice.
The naive version is straight Euclidean distance in CIELAB. The refinements — ΔE94, and the current standard ΔE2000 — add corrections for the fact that Lab is not perfectly uniform, weighting lightness, chroma and hue differences differently depending on where in the space they occur.
It is what makes "nearest named color" a solvable problem rather than a guess, and it is the number behind color tolerance specifications in manufacturing.
Tools: Color Name Finder, Palette Analyzer
See also: CIELAB, Color space
A design token is a named value that stands in for a raw design decision, so components reference a name rather than a hard-coded color.
Color tokens work best in two layers. Primitives name colors — blue-600. Semantics name jobs — surface-raised, text-muted, action-bg. Components see only semantics.
That indirection is what makes retheming an edit to one mapping instead of an edit to every component, and it is what makes dark mode tractable, since the semantic layer is exactly the set of relationships that has to hold in both themes.
Tools: Design Token Exporter, CSS Variables Generator, Tailwind Palette Generator
See also: Color ramp, Semantic color
Display P3 is a wide-gamut color space, standard on Apple hardware and increasingly elsewhere, covering about 25% more color area than sRGB.
It uses the DCI-P3 primaries with the sRGB transfer function and a D65 white point. In practice it buys you noticeably more saturated reds, oranges and greens, and very little extra blue.
Using it safely means providing an sRGB fallback, because a P3 color rendered on an sRGB display without conversion is simply the wrong color. CSS handles this cleanly with @supports (color: color(display-p3 0 0 0)).
Tools: OKLCH Explorer
See also: Gamut, sRGB
Dithering is deliberately adding noise to an image or gradient so that quantisation steps are broken up and read as a smooth transition.
It trades a precise error for an imprecise one, on the grounds that the visual system is much more offended by a hard edge than by fine random variation. This is why film grain hides banding that a clean digital ramp cannot.
On the web it is usually a semi-transparent noise layer over the gradient, generated as an SVG turbulence filter or a small tiled PNG.
Tools: Noise & Grain Generator
See also: Banding, Interpolation
Gamma correction is the non-linear encoding applied to color values so that the limited bits available are distributed the way human vision needs them.
Human brightness perception is roughly a power law, far more sensitive to differences among dark tones than light ones. Storing light linearly in 8 bits would waste most of the range on highlights nobody can distinguish and band visibly in the shadows. The sRGB transfer function — close to a 2.2 power curve — fixes that distribution.
The cost is that the stored numbers are no longer proportional to light, so arithmetic on them is wrong. Every correct blend, gradient, contrast calculation and image resize begins by undoing the curve.
Tools: Color Mixer, CSS Gradient Generator
See also: sRGB, Relative luminance, Interpolation
A gamut is the set of colors a given device or color space can actually produce.
sRGB's gamut is a specific volume: for any lightness and hue there is a maximum chroma, and it varies enormously between hues. Asking for a color outside it means something must change — clip a channel, reduce chroma, or shift hue — and different software makes that choice differently.
Wider gamuts are now routine on consumer hardware. Display P3 covers roughly 25% more area than sRGB, mostly in the reds and greens, and CSS can address it directly with color(display-p3 …).
Tools: OKLCH Explorer, Tailwind Palette Generator
See also: Display P3, Chroma, sRGB
Halation is the glow that appears to spread from light text on a very dark background, making the text look blurred.
It is an artifact of the eye rather than the screen — light scattering within the optics of the eye itself, which is why it cannot be fixed by rendering the text more sharply. It is markedly worse for readers with astigmatism, and worse again at high contrast.
The practical mitigation is to not use pure black. Starting the darkest surface around 12–18% lightness, and pulling body text slightly below pure white, reduces it substantially at almost no cost to legibility.
Tools: Dark Mode Generator, Readable Text Finder
See also: Contrast ratio, Surface
HSL is sRGB rewritten in polar form as hue, saturation and lightness — convenient to type and perceptually inaccurate.
Its L is the midpoint between the largest and smallest RGB channel. That is a cheap computation with almost no relationship to perceived brightness: hsl(60 100% 50%) is a blazing yellow and hsl(240 100% 50%) is a dark blue, despite both claiming 50% lightness.
It is still worth understanding, because a great deal of existing CSS and a great many design tokens are written in it. Use it to read what exists; use OKLCH to generate anything new.
Tools: HEX to HSL Converter, HSL to OKLCH Converter
See also: OKLCH, Lightness, Saturation
Hue is the attribute of a color that makes it red, yellow, green or blue — the angle around a color wheel, independent of how light or how vivid it is.
Every polar color model has a hue axis, but they do not agree with each other. Hue 120° is a different green in HSL, LCH and OKLCH, because each measures the angle in a different underlying space. Comparing hue numbers across models is meaningless without saying which model.
Hue is also the least reliable channel for carrying meaning in an interface, because it is the one that collapses under color vision deficiency. Lightness survives; hue does not.
Tools: Interactive Color Wheel, Analogous Colors
See also: Chroma, Color wheel, Color vision deficiency
An ICC profile is a file describing the color behaviour of a specific device, used to convert colors between devices accurately.
It is what turns "this CMYK value" from a guess into a measurement. A press profile encodes how that press, with that ink, on that paper, actually renders each value — which is information no formula can supply.
On the web, profiles matter mainly for images: an untagged image is assumed to be sRGB, and a wide-gamut photo without its profile will render desaturated and slightly wrong.
Tools: HEX to CMYK Converter, Palette from Image
See also: CMYK, Gamut, Color space
Interpolation is computing the colors between two endpoints, and the space you do it in determines whether the result looks right.
Interpolating in gamma-encoded sRGB — the CSS default until recently — averages numbers that were never meant to be averaged, so the midpoint comes out darker and less saturated than the eye expects. This is the muddy middle in a two-stop gradient.
Interpolating in OKLab fixes it. For paths that travel a long way around the hue circle, OKLCH plus an explicit hue interpolation method keeps chroma up across the sweep instead of dipping through gray halfway.
Tools: CSS Gradient Generator, Color Mixer, Mesh Gradient Generator
See also: Gamma correction, OKLab, Banding
Lightness is how bright a color appears to a human observer, as distinct from how much light it physically emits.
The distinction is the whole game. Luminance is physical and linear; lightness is perceptual and roughly a cube root of it, because the visual system compresses its response. A surface emitting half the light does not look half as bright — it looks about three quarters as bright.
L* in CIELAB and L in OKLab are both attempts at this perceptual scale. HSL's L is not one, despite the name.
Tools: Lighten a Color, Darken a Color
See also: Relative luminance, OKLCH, HSL
LMS is a color space whose three axes are the responses of the long, medium and short wavelength cones in the human eye.
It is the closest thing to a physiological color space, which makes it the right place to do two very different jobs: simulating color vision deficiency, by attenuating or removing one cone channel, and building perceptual spaces, since OKLab starts by converting to LMS.
Simulations that instead rotate hue with a filter look wrong without being wrong in the way the condition actually is. The transforms here go through LMS.
Tools: Color Blindness Simulator, Achromatopsia Simulator
See also: Color vision deficiency, OKLab
OKLab is a perceptual color space with one lightness axis and two opponent axes, fitted in 2020 to improve on CIELAB’s hue uniformity.
It is built the way the visual system appears to be: convert to LMS cone responses, take a cube root to model the non-linear response, then apply a matrix that separates lightness from two opponent signals. OKLCH is the same space read in polar coordinates.
Its practical advantage over CIELAB is that interpolating between two colors stays on a sensible path. CIELAB has a known hue shift in the blue region — mix blue and white in it and the result drifts purple — which OKLab largely removes. That is why in oklab is the right default for a CSS gradient.
Tools: HEX to OKLab Converter, Color Mixer, CSS Gradient Generator
See also: OKLCH, CIELAB, Interpolation
OKLCH is the cylindrical form of OKLab: perceptual lightness, chroma as an absolute distance from gray, and hue as an angle in degrees.
Its defining property is uniformity. Equal numeric steps look like equal steps, and changing hue at fixed lightness and chroma does not change how bright the color appears. Neither is true in HSL, which is why an HSL ramp bunches at the dark end and why HSL yellow and HSL blue at the same lightness look nothing alike.
Chroma being absolute rather than a percentage is the part that surprises people, and it is the honest part: how much chroma is available depends on both lightness and hue, because sRGB simply holds more saturated yellow than saturated blue. A space that reported saturation as a percentage of an unstated maximum would be hiding that.
It is shipping CSS, not a proposal — oklch() works in every current browser.
Tools: OKLCH Explorer, HEX to OKLCH Converter, Tailwind Palette Generator
See also: OKLab, Chroma, Lightness, Color space
Relative luminance is the physical brightness of a color on a 0-to-1 scale, computed as a weighted sum of the linearised red, green and blue channels.
The weights — 0.2126 red, 0.7152 green, 0.0722 blue — come from the sensitivity of human vision, which is overwhelmingly driven by the green part of the spectrum. That lopsidedness explains a lot: why yellow text on white is hopeless, why blue text on white is fine, and why a "brightness" that averages the three channels equally gives answers your eye disagrees with.
The channels must be linearised first, undoing the sRGB transfer function. Skipping that step is the single most common bug in hand-rolled contrast code.
Tools: WCAG Contrast Checker, Readable Text Finder
See also: Contrast ratio, Gamma correction, Lightness
Saturation is colorfulness measured relative to lightness — how vivid a color is compared to the brightest version of itself.
It differs from chroma in what it is relative to. Chroma is an absolute distance from the neutral axis; saturation divides that by lightness. Two colors can share a chroma and differ wildly in saturation if one is much darker.
The HSL S channel is a saturation of sorts, but computed in gamma-encoded sRGB, so it shares HSL's general unreliability. When precision matters, reason in chroma.
Tools: Saturate a Color, Desaturate a Color
See also: Chroma, HSL
A scrim is a translucent layer placed between an image and text to guarantee the text stays readable regardless of what is underneath.
Text over a photograph has no fixed contrast ratio, because the photograph changes. A scrim converts an unbounded problem into a bounded one: given the brightest pixel the text will cross, how opaque must the layer be for the pair to clear 4.5:1?
A gradient scrim is usually better than a flat one — heavier where the text sits, clearing toward the rest of the image — because it buys the contrast without flattening the picture.
Tools: Overlay & Scrim Calculator, Readable Text Finder
See also: Contrast ratio, Alpha compositing, Surface
A semantic color is a token named for its role rather than its appearance — text-muted rather than gray-500.
Naming by role is what lets the underlying value change without touching anything downstream. A component asking for border-subtle keeps working when the theme flips, the brand shifts, or someone raises the contrast of the whole system.
The test of a good semantic layer is whether you can build a dark theme by remapping it alone. If you cannot, some component is reaching past it to a primitive.
Tools: Design Token Exporter, Surface System Generator, Dark Mode Generator
See also: Design token, Surface
sRGB is the default color space of the web: a specific set of red, green and blue primaries plus a transfer function that says how the stored numbers map to emitted light.
Almost every color you write in CSS without saying otherwise is an sRGB color, and almost every display can show all of it. Its numbers are device-referred — they describe what a monitor should emit rather than a physical quantity — and they are gamma-encoded, which is the source of most surprises.
Encoding matters because it makes arithmetic misleading. The value halfway between two sRGB numbers is not the color halfway between them in appearance; it is darker. Anything that averages colors — gradients, blends, resizing an image — has to undo the transfer function first or it produces the muddy result people blame on their eyes.
Tools: Universal Color Converter, HEX to RGB Converter
See also: Gamma correction, Gamut, Color space
A surface is a background plane in an interface — the page, a card, a modal, a menu — and the set of them forms the elevation system.
In a light theme, surfaces conventionally get lighter and cast shadows as they rise. In a dark theme, shadows have nothing left to darken, so elevation is expressed by raising lightness instead. The relationship is preserved; the mechanism is not.
Building each level by computing it from the base color, rather than by stacking translucent white, avoids the hue drift and desaturation that layered alpha accumulates.
Tools: Surface System Generator, Background Color Picker, Dark Mode Generator
See also: Semantic color, Scrim
A tint is a color mixed toward white, a shade is mixed toward black, and a tone is mixed toward gray.
The three do measurably different things. Tints and shades both reduce chroma as they approach their endpoints, because white and black have none to contribute. Tones reduce chroma at roughly constant lightness, which is the reason a toned palette reads as muted rather than as pale or dark.
Mixing in OKLab rather than sRGB keeps all three from sagging through a muddy midpoint, which matters most in the middle of a long ramp.
Tools: Shades, Tints & Tones, Color Mixer
See also: Interpolation, Chroma
WCAG is the W3C’s Web Content Accessibility Guidelines, the standard most accessibility law and procurement policy references.
Version 2.2 is current. Its color requirements are concentrated in a few success criteria: 1.4.3 and 1.4.6 for text contrast, 1.4.11 for non-text contrast, and 1.4.1 for not using color as the only means of conveying information.
Conformance is claimed at level A, AA or AAA. AA is the practical target for most work and the level most regulations cite.
Tools: WCAG Contrast Checker, Accessible Palette Builder
See also: Contrast ratio, APCA, Color vision deficiency