Four color palettes from our design carousel
Keep the original hex values, then test each text and background pairing before using it.
Originally posted · Published here · 1 source · Resume reading
The carousel showed four versions of the same layout. These are the hex values printed in those original slides, so you can compare the palettes without guessing from a compressed image.
The original palettes
- Purple:
#FFFFFF,#151513,#752ECA,#EDE5DE. - Yellow and brown:
#FFFFFF,#521E00,#FBD915,#000000. - Orange and blue:
#FFFFFF,#EAE9E7,#FF631E,#211867. - Lime:
#FFFFFF,#151513,#D2E401.
A palette is a set of colors, not a guarantee that every combination is readable. Assign each color a role: background, text, accent or border. Then test the actual foreground and background pairs.
Check the text, not just the swatches
WCAG's minimum text-contrast criterion generally requires 4.5:1 for ordinary text and 3:1 for large text, with defined exceptions [1]. The requirement applies to the pair used for the text, not to how attractive the palette looks as a whole.
Try the colors on a real heading, paragraph and button before expanding them across a design. Keep meaning clear with labels or shapes as well as color, and inspect the result at the intended viewing size.
Keep this guide
Filed under Dev tools
Sources
Next in this stack
Keyword UV
Race uv against pip on a cold cache install
Keyword DRAW
Add drawing, diagram and film skills to your agent
Keyword SELFFLOW
Compare Zapier, n8n and Activepieces