Palette
Cool blues and grays that capture the serene, drifting clouds and deep waters of a majestic fjord.
Preview
Interface
A quick look at how Fjord Drift 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 Fjord Drift palette captures the serene, drifting clouds and deep waters of a majestic fjord with its cool blues and grays. It features a deep navy, #2C3E50, a versatile mid-tone blue-grey, #5A7C93, and a lighter, atmospheric blue-grey, #415A6B. A bright sky blue, #8ABFCF, adds a crisp touch, while a very light, expansive blue, #BDDEEC, completes the set. This palette is ideal for designers seeking a calm, sophisticated, and professional aesthetic, evoking tranquility and clarity.
primary
Utilize #2C3E50 as a strong, grounding primary color for main headings, navigation, or as a deep background.
secondary
Apply #5A7C93 for secondary elements, subheadings, or as a complementary background, reflecting water's depth.
accent
Incorporate #8ABFCF as a refreshing accent for calls to action, highlights, or illustrative elements, suggesting clear skies.
background
Use #BDDEEC as a light, expansive background color, providing excellent readability and an open, airy feel.
text
Employ #415A6B for body text and important information, ensuring a sophisticated tone and good contrast against lighter colors.
Creates a profound and stable feel, perfect for robust branding or foundational sections.
#2C3E50 · #415A6B · #5A7C93Offers a light and airy combination, ideal for backgrounds, headers, or serene visual elements.
#BDDEEC · #8ABFCF · #5A7C93Provides a balanced and atmospheric blend, suitable for content blocks or visual storytelling.
#5A7C93 · #2C3E50 · #BDDEEC:root {
--fjord-drift-1: #2C3E50;
--fjord-drift-2: #5A7C93;
--fjord-drift-3: #8ABFCF;
--fjord-drift-4: #BDDEEC;
--fjord-drift-5: #415A6B;
}theme: {
extend: {
colors: {
"fjord-drift": {
1: "#2C3E50",
2: "#5A7C93",
3: "#8ABFCF",
4: "#BDDEEC",
5: "#415A6B",
}
}
}
}Palette colors
Accessibility
Similar palettes