Palette
Rich, deep blues and purples that evoke the mysteries and subtle luminosity of a clear night sky.
Preview
Interface
A quick look at how Midnight Stellar Glow 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 Stellar Glow palette offers a rich and mysterious blend of deep blues and purples, reflecting the subtle luminosity of a clear night sky. This collection, featuring hues like the profound #191970 and the vibrant #8A2BE2, is designed to evoke wonder and sophistication. With a range from the dark #483D8B to the striking #6A5ACD, it's perfect for creating designs that feel both immersive and enchanting, ideal for digital experiences that aim for a cosmic or luxurious feel.
primary
Use #191970 as the core background color to establish a deep, immersive environment, suitable for main sections and full-page designs.
secondary
Apply #483D8B for supporting elements, headers, and secondary content areas, providing a rich, complementary base.
accent
Emphasize key features, calls to action, or vibrant highlights with #8A2BE2, adding a striking and luminous touch.
background
Utilize #191970 as the foundational backdrop for an immersive and mysterious aesthetic.
text
For clear readability, use #6A5ACD or #4169E1 for primary text on darker backgrounds, and a bright white or near-white for essential headings or navigation.
Creates a rich, multi-layered dark backdrop suitable for sophisticated interfaces and digital environments.
#191970 · #483D8B · #6A5ACDPerfect for injecting energetic highlights and interactive elements against a deep, dark blue canvas.
#191970 · #8A2BE2 · #4169E1Ideal for gradients, illustrations, or graphical elements that require a smooth transition of cosmic purples and blues.
#483D8B · #6A5ACD · #8A2BE2:root {
--midnight-stellar-glow-1: #191970;
--midnight-stellar-glow-2: #483D8B;
--midnight-stellar-glow-3: #6A5ACD;
--midnight-stellar-glow-4: #8A2BE2;
--midnight-stellar-glow-5: #4169E1;
}theme: {
extend: {
colors: {
"midnight-stellar-glow": {
1: "#191970",
2: "#483D8B",
3: "#6A5ACD",
4: "#8A2BE2",
5: "#4169E1",
}
}
}
}Palette colors
Accessibility
Similar palettes