Palette
Serene and refined, inspired by the quiet solemnity of a tea ceremony at dusk.
Preview
Interface
A quick look at how Midnight Tea Ceremony 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 Tea Ceremony palette embodies serenity and refinement, drawing inspiration from the quiet solemnity of a dusk tea ceremony. This collection of dark teals and muted grays, including the grounding #1E3231 and the delicate #A7B9B8, creates a sophisticated and calming atmosphere. The subtle variations, such as #3F5453 and #627877, allow for depth and warmth, making it ideal for minimalist designs, wellness platforms, or any project seeking a tranquil and elegant aesthetic.
primary
Use #1E3231 as the deep, calming background, setting a tranquil and sophisticated tone for the entire design.
secondary
Apply #2B3D3C for subtle borders, secondary content blocks, or navigational elements to add gentle structure.
accent
Highlight interactive elements, delicate details, or key information with #A7B9B8, providing a soft, refined focal point.
background
Employ #1E3231 as the primary canvas for a serene and elegant dark teal/grey theme.
text
For optimal legibility on dark backgrounds, use #A7B9B8 for primary text. #627877 can be used for secondary text or captions, ensuring a gentle contrast.
Creates a deep, calming foundation for backgrounds and primary content, establishing a tranquil and refined mood.
#1E3231 · #2B3D3C · #3F5453Ideal for creating clear visual hierarchy with delicate light text and elements against a profound dark teal backdrop.
#1E3231 · #A7B9B8 · #627877Perfect for smooth transitions, subtle backgrounds, or illustrative elements that require a gentle shift in teal-grey tones.
#3F5453 · #627877 · #A7B9B8:root {
--midnight-tea-ceremony-1: #1E3231;
--midnight-tea-ceremony-2: #3F5453;
--midnight-tea-ceremony-3: #627877;
--midnight-tea-ceremony-4: #A7B9B8;
--midnight-tea-ceremony-5: #2B3D3C;
}theme: {
extend: {
colors: {
"midnight-tea-ceremony": {
1: "#1E3231",
2: "#3F5453",
3: "#627877",
4: "#A7B9B8",
5: "#2B3D3C",
}
}
}
}Palette colors
Accessibility
Similar palettes