Color Conversion
#85b0bfGlacial Harbor Mist
About this color
Calm assurance with subtle sophistication
A soft, sea-slate blue with a cool gray veil that reads both fresh and slightly weathered. It feels quietly assured — like a calm harbor at dawn, inviting focus and gentle clarity.
Designer tip: Use Glacial Harbor Mist (#85B0BF) as the mid-tone in a three-level hierarchy: pair it with a high-contrast dark anchor for copy and a warm complementary accent for CTAs to preserve readability while keeping a tranquil palette.
Best use case: Brand identity for wellness or boutique medical clinics where a calming, clinical-but-human tone is required (logo + UI + waiting-room finishes).
Psychology
Psychological traits and emotional associations
Effect
In environments and interfaces it lowers visual noise and promotes concentration by acting as a non-demanding mid-tone; its coolness soothes while the slight gray mute prevents it from feeling too clinical. Used sparingly as an accent it encourages engagement; used across surfaces it fosters a restful, orderly atmosphere.
Emotional impact
Viewers most commonly feel soothed and quietly confident when they encounter this color.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western design this blue-gray often reads as trustworthy and calming, commonly used in healthcare and finance. In East Asian traditions, blue-greens (qing) carry connotations of nature and longevity, so the shade can suggest natural balance. In Middle Eastern contexts, turquoise/teal relatives recall protective tiles and craft, invoking craftsmanship and heritage.
Positive associations
Associated with healing and cleanliness in Western healthcare branding; linked to nature and longevity in Chinese visual culture; reminiscent of protective ceramic tiles in Middle Eastern decorative arts.
Negative associations
May read as sterile if overused in clinical settings (Western), and could conflict with certain ceremonial colors in cultures where vivid reds or golds signal auspiciousness (East Asian, South Asian).
Design applications
How this color is used across different fields
Healthcare branding
Use as the primary brand color for clinics or wellness centers to communicate cleanliness with warmth; pair with warm terracotta accents to avoid a sterile feel.
Web dashboards (finance/health)
Acts as a calming mid-tone background for data cards and navigation, reducing fatigue while maintaining clarity for interactive elements.
Residential bathrooms/kitchens
Works as a tile or cabinet finish that reads fresh yet lived-in; the muted blue hides minor wear while keeping spaces airy.
Resort and resort-wear fashion
Translates well into linen and light cottons for relaxed, upscale resort collections — it photographs softly against sunlit skin.
Cosmetics packaging
Signals purity and sea-derived ingredients on skincare lines when combined with matte white and warm sand labels for contrast.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Pair with a warm complementary accent (e.g., terracotta) to prevent a clinical look and draw attention to CTAs.
- + Use at mid-scale surfaces (cards, upholstery, cabinetry) rather than as the sole background to preserve depth.
- + Set white or very light neutrals (#FFFFFF or D9D9D9) for typography on top, and reserve a dark navy anchor for body copy for accessibility.
Avoid this
- - Don’t use this shade as the only contrasting color against white — it can feel washed out without a darker anchor.
- - Avoid pairing with high-saturation neon greens or hot pinks that clash with its muted coolness.
- - Don’t rely on it for small fine-line UI elements — its mid-value reduces legibility at small sizes.
Fundamentals: Maintain contrast hierarchy: this color is most effective as a mid-tone — always pair with both a darker anchor and a warmer or brighter accent.
Overuse risk: If it dominates a design, spaces or interfaces can feel too subdued and near-sterile, losing emotional warmth and visual hierarchy. Balance with warmer accents and darker anchors to retain depth and focus.
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
#E08A5C
Warm muted terracotta — complementary contrast that follows a near-opposite harmony, bringing warmth and focal energy to CTAs and accents.
#4EA3A9
Deeper teal-analog — analogous harmony for layered, tonal depth while keeping a cohesive marine family.
#223F47
Desaturated deep navy — provides an accessible anchor for typography and strong contrast without harshness (neutral/dark triad support).
Typography hints: Use a humanist sans for UI (e.g., Inter or FF Meta) with 600–700 weight for headers on this color and 400–500 on dark anchors for body copy; for high-end print or hospitality signage, combine a light serif (e.g., Garamond Light) for tone with bold sans headings to balance warmth and clarity.
Historical significance
The story and heritage of this color
Shades like Glacial Harbor Mist trace their visual ancestry to natural mineral and glassy blues used since antiquity — ground azurite and smalt provided early artists with cool blues, while coastal communities produced muted sea-glazes from local minerals and ash. As synthetic pigments appeared in the 18th–19th centuries (Prussian blue, smalt refinements, and later cerulean shades), painters gained more stable, desaturated blues that could be mixed to evoke sea and sky without vivid saturation.
Across art and architecture, these softer blue-grays have been applied to frescoes, glazed tiles, and maritime objects to suggest distance and weathering: Ottoman and Mediterranean tile work used green-leaning blues for domes and interiors, and 19th-century maritime painting favored muted sea tones for realistic water. In fashion, practical uniforms and early 20th-century hospital scrubs adopted desaturated blues for their clean, calming appearance.
Today the color thrives in digital and product design where a restrained, modern coastal aesthetic is desirable — from wellness brands and boutique hospitality to UI palettes for health tech. Its contemporary relevance is tied to trends favoring muted, nature-derived palettes that communicate sustainability, calm, and a lived-in luxury rather than stark minimalism alone.
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.