Slate & Putty Trail is a complementary color palette tagged muted, minimal, white. Near-complementary hues (about 175° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Linen | #FFF3EA | rgb(255, 243, 234) | hsl(26, 100%, 96%) | oklch(97.1% 0.018 59) | |
| Putty | #CFB6A1 | rgb(207, 182, 161) | hsl(27, 32%, 72%) | oklch(79.2% 0.041 62) | |
| Slate | #5E7F92 | rgb(94, 127, 146) | hsl(202, 22%, 47%) | oklch(57.8% 0.048 234) | |
| Graphite | #4D4E4F | rgb(77, 78, 79) | hsl(210, 1%, 31%) | oklch(42.3% 0.002 248) |
Why it works and how to use it
It works because the lightness range is wide (31% to 96%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Linen (#FFF3EA) is the lightest color, so it belongs on large surfaces.
- Text: Graphite (#4D4E4F) on #FFF3EA gives 7.65:1, passing WCAG AAA.
- Primary: Putty (#CFB6A1) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Slate (#5E7F92) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Graphite at 7.65:1.
Preview on a real UI see how the palette feels in context
Design faster with Slate & Putty Trail
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryColor blindness simulation
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#FFF3EA on #4D4E4F | Aa | 7.65:1 | AAA |
#CFB6A1 on #4D4E4F | Aa | 4.31:1 | AA large only |
#FFF3EA on #5E7F92 | Aa | 3.91:1 | AA large only |
#CFB6A1 on #5E7F92 | Aa | 2.2:1 | Fail |
#5E7F92 on #4D4E4F | Aa | 1.96:1 | Fail |
#FFF3EA on #CFB6A1 | Aa | 1.77:1 | Fail |