Slate Studio
A complete five-role scheme. professional and minimal in character — tagged for tech, consulting.
#334155 #94a3b8 #f59e0b #f8fafc #0f172a Ship your next idea faster
Everything you need to launch, in one place.
Get started Learn moreOpen this scheme in the Studio →
Color values
| Role | Hex | RGB | HSL |
|---|---|---|---|
| primary | #334155 | 51, 65, 85 | 215°, 25%, 27% |
| secondary | #94a3b8 | 148, 163, 184 | 215°, 20%, 65% |
| accent | #f59e0b | 245, 158, 11 | 38°, 92%, 50% |
| background | #f8fafc | 248, 250, 252 | 210°, 40%, 98% |
| text | #0f172a | 15, 23, 42 | 222°, 47%, 11% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 17.06 | AAA |
| primary on background | 9.90 | AAA |
| secondary on background | 2.45 | fail |
| accent on background | 2.05 | fail |
| background on primary | 9.90 | AAA |
| background on accent | 2.05 | fail |
CSS variables
:root {
--color-primary: #334155;
--color-secondary: #94a3b8;
--color-accent: #f59e0b;
--color-bg: #f8fafc;
--color-text: #0f172a;
}Tailwind
colors: {
primary: '#334155',
secondary: '#94a3b8',
accent: '#f59e0b',
background: '#f8fafc',
text: '#0f172a',
}Best text pairings
The strongest foreground/background combinations in Slate Studio, ranked by WCAG contrast. Darker color set as the text; ratios of 4.5:1+ suit body copy, 7:1+ meet AAA.
Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on background — clears AAA comfortably.
#0f172a on #f8fafc Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — clears AAA comfortably.
#334155 on #f8fafc Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on accent — clears AAA comfortably.
#0f172a on #f59e0b Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — meets AA for body text.
#0f172a on #94a3b8