Fjord Morning Drift
A serene sequence of cool blues that feels like looking into calm water at dawn, with soft depth and quiet restraint.
Psychology
The analogous blue progression creates visual cohesion while the gradual darkening from light to mid-tone establishes subtle depth without harsh contrast. Cool hues throughout activate the parasympathetic nervous system, promoting calm and focus, while moderate saturation prevents the palette from feeling cold or clinical.
Low chromatic intensity paired with balanced lightness suggests trust and professionalism, making the sequence read as composed and intentional rather than static.
Low chromatic intensity paired with balanced lightness suggests trust and professionalism, making the sequence read as composed and intentional rather than static.
Usage
Ideal for SaaS dashboards, editorial typography layouts, and minimalist brand identities where calm professionalism matters. Works effectively in wellness app interfaces, luxury tech packaging, and corporate website headers where cool tones signal clarity without emotional intensity.
The mid-range contrast supports both digital legibility and print reproduction while maintaining the sophisticated restraint that appeals to contemporary design systems and high-end brand positioning.
The mid-range contrast supports both digital legibility and print reproduction while maintaining the sophisticated restraint that appeals to contemporary design systems and high-end brand positioning.
Code
CSS Gradient
/* CSS gradient approximation of mesh gradient */
/* Note: This is a linear approximation. For the full animated mesh effect, use the React/JS export. */
background: linear-gradient(
90deg,
#b8c3f7 0%,
#8aa3dc 25%,
#5d8dd5 50%,
#386ea4 75%,
#22688e 100%
);Tailwind v4
/* app.css — Tailwind v4 */
@theme {
--color-gradient-1: #b8c3f7;
--color-gradient-2: #8aa3dc;
--color-gradient-3: #5d8dd5;
--color-gradient-4: #386ea4;
--color-gradient-5: #22688e;
}
/* Usage: bg-gradient-1, text-gradient-2, etc. */CSS Variables
--color-1: #b8c3f7; --color-2: #8aa3dc; --color-3: #5d8dd5; --color-4: #386ea4; --color-5: #22688e;
Hex values
#b8c3f7, #8aa3dc, #5d8dd5, #386ea4, #22688e
Building something? Get this palette via the REST API.
History
Similar palettes
Coastal Porcelain Dawn
Coastal Depths Morning
Mineral Spring Dawn
Periwinkle Linen Study
Slate Reverie Hour
Tidewater Passage
Frosted Periwinkle Pool
Abyssal Hearth
Jade Hour Glow
