Color Conversion
#005677Baltic Anchor
About this color
Calm authority with maritime depth
A dense, sea-forged teal with a pronounced blue backbone and a cool, maritime green undertone. It feels composed and steady—the kind of color that anchors a layout or room with calm authority.
Designer tip: Use #005677 as a full-bleed header or hero background with white semi-bold sans-serif headings (600 weight) and a warm accent CTA in a complementary orange to create immediate hierarchy and accessible contrast.
Best use case: Primary header and navigation backgrounds for fintech or maritime brand dashboards where authority, calmness, and modern trustworthiness must be communicated instantly.
Psychology
Psychological traits and emotional associations
Effect
In a space or interface this color grounds the composition and reduces visual agitation, encouraging focused attention. It signals competence and steadiness without feeling coldly corporate, especially when paired with warm accents.
Emotional impact
A sense of secure reassurance and focused calm.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western corporate contexts the shade reads as trustworthy and authoritative; in maritime cultures and coastal communities it evokes sea, seamanship, and practical resilience. In parts of the Middle East and Central Asia, blue/teal tones are traditionally used for protection and ornamentation, while in East Asia blue can connote formality and calm restraint.
Positive associations
Associated with naval uniforms and maritime commerce in Western cultures (conveys duty and trust); seen as protective and auspicious in some Middle Eastern contexts (turquoise motifs).
Negative associations
May read as somber or overly formal in cultural contexts that prefer warmer, festive palettes (certain Latin American or South Asian celebrations where warm colors signal joy).
Design applications
How this color is used across different fields
Web applications (dashboard/header)
Works as a dominant header background to convey reliability and to frame data with calm confidence; pairs cleanly with white type and warm CTA accents for hierarchy.
Brand identity for fintech/maritime companies
Serves as a signature brand color that communicates competence and nautical heritage without resorting to black or navy clichés.
Corporate interiors (conference walls)
An accent wall in meeting rooms reduces glare and instills focus while remaining formal and approachable.
Outerwear and technical apparel
Deep, saturated enough for coats and shell jackets to read premium and weather-ready while hiding wear.
Product finishes (marine equipment)
Evokes seaworthiness and durability on hulls, instrument bezels, and control panels where legibility and non-glaring surfaces matter.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Pair with a warm complementary orange for CTAs (use complementary contrast to draw attention).
- + Use as a dominant field for large surfaces (hero banners, accent walls) with bright white type for maximum legibility.
- + Introduce small amounts of warm wood or brass to humanize the coolness and add tactile richness.
Avoid this
- - Don’t put small low-contrast text in mid-gray on this background—legibility suffers quickly.
- - Don’t rely on it as the sole accent in playful or youthful brands where brighter, more energetic hues are needed.
- - Don’t oversaturate a space by using it on every surface—it can make interiors feel heavy if unbalanced.
Fundamentals: Maintain high contrast for type and introduce a warm complementary or a bright neutral to break the cool depth.
Overuse risk: If dominant everywhere, the design can feel heavy, closed-off, and overly formal, reducing approachability; visual hierarchy flattens without a contrasting accent. Moderate use with punches of warm or light neutrals preserves its authority while keeping designs inviting.
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
#FF8C33
Complementary contrast: a warm deep orange creates high visual energy for CTAs and highlights while preserving legibility.
#007A66
Analogous harmony: a greener teal extends the marine family for subtle layered accents and depth.
#003F7A
Tonal/analogous: a deep indigo/navy adds formal weight and creates a sophisticated minimal palette when used as grounding shadows.
Typography hints: For text on #005677 use high-contrast white (or off-white) with a geometric sans for headings (Montserrat/SF Pro Display SemiBold 600–700) and a humanist sans or serif for body (Roboto 400–500 or Georgia 400) with generous letter-spacing and ≥1.4 line-height for legibility.
Historical significance
The story and heritage of this color
This kind of deep teal-blue sits at the intersection of traditional oceanic pigments and modern synthetic dyes. Historically, artists achieved similar shades by mixing blue pigments like Prussian blue or azurite with green earths or copper-based pigments such as malachite; the exact saturated coolness seen here only became reliably reproducible with 19th–20th century synthetic pigments and aniline dyes.
Through the 18th–20th centuries, blue-greens appeared in naval uniforms, maritime signaling, and coastal architecture; by the mid-20th century designers and furniture makers favored saturated teals in modernist interiors and textiles to suggest both luxury and utility. The color family carried through fashion (peacoats, tailored outerwear) and commercial livery where legibility at distance and association with the sea mattered.
Today this shade is widely used in branding for fintech, maritime services, and premium outdoor gear because modern pigments (phthalocyanines and engineered dyes) reproduce it reliably and economically. Its contemporary relevance lies in balancing digital clarity with tactile, real-world associations—making it a go-to for interfaces, product finishes, and interior accents that require both presence and restraint.
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.