Tempest in a Teapot
#303a40
Moody slate gray with teal-leaning calm
About Tempest in a Teapot
Tempest in a Teapot looks like someone dimmed a slate-gray with a soft lens: still dark, but not the hard, screen-black vibe you get from the neighbors. It sits a notch lighter than Nightmare Fuel and feels more weathered than Petrol Slumber, with a steadier neutral gray that doesn't lean bluish-green.
If Petrol Slumber is "muted pool" calm and Nightmare Fuel is "charcoal with trace coolness," Tempest in a Teapot lands in between those tones: slate-cool without turning icy, a touch more open in lightness so panels don't feel pressed flat. I use it as a primary surface in dashboards and finance apps, especially in operations consoles, media player side rails, and newsroom-style admin screens where you want separation without the background looking heavy.
Pair it with near-white text and restrained accents. If your accents are too warm, this shade can start to look dull instead of grounded, so keep the temperature mix in check.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.
Similar colors
Create a gradient with Tempest in a Teapot
Open the generator with this color pre-loaded.
Start creating