Five color pairs to try in a real layout
Copy the original palette values, then check contrast where text and backgrounds meet.
Originally posted · Published here · 1 source · Resume reading
Our color-pair carousel showed five combinations. These values come from the labels in the original slides, rather than sampling the compressed screenshots.
The five pairs
| Pair | First color | Second color |
|---|---|---|
| Cherry Crush / Peach Cream | #E54F5D | #FDDFC5 |
| Soft Sage / Deep Olive | #ABC7A1 | #1A2517 |
| Mint Whisper / Dark Mustard | #D5E9E0 | #4B421B |
| Deep Burgundy / Golden Sand | #5C0D13 | #F0E295 |
| Vanilla Latte / Teal Forest | #F4E5C3 | #174E50 |
Give each color a job
Try one as the background and the other as an accent. Add a separate text color if the pair does not provide enough contrast. A pleasing combination can still produce unreadable small text.
WCAG measures text contrast against its actual background; ordinary text generally needs 4.5:1 and large text 3:1 [1]. Check the finished layout rather than approving a palette from two large swatches.
Test a heading, a paragraph and a link at the size readers will see. Keep labels visible when a control changes color on hover or selection. These pairs are starting points for a design, not evidence that a particular color will increase conversions or communicate the same emotion to every audience.
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