Colors

About the color library

The BPOZZ color library is a reference of about 1,200 named colors. Each color has a name and a HEX value, so you can talk about a color in words and still paste the exact value into a design file or a stylesheet.

The names come from the BPOZZ palette collection: every color here first appeared, with its name, in one of our color palettes. Colors are grouped into twelve families — Red, Orange, Brown, Yellow, Green, Turquoise, Blue, Violet, Pink, White, Gray and Black. Families are assigned by lightness first and hue second: very dark shades go to Black, near-whites to White and nearly colorless tones to Gray, and hue decides the rest.

How to use it

• Pick a family above the grid to narrow the list, or choose All to see every color.
• Click or tap any color to copy its HEX value, ready to paste into Figma, CSS or any other tool.

Named colors in design work

A name is easier to discuss in a review than a hex code, but it is not a design token. In a real interface, give each color a role — surface, text, accent, border — and check that text keeps enough contrast against its background before you commit to it.

Names are also a handy shorthand in briefs and handoff notes: "Pine Teal for the header" is quicker to read than a hex code, as long as the exact value travels with it. These guides go further:

• Color Contrast Is Math, Not Taste
• A Color Palette Is a Token System, Not a Row of Swatches
• Dark Mode Is a Second Palette, Not an Inverted Filter