# Glossary of color terms Look up any color term on this site in plain words, from stop and token to chroma and gamut. Terms in alphabetical order, each linked to the page that explains it. If you learn only three, make them [color family](#color-family), [stop](#stop) and [semantic token](#semantic-token). ## Adaptive color A color with one value in light mode and another in dark mode. [Semantic tokens](https://colortokenskit.com/getting-started/semantic-tokens/index.md) are adaptive, and so is anything a color function like [`lighten(by:)`](https://colortokenskit.com/api/lighten/index.md) makes from one. ## APCA The Accessible Perceptual Contrast Algorithm, a newer measure of text contrast that WCAG 3 may adopt. Its value, Lc, is positive for dark text on light and negative for light text on dark. [`contrastRatio(to:method:)`](https://colortokenskit.com/api/contrast-ratio/index.md) measures it. ## Appearance Light mode or dark mode, which SwiftUI calls the color scheme. [Managing dark mode](https://colortokenskit.com/getting-started/dark-mode/index.md) covers what changes between them. ## Blend Two things in ColorTokensKit: the [`blend(with:by:)`](https://colortokenskit.com/api/blend/index.md) color function, which mixes two colors, and a gradient's `blend:` option, which picks the path between its colors: [`.vivid`, `.direct` or `.rainbow`](https://colortokenskit.com/under-the-hood/gradient-blends-and-easing/index.md). ## Chroma How vivid a color is, in OKLCH. Gray has none, and sRGB's most vivid color, magenta, reaches 0.32. At each stop, every hue in the palette shares one chroma where Display P3 allows it. See [how the ramps are built](https://colortokenskit.com/under-the-hood/how-ramps-are-built/index.md). ## CIELab and L\* An older perceptual color space. Its lightness, L\*, depends only on luminance, so colors with the same L\* have the same WCAG contrast, and the palette holds it equal across hues at each stop. [Why OKLCH?](https://colortokenskit.com/under-the-hood/why-oklch/index.md) explains why it uses both spaces. ## Color family One hue's ramp of 20 stops, as a `ProTheme`, such as `Color.proOrange`. There are 37 built in, gray and 36 hues, and `ProTheme(hex:)` makes one from any color, such as your brand's hex. [What does the library offer?](https://colortokenskit.com/basics/color-library/index.md) shows them all. ## Contrast ratio WCAG 2's measure of how far apart two colors are in luminance, up to 21:1 for black on white. Body text needs 4.5:1 for level AA. [`contrastRatio(to:method:)`](https://colortokenskit.com/api/contrast-ratio/index.md) measures it. ## Delta E OK The distance between two colors in OKLab, written ΔEOK. About 0.02 is just noticeable, the threshold CSS Color 4 uses. Gamut mapping and gradients use it to keep their changes invisible. See [fitting colors into Display P3](https://colortokenskit.com/under-the-hood/gamut-mapping/index.md). ## Display P3 A wider gamut than sRGB, shown by every iPhone since the iPhone 7. The palette is built in it, and 301 of the 720 stops of its 36 hues are beyond sRGB. A screen that shows only sRGB, such as many external monitors, clips those colors, so they look less vivid there. See [how the ramps are built](https://colortokenskit.com/under-the-hood/how-ramps-are-built/index.md). ## Easing Where along a gradient its colors change: evenly (`.linear`), gently at both ends (`.smooth`, the default) or on a curve of your own. See [how gradients blend and ease](https://colortokenskit.com/under-the-hood/gradient-blends-and-easing/index.md). ## Extended sRGB sRGB with its channels allowed below 0 and above 1, so it can hold colors beyond sRGB, such as Display P3 ones. Apple's frameworks carry wide colors this way, and so does ColorTokensKit's `RGBColor`: a palette stop beyond sRGB has a channel past 0 or 1. See [`.toRGB()`](https://colortokenskit.com/api/to-rgb/index.md#reading-a-stop-beyond-srgb). ## Gamut The range of colors a color space or screen can show. A color outside the gamut it's shown in has to be brought inside, which is [gamut mapping](#gamut-mapping). ## Gamut mapping Bringing a color that's too vivid for Display P3 into range. ColorTokensKit lowers chroma and keeps lightness, which contrast depends on. See [fitting colors into Display P3](https://colortokenskit.com/under-the-hood/gamut-mapping/index.md). ## Harmony A set of colors whose hues sit at fixed angles on the hue wheel, such as a complement (180° apart) or a triad (120° apart). In ColorTokensKit, every color in a harmony keeps the original's lightness. See [color theory](https://colortokenskit.com/advanced/color-theory/index.md). ## Hue A color's position on the color wheel, as an angle. The wiki means OKLCH hue unless it says otherwise: red is at 20°, blue at 250°. HSL and design tools number hues differently, which is why [a hue number can give the wrong color](https://colortokenskit.com/reference/troubleshooting/index.md#a-hue-number-gives-the-wrong-color). ## Lightness ladder The L\* of each stop, from 96.5 at `_50` to 10.2 at `_1000`, shared by every hue; gray has its own. Color functions move colors along it. See [how the ramps are built](https://colortokenskit.com/under-the-hood/how-ramps-are-built/index.md). ## Luminance How much light a color gives off, from 0 (black) to 1 (white), weighted for how bright each primary looks. WCAG contrast is computed from it. ## OKLab and OKLCH Perceptual color spaces Björn Ottosson published in 2020. OKLab describes a color by lightness and two color axes; OKLCH is the same space as lightness, chroma and hue. Equal steps in their numbers look equal, hue stays steady as chroma changes, and CSS supports both. [Why OKLCH?](https://colortokenskit.com/under-the-hood/why-oklch/index.md) explains why the palette is built on it. ## Palette snapping How color functions keep palette colors on the palette: a color on a stop moves to another exact stop, so lightening `_600` gives `_550`. See [how colors land on exact stops](https://colortokenskit.com/under-the-hood/palette-snapping/index.md). ## ProTheme ColorTokensKit's type for a color family and one color in it. `Color.proOrange` is a `ProTheme`, and so is `Color.proOrange._600`. Its [tokens](#semantic-token) are SwiftUI colors. `ProColor`, its older name, remains as a [deprecated alias](https://colortokenskit.com/reference/troubleshooting/index.md#procolor-is-deprecated-renamed-to-protheme). [ProTheme](https://colortokenskit.com/api/protheme/index.md) lists its members. ## Ramp The 20 stops of one color family, from near-white to near-black. Here's `Color.proOrange`: `proOrange`, lightest to darkest: #fdf3ec, #fce6d8, #fbd8c2, #f9c9ab, #f8ba92, #f7a977, #f6985a, #e88c4f, #da8043, #c9753d, #b86b37, #a86132, #97572c, #874d26, #774320, #67391b, #573015, #492711, #3a1e0c, #2d1607. ## Recipe A way to make a gradient from one color, such as `.fade` or `.tonal`. See [gradient theory](https://colortokenskit.com/advanced/gradient-theory/index.md). ## Semantic token A color named for its job, such as `foregroundSecondary`, with one stop in light mode and another in dark. Tokens live in `ColorTokens.swift`, which you copy into your app. [What are tokens?](https://colortokenskit.com/basics/what-are-tokens/index.md) explains the idea, and [understanding semantic tokens](https://colortokenskit.com/getting-started/semantic-tokens/index.md) lists them. ## sRGB The standard color space of the web and of most screens, and the one hex colors are written in. Gray and most palette stops are inside it; the rest are [Display P3](#display-p3). ## Stop One step of a ramp, named `_50` (lightest) to `_1000` (darkest) in steps of 50. A stop has the same lightness, and so the same contrast, in every hue. [What are tokens?](https://colortokenskit.com/basics/what-are-tokens/index.md) explains stops and tokens together. ## WCAG The Web Content Accessibility Guidelines. Their contrast ratios are the usual test for readable text. [How accessible is it?](https://colortokenskit.com/basics/how-accessible/index.md) says what the palette guarantees against them. ## See also - [.toOKLCH()](https://colortokenskit.com/api/to-oklch/index.md): Read a color's lightness, chroma and hue the way the palette sees them, to compare or adjust it. - [Color theory](https://colortokenskit.com/advanced/color-theory/index.md): Pair stops that always read, and pick secondary hues that match your brand, in both modes. - [What does equal lightness cost?](https://colortokenskit.com/under-the-hood/trade-offs/index.md): What equal contrast costs, from quieter reds to olive yellows, and what you can do about each. --- From ColorTokensKit, by Penguin Design Ventures: https://colortokenskit.com/reference/glossary/ (updated September 26, 2026).