Slate Gray Color Palette
A refined slate gray palette for professional and minimalist designs. Perfect for tech, architecture, and corporate brands.
Dark Slate
HEX: #2f3e4c
RGB: rgb(47, 62, 76)
HSL: hsl(209, 24%, 24%)
Slate
HEX: #4f606e
RGB: rgb(79, 96, 110)
HSL: hsl(207, 16%, 37%)
Slate Gray
HEX: #708090
RGB: rgb(112, 128, 144)
HSL: hsl(210, 13%, 50%)
Light Slate
HEX: #9aacba
RGB: rgb(154, 172, 186)
HSL: hsl(206, 19%, 67%)
Slate Wash
HEX: #c7d4de
RGB: rgb(199, 212, 222)
HSL: hsl(206, 26%, 83%)
CSS Variables
:root {
--slate-gray-1: #2f3e4c;
--slate-gray-2: #4f606e;
--slate-gray-3: #708090;
--slate-gray-4: #9aacba;
--slate-gray-5: #c7d4de;
}Tailwind CSS Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'slate-gray': {
'100': '#2f3e4c',
'200': '#4f606e',
'300': '#708090',
'400': '#9aacba',
'500': '#c7d4de',
},
},
},
},
}Use Cases
Architecture firms
Tech companies
Corporate branding
Minimalist portfolios
Related Palettes
Frequently Asked Questions
Why is slate gray popular in professional design?▾
Slate gray conveys sophistication, neutrality, and professionalism without the coldness of pure gray. Its slight blue undertone adds depth and interest.
How do I make a gray palette engaging?▾
Add one or two accent colors to create focal points. Use varying shades for depth. Include subtle textures or gradients to prevent flatness.