Slate Studio
A complete five-role scheme. professional and minimal in character — tagged for tech, consulting.
primary
#334155 secondary
#94a3b8 accent
#f59e0b background
#f8fafc text
#0f172a AcmeSign up
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',
}