Palette
Deep, smoky grays and muted blues capture the stoic, raw power of a volcanic landscape under an ash-laden sky.
Preview
Interface
A quick look at how Obsidian Peak Smoke 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
Obsidian Peak Smoke captures the stoic, raw power of a volcanic landscape under an ash-laden sky. This palette features deep, smoky grays and muted blues, including #1C242A, #36454F, and #5A5A5A. The lighter, ethereal blue-grays like #778899 and #B0C4DE introduce a sense of atmospheric depth and coolness, reminiscent of distant peaks shrouded in mist. It's a sophisticated yet grounded palette, ideal for designs that convey strength, natural elements, and a calm, authoritative presence.
primary
Establish #1C242A as the deepest background, providing a robust, almost black-blue foundation.
secondary
Use #36454F for secondary backgrounds, content blocks, or card elements, adding a smoky blue-gray layer.
accent
Apply #B0C4DE as a light, airy accent for highlights, interactive elements, or key data points to provide contrast.
background
The strong, dark #1C242A or #36454F is excellent for creating a solid, grounded backdrop.
text
For primary text, #778899 offers good readability on darker backgrounds, while #5A5A5A can be used for headlines.
A deep blue-gray base, a smoky mid-tone for content, and a light blue accent for key information or buttons.
#1C242A · #36454F · #B0C4DEFor creating depth with layered UI elements, using a darker base, a mid-gray panel, and a lighter blue-gray for text.
#36454F · #5A5A5A · #778899Utilize a very dark background with a medium blue-gray for body text and a light blue for headlines or important elements.
#1C242A · #778899 · #B0C4DE:root {
--obsidian-peak-smoke-1: #36454F;
--obsidian-peak-smoke-2: #5A5A5A;
--obsidian-peak-smoke-3: #778899;
--obsidian-peak-smoke-4: #B0C4DE;
--obsidian-peak-smoke-5: #1C242A;
}theme: {
extend: {
colors: {
"obsidian-peak-smoke": {
1: "#36454F",
2: "#5A5A5A",
3: "#778899",
4: "#B0C4DE",
5: "#1C242A",
}
}
}
}Palette colors
Accessibility
Similar palettes