Color Conversion
#95BEE5Fjord Mist
About this color
Gentle assurance with airy optimism
A soft, luminous blue with a frosted, seawater clarity that reads as both pastel and pure. It evokes a hush of coastal mornings — cool, clean, and quietly optimistic.
Designer tip: Use Fjord Mist as a large-area background at full-bleed and anchor key UI elements with a deep navy (#163B63) for accessible contrast and visual hierarchy.
Best use case: Onboarding screens and wellness app interfaces where a calming, trustworthy first impression and readable CTAs are required.
Psychology
Psychological traits and emotional associations
Effect
In a space or interface, Fjord Mist lowers perceived stress and opens visual breathing room, making layouts feel more spacious and hygienic. It simultaneously signals competence without the rigidity of darker blues, so teams feel invited rather than lectured.
Emotional impact
Viewers typically feel soothed and quietly optimistic on first glance.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western contexts this pale blue reads as tranquil and professional (often used in healthcare and tech). In Scandinavian and Northern European design it resonates with minimalism and nature-inspired restraint. In parts of East Asia, light blue can carry modernity and freshness but may be less associated with authority than darker blues.
Positive associations
Associated with wellness and cleanliness in Western and Scandinavian contexts (used in spas, healthcare, tech product UI).
Negative associations
Can read as overly clinical or juvenile in contexts where warmth or opulence is expected (some Southern European and Middle Eastern luxury contexts).
Design applications
How this color is used across different fields
Mobile app onboarding
Use as a full-screen background to create a calm first impression and pair with a dark navy CTA for accessibility and hierarchy.
Spa and clinic interiors
Apply on walls and linens to communicate hygiene and relaxation without the sterility of pure white.
Packaging for personal-care products
Use as a primary label field to suggest freshness and gentle efficacy, offset with matte silver accents for refinement.
Lightweight spring/summer apparel
Works well for technical fabrics or knitwear where a clean, sporty-casual vibe is desired and pairs with navy trims.
Environmental wayfinding in coastal resorts
Use for signage backgrounds to harmonize with sea views while remaining legible when paired with darker type.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Pair Fjord Mist with a deep navy (#163B63) for text and focal points to ensure accessible contrast.
- + Introduce warm natural materials (light oak, matte brass) as accents to prevent the palette from feeling clinical.
- + Use it at 100% for large fields and add subtle texture (linen or grain) to keep surfaces from appearing flat.
Avoid this
- - Don't rely on pure white type on Fjord Mist for long paragraphs — contrast will be insufficient for readability.
- - Don't pair it with saturated neon greens or hot pinks that clash with its cool, soft temperament.
- - Avoid heavy metallic gold accents alone — they compete; choose matte warm metals or wood instead.
Fundamentals: Maintain accessible contrast and one grounding element (dark or warm) whenever Fjord Mist is used as a dominant field.
Overuse risk: If Fjord Mist dominates a design without contrasting anchors, the result can feel insubstantial and overly airy, losing functional hierarchy and visual weight. Introduce at least one darker or warmer accent to ground the composition.
Brand fit
Industries and brand archetypes that align with this color
Trust level
high
Seriousness
balanced
Trend
Color pairing
Colors that complement and enhance this shade
#E5A78F
Soft coral-peach as a complementary accent provides warm contrast and balance (complementary harmony) while keeping an airy, approachable mood.
#163B63
Deep navy anchors layouts and supplies accessible contrast for typography and CTAs (contrast/neutralizing anchor).
#6FD7E5
A nearby cyan for analogous harmony that enriches the cool spectrum and supports layered, tonal gradients.
Typography hints: Headings: geometric sans-serif, 600–700 weight (e.g., Montserrat/SF Pro Display Bold) in deep navy; Body: humanist sans 400–500 (e.g., Inter/Roboto Regular) in the same navy for legibility; reserve white/type-inverse only for small labels or high-contrast dark accents.
Historical significance
The story and heritage of this color
Pale, sea-tinged blues like Fjord Mist trace their practical origins to artists lightening strong blue pigments with white — historically lead white or chalk — to render skies and water with a softer touch. In the 18th–19th centuries, makers used smalt, azurite, and later cerulean and cobalt-derived pigments; achieving this exact airy tone relied on mixing a saturated blue with ample white and, occasionally, a hint of green or yellow to tilt it toward aqua.
Through the 18th and 19th centuries such softened blues appeared in Rococo interiors, maritime painting, and porcelain glazes where they suggested air and distance. In the 20th century Scandinavian designers adopted similar pale blues as part of a restrained, nature-referential palette that emphasized light, function, and calm — a lineage visible in textiles, furniture, and coastal architecture.
Today this shade is prominent in digital product palettes, wellness branding, and contemporary interiors because it reads well on screens and in daylight, balances warmth when paired with wood, and scales across physical and virtual media as a neutral-but-expressive blue. Its ongoing popularity ties to trends favoring well-being, clean aesthetics, and coastal/minimal references in global design.
Variations
The purpose of this section is to accurately produce tints (pure white added) and shades (pure black added) of your selected color in 10% increments.
Pro Tip: Use shades for hover states and shadows, tints for highlights and backgrounds.
Shades
Darker variations created by adding black to your base color.
Tints
Lighter variations created by adding white to your base color.
Common Use Cases
- • UI component states (hover, active, disabled)
- • Creating depth with shadows and highlights
- • Building consistent color systems
Design System Tip
These variations form the foundation of a cohesive color palette. Export them to maintain consistency across your entire project.
Color Combinations
Each harmony has its own mood. Use harmonies to brainstorm color combos that work well together.
How to Use
Click on any color to copy its hex value. These combinations are mathematically proven to create visual harmony.
Why It Matters
Color harmonies create balance and evoke specific emotions in your designs.
Complement
A color and its opposite on the color wheel, +180 degrees of hue. High contrast.
Split-complementary
A color and two adjacent to its complement, +/-30 degrees of hue from the value opposite the main color. Bold like a straight complement, but more versatile.
Triadic
Three colors spaced evenly along the color wheel, each 120 degrees of hue apart. Best to allow one color to dominate and use the others as accents.
Analogous
Three colors of the same luminance and saturation with hues that are adjacent on the color wheel, 30 degrees apart. Smooth transitions.
Monochromatic
Three colors of the same hue with luminance values +/-50%. Subtle and refined.
Tetradic
Two sets of complementary colors, separated by 60 degrees of hue.
Color Theory Principles
Balance
Use one dominant color, support with secondary, and accent sparingly.
Contrast
Ensure sufficient contrast for readability and accessibility.
Harmony
Colors should work together to create a unified visual experience.
Color Contrast Checker
Test color combinations to ensure they meet WCAG accessibility standards for text readability.
Text Color
Background Color
Contrast
WCAG Standards
Advanced Contrast Checker
Fine-tune with sliders, multiple previews & more
Everybody is a Genius. But If You Judge a Fish by Its Ability to Climb a Tree, It Will Live Its Whole Life Believing that It is Stupid.