Palette
Brooding blues and deep grays capture the intense, dramatic shadows of a midnight tempest.
Preview
Interface
A quick look at how Midnight Tempest Shadow reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The Midnight Tempest Shadow palette captures the intense, dramatic shadows of a midnight storm with its brooding blues and deep grays. Featuring the profound #1E272E and the atmospheric #AFBED4, this collection is designed for projects seeking a mysterious, cool, and powerful aesthetic. The interplay between #2D3944, #4F6473, and #7A8DA1 provides a range of stormy tones, making it versatile for themes that require depth, intrigue, and a touch of dramatic tension.
primary
Use #1E272E as the deepest, most dominant background color to establish a moody and dramatic foundation.
secondary
Apply #2D3944 for larger sections, containers, or subtle overlays, providing depth without losing the stormy feel.
accent
Highlight interactive elements, key alerts, or subtle details with #AFBED4, offering a stark, almost ethereal contrast.
background
Employ #1E272E as the primary canvas for a truly dark, cool, and mysterious aesthetic.
text
For clear readability on dark backgrounds, use #AFBED4 for primary text. #7A8DA1 can be used for secondary text or captions, maintaining the atmospheric mood.
Forms a deep, brooding foundation for backgrounds and primary content areas, establishing a strong, mysterious tone.
#1E272E · #2D3944 · #4F6473Ideal for creating strong visual hierarchy with light text and elements standing out against a profound dark blue-grey backdrop.
#1E272E · #AFBED4 · #7A8DA1Perfect for smooth transitions, atmospheric backgrounds, or illustrative elements that require a gentle shift in stormy tones.
#2D3944 · #4F6473 · #7A8DA1:root {
--midnight-tempest-shadow-1: #2D3944;
--midnight-tempest-shadow-2: #4F6473;
--midnight-tempest-shadow-3: #7A8DA1;
--midnight-tempest-shadow-4: #AFBED4;
--midnight-tempest-shadow-5: #1E272E;
}theme: {
extend: {
colors: {
"midnight-tempest-shadow": {
1: "#2D3944",
2: "#4F6473",
3: "#7A8DA1",
4: "#AFBED4",
5: "#1E272E",
}
}
}
}Palette colors
Accessibility
Similar palettes