Slate Color Palettes
Twelve slate palettes with hex codes — generate endless more with the free tool below.
#395260 · #4a4d82 · #457778 · #5b3e3e · #6f5b49
#2d3b4e · #2d2e4d · #3a4f55 · #5d4846 · #4a3e30
#57647a · #585a7e · #30454b · #5c4747 · #7a6652
#516781 · #3d4366 · #4e777e · #4e3737 · #755e4d
#313949 · #343149 · #53767f · #68504a · #635b4b
#475a71 · #50546d · #325053 · #6e403f · #635140
#2b364a · #3d3a55 · #466f77 · #4c342f · #534332
#596573 · #383b57 · #536e6e · #4b3538 · #5c4837
#53646e · #474b5c · #4d6366 · #493638 · #493f37
#4c5f76 · #343243 · #304650 · #603d39 · #87734f
#4d5666 · #403d52 · #3e6065 · #704742 · #615a48
#343d46 · #464962 · #47575c · #653a39 · #5c5447
Want more? Generate unlimited slate palettes, or anchor one on your own base color.
Open the Color Palette GeneratorUsing a slate palette
Slate is the roofing material, and the palette keeps its temperament: a blue-gray dark enough for text and structure, with just enough saturation that it never gets mistaken for charcoal. Where the mountain theme uses similar tones to paint distance, slate is close-up and constructive — a material in the hand, and by now half the interface text on the web, since framework color systems made slate scales a default. The muted brick and tan accents generated here settle onto the blue-gray like lichen and weathering. Developer tools, B2B software, architecture, and editorial systems build on slate because it does black’s hierarchy work with less severity and blue’s trust work with less corporate baggage. Keep saturation in the teens or above; drop below and you have shipped an ordinary gray under a better name.
Frequently asked questions
What is the difference between slate and gray?
Slate is gray with a stated position: a visible blue undertone at real saturation, where neutral gray commits to nothing. That small commitment is why interface designers default to slate scales — the coolness reads considered rather than unfinished.
Why is slate so common in interface design?
It does black’s hierarchy work with less severity, keeps its identity across a long lightness ladder, and flatters both bright accents and photography. Framework color systems shipping slate scales made it a habit; its usefulness made the habit stick.
What accents warm up a slate palette?
Muted brick and tan — the weathered warm notes generated here — or a single saturated accent like amber if the design needs one loud element. Slate recedes so willingly that almost any warm choice reads clearly against it.