Brand Color Directory
Search a curated set of brand colors by name or category. Each entry shows HEX, RGB, and HSL plus its WCAG contrast against white and black. Export the filtered set as CSS variables or a Tailwind config. Runs entirely in your browser.
Export filtered colors
Exports the colors currently shown above. Choose a format, then copy.
What We Learn
Brand color is not a text color
Many of the most recognizable brand colors fail WCAG AA when used for text on white. Yellow and bright cyan brands are the clearest cases. An agent that copies a brand hex into a button or link without checking its contrast ships a control the user may not be able to read. The contrast column above is the check that should run before the color is used.
Tokens beat hard-coded hex
Exporting a palette as CSS custom properties or a Tailwind config turns one-off values into named tokens. That makes the color auditable and changeable in one place. Agents should reference tokens, not repeat raw hex values across components.
Brand sources drift
Brand palettes change during rebrands, and public hex lists are often wrong or outdated. Treat any directory entry as a starting point and verify against the brand's own guidelines before it reaches production.
How It Works
Each HEX value is parsed into sRGB channels and converted to RGB and HSL for display. Contrast uses the WCAG 2.1 definition: channels are linearized with the sRGB gamma curve, relative luminance is L = 0.2126R + 0.7152G + 0.0722B, and the ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter color as L1.
The AA filter keeps only colors whose ratio against #FFFFFF is at least 4.5:1, the threshold for normal body text. Colors below that line can still work for large text (3:1), icons, or fills behind dark text, but not as standalone text on white.
Export builds the output from the filtered list only, so narrowing the search also narrows the exported tokens.