Palette
The tranquil blues and warm sandy whites of the Greek islands under a brilliant summer sun.
Preview
Interface
A quick look at how Sun-Drenched Aegean 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 Sun-Drenched Aegean palette transports you to the tranquil blues and warm sandy whites of the Greek islands under a brilliant summer sun. This serene collection features a deep teal (#005F6B), a calming seafoam blue (#53A0A7), a soft sky blue (#C6E0E7), an off-white sand tone (#F2EDE9), and a warm terracotta blush (#E0AC9E). It's an ideal choice for designs that aim to evoke peace, coastal beauty, and a touch of Mediterranean warmth, perfect for travel or wellness themes.
primary
Use #53A0A7 as a calm, inviting blue for main content areas, headers, or prominent graphical elements.
secondary
Apply #005F6B to add deep, anchoring contrast, ideal for navigation, footers, or important textual elements.
accent
Employ #E0AC9E as a warm, earthy pop, perfect for calls to action or to highlight key features.
background
Utilize #F2EDE9 as a soft, sandy base that provides a neutral canvas for the serene blues and warm accent.
text
For optimal readability, use deep teal like #005F6B or a dark charcoal against lighter backgrounds, or white text on darker shades.
Create coastal branding, deep sea themes, or tranquil gradients that evoke the ocean's depth.
#005F6B · #53A0A7 · #C6E0E7Ideal for light backgrounds, warm accents, and UI elements that suggest a beachside feel.
#F2EDE9 · #E0AC9E · #53A0A7Use for dynamic headers, travel promotions, or to create a balanced yet striking visual hierarchy.
#C6E0E7 · #005F6B · #E0AC9E:root {
--sun-drenched-aegean-1: #005F6B;
--sun-drenched-aegean-2: #53A0A7;
--sun-drenched-aegean-3: #C6E0E7;
--sun-drenched-aegean-4: #F2EDE9;
--sun-drenched-aegean-5: #E0AC9E;
}theme: {
extend: {
colors: {
"sun-drenched-aegean": {
1: "#005F6B",
2: "#53A0A7",
3: "#C6E0E7",
4: "#F2EDE9",
5: "#E0AC9E",
}
}
}
}Palette colors
Accessibility
Similar palettes