Terms in alphabetical order, each linked to the page that explains it. If you learn only three, make them color family, stop and semantic token.
Adaptive color#
A color with one value in light mode and another in dark mode. Semantic tokens are adaptive, and so is anything a color function like lighten(by:) 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:) measures it.
Appearance#
Light mode or dark mode, which SwiftUI calls the color scheme. Managing dark mode covers what changes between them.
Blend#
Two things in ColorTokensKit: the blend(with:by:) color function, which mixes two colors, and a gradient's blend: option, which picks the path between its colors: .vivid, .direct or .rainbow.
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.
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? 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? 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:) 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.
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.
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.
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().
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#
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.
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.
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.
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.
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? 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.
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 are SwiftUI colors. ProColor, its older name, remains as a deprecated alias. ProTheme lists its members.
Ramp#
The 20 stops of one color family, from near-white to near-black. Here's Color.proOrange:
Recipe#
A way to make a gradient from one color, such as .fade or .tonal. See gradient theory.
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? explains the idea, and understanding semantic tokens 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.
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? 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? says what the palette guarantees against them.
See also
- .toOKLCH() Read a color's lightness, chroma and hue the way the palette sees them, to compare or adjust it.
- Color theory Pair stops that always read, and pick secondary hues that match your brand, in both modes.
- What does equal lightness cost? What equal contrast costs, from quieter reds to olive yellows, and what you can do about each.