Slate and Teal
Professional slate grays with a confident teal accent.
Color codes
| HEX | RGB | HSL | CMYK | |
|---|---|---|---|---|
| hsl(217, 33%, 17%) | cmyk(49%, 31%, 0%, 77%) | |||
| hsl(215, 25%, 27%) | cmyk(40%, 24%, 0%, 67%) | |||
| hsl(215, 16%, 47%) | cmyk(28%, 17%, 0%, 45%) | |||
| hsl(175, 84%, 32%) | cmyk(91%, 0%, 8%, 42%) | |||
| hsl(167, 85%, 89%) | cmyk(19%, 0%, 4%, 2%) |
CSS
:root {
--slate-and-teal-1: #1E293B;
--slate-and-teal-2: #334155;
--slate-and-teal-3: #64748B;
--slate-and-teal-4: #0D9488;
--slate-and-teal-5: #CCFBF1;
}How these colors work together
The colors are analogous — neighbors on the color wheel — which gives a calm, cohesive feel. Overall it reads cool. Lightness spans 72 points, which sets how much contrast you can create.
2 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is #1E293B on #CCFBF1 (12.98:1).
Slate and Teal — readable text using the best pair.
Suggested applications
- Reports, dashboards and business websites.
- Interface themes: use the lightest color for backgrounds and the darkest for text.
- Brand kits, social graphics and presentations.
Frequently asked questions
How do I use the Slate and Teal palette?
The Slate and Teal palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use #1E293B on #CCFBF1: it has a contrast ratio of 12.98:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.
More palettes
Modern Consulting#14213D #FCA311 #E5E5E5 #FFFFFF #000000Trust Blue#0B1F3A #1D4E89 #3A7BD5 #A7C7E7 #F2F6FBHealthcare Calm#0F4C5C #2A9D8F #8ECAE6 #E9F5F2 #FFFFFFDark Academia Study#1F1B16 #3B2F25 #5A4632 #8A6A46 #C9B28ASage Garden#F5F3EE #DFE3D3 #B5C0A2 #7D8C6A #C8A97ENordic Light#FFFFFF #EEF1F4 #C9D1D9 #6B7B8C #1F2933