Step 4 of 6

Match color

Match each brand color to a family.

Follow a business

This business’s colors

Each color lands in the family that matches its hue. Very pale, gray, or dark colors are set aside as neutral.

#0a80d6→blue#ffb0d4→pink#ff6e17→orange#fcc626→yellow

redorangeyellowolivegreentealbluevioletpink

Show logic

Brand colors are classified onto nine families by OKLCH hue band; the family decides whether a color counts as a brand color and sets its cards’ texture and fallbacks, while the cards keep the brand’s own hue (the vivid finish, since October 19). Neutrals are judged first, by chroma relative to what sRGB can show at the color’s lightness and hue. Primary is the first usable color; secondary is the next usable color in a different family; accents are the other usable families.

normalizeBrandPalette(colors, overrides, enabled): NormalizedBrand

Primaryblue

Secondarypink

Accentspink, orange, yellow

Near whitelightness ≥ 0.9, and chroma < 0.1 or < 50% of the gamut

Near blacklightness < 0.3 and < 40% of the gamut

Graychroma < 0.03 or < 20% of the gamut

redhue 8° to 32°

orangehue 32° to 66°

yellowhue 66° to 108°

olivehue 108° to 130°

greenhue 130° to 168°

tealhue 168° to 220°

bluehue 220° to 276°

violethue 276° to 335°

pinkhue 335° to 8°

Relationship functions

Function	From → to	Home
colorReading	hex → OKLCH lightness, chroma, hue, gamut share	normalize.ts
familyForHue	hue → family	normalize.ts
classifyBrandColor	color → family or neutral	normalize.ts

Try a color

Pick any color to see which family it joins.

→ blue

redorangeyellowolivegreentealbluevioletpink

Lightness 0.61, chroma 0.150, hue 251°, 85% of the most vivid color possible