ImageColorPicker.com

    #026395 Mariner's Signal

    Generate color codes, variations, harmonies, and check contrast ratios.

    Color Conversion

    #026395Mariner's Signal

    HEX
    #026395
    HSL
    200, 97, 30
    RGB
    2, 99, 149
    XYZ
    10, 11, 30
    CMYK
    99, 34, 0, 42
    LUV
    40,-19,-43
    LAB
    40, -5, -34
    HWB
    200, 1, 42

    About this color

    Harbor Helm Blue
    Deep Deck Teal
    Signal-Flag Indigo

    Calm competence with quiet authority

    A lucid, deep sea-blue with a crisp, slightly green-leaning clarity that reads both cool and very present. It evokes steady resolve and maritime competence — the calm authority of a well-led ship under open sky.

    Designer tip

    Use Mariner's Signal as the primary CTA or brand accent on light, near-white backgrounds (F4F5F6 or FFFFFF) with at least 4.5:1 contrast for accessibility; pair it with a warm complementary gold for emphasis and use bold 600–800 weight for headings to maximize legibility.

    Best use case

    Primary accent color for a fintech or maritime brand's web and mobile UI — ideal for navigation bars, CTA buttons, and data-visualization highlights where trust and clarity are critical.
    Assured
    Calm
    Professional
    Resolute
    Elegant

    Psychology

    Psychological traits and emotional associations

    trustworthy
    competent
    focused
    composed
    existentially grounded

    Effect

    In a space or interface, this color centers attention without shouting, clarifying hierarchy and encouraging focused interaction. It reduces perceived risk and lends sober professionalism to products and environments.

    Emotional impact

    A primary response of steadiness and confidence, with subtle encouragement to take action.

    Meaning & symbolism

    Cultural symbolism and significance

    reliability
    navigation and guidance
    professionalism
    depth and exploration
    clarity under pressure

    Cultural significance

    In Western corporate contexts this shade signals trust, corporate stability and maritime heritage. In Japan, a close indigo/azuric tone speaks to traditional craftsmanship and disciplined restraint. Around the Mediterranean and Middle East, blue hues are historically used for protection (e.g., talismans) and for seafaring identity.

    Positive associations

    Associated with trust and institutional reliability in Western business and banking contexts; connects to traditional indigo-dyed textiles and craftsmanship in Japan (positive association).

    Negative associations

    Can read as cold or aloof in cultures that favor warmer social signaling (some Mediterranean/Latin contexts), and in contexts expecting bright, energetic youthfulness it may feel too formal (Western youth brands).

    Design applications

    How this color is used across different fields

    Fintech product UI
    Use as the primary brand accent for navigation, buttons, and data highlights to convey trust and precise hierarchy; it boosts perceived security on account screens and chart lines.
    Corporate identity / logo
    Works as a core logo color for professional services and maritime brands where authority and clarity matter, pairing well with warm secondary tones for accents.
    High-performance outerwear
    On jackets and sails, this deep blue reads as durable and maritime — it hides wear while reading as premium and technical.
    Office interiors
    As an accent wall in conference rooms or reception areas, it fosters focus and gravitas without shrinking a space when balanced by light neutrals and wood.
    Premium beverage packaging
    As a label background or foil-accent pairing, it communicates refinement and artisanal depth especially for craft beers or spirit bottlings themed around sea/heritage stories.

    Design guidance

    Practical tips for using this color effectively in your designs

    Do this

    • Pair with a warm, desaturated gold (small doses) to create an accessible complementary accent and call-to-action emphasis.
    • Use on light neutral backgrounds (F4F5F6 or similar) with bold typography (600–800) for headings and semi-bold for buttons to maximize legibility.
    • Introduce natural textures (teak wood, brushed brass) when using in interiors or packaging to counter the coolness and add tactile warmth.

    Avoid this

    • Don't place large blocks of text in this color on dark backgrounds — contrast will be insufficient and strain readability.
    • Don't combine with overly saturated greens or purples that share similar luminance — it creates muddiness rather than harmony.
    • Don't use as the sole brand color for youth-focused, playful brands where energetic warm tones are expected.

    Fundamentals

    Maintain contrast and balance: always pair this deep, cool blue with at least one lighter neutral and one warm accent to preserve legibility and emotional nuance.

    Overuse risk

    When Mariner's Signal dominates, designs risk feeling institutional and austere rather than inviting; surfaces can appear cold and inert unless balanced with warm accents or tactile materials. Too much of it also flattens visual hierarchy, making CTAs and secondary elements compete.

    Brand fit

    Industries and brand archetypes that align with this color

    fintech & banking
    marine & maritime services
    professional services (legal/consulting)
    Sage
    Explorer

    Trust level

    High

    Seriousness

    Serious

    Trend

    Classic
    This shade remains a staple for brands that need credibility; its popularity is steady with renewed interest as designers favor deeper, more saturated blues for digital interfaces. Expect continued use in corporate and maritime-adjacent sectors while designers experiment with warm complements for freshness.
    professional sailing team liveries and race graphics
    conference-room accent walls in corporate headquarters
    data-visualization highlights in fintech dashboards and investor reports

    Color pairing

    Colors that complement and enhance this shade

    #D98C02

    Warm gold complementary contrast — the complementary harmony produces energetic emphasis for CTAs and badges while remaining sophisticated.

    #0288D1

    Analogous brighter blue — an analogous harmony that provides lighter accents for charts, hover states and gradients without clashing.

    #2F3E46

    Deep slate neutral — a tonal/anchoring harmony that supports text, footers, and hardware accents while keeping overall richness.

    Typography hints

    For UI use a humanist sans (Inter, Open Sans, or UI Kit fonts) in 400–600 weight for body and 700–800 for headings; for print or luxury applications combine a sturdy geometric sans for UI with a transitional serif (Merriweather or Georgia) for long-form to balance seriousness and readability.

    Historical significance

    The story and heritage of this color

    Deep, saturated blues like Mariner's Signal owe their earliest manufactured lineage to pigments such as Prussian Blue (discovered in early 18th-century Europe) and later synthetic indigo and phthalocyanine blues that made intense sea-blues affordable and stable. Sailors and mapmakers favored rich blues in charts and signal systems, creating a long visual association between this chroma and navigation.

    In art and fashion, deep blues have played versatile roles: 19th-century painters used ultramarine and indigo for nocturnes and coastal scenes; naval uniforms and maritime flags adopted similar tones because they read crisply at a distance. Designers in the 20th century translated these maritime blues into modernist architecture and corporate identities where they implied stability and professionalism.

    Today this exact shade sits at the intersection of classic and digital design: it carries traditional maritime and institutional weight while performing strongly on screens for fintech dashboards, data visualization, and premium product branding — a hue that feels both time-tested and technically current.

    Tags

    deep blue
    teal-blue
    trustworthy
    nautical
    fintech
    corporate
    autumn
    modern
    professional
    digital

    mood

    assured, calm, professional

    family

    deep teal-blue cool

    usage

    web UI, branding, outerwear

    style

    modern, nautical, refined

    inspiration

    North Atlantic, signal flags

    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.

    #026395
    Best for: High-impact designs, CTAs, logos

    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.

    Best for: Vibrant yet balanced layouts

    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.

    Best for: Playful, energetic designs

    Analogous

    Three colors of the same luminance and saturation with hues that are adjacent on the color wheel, 30 degrees apart. Smooth transitions.

    Best for: Nature-inspired, calming interfaces

    Monochromatic

    Three colors of the same hue with luminance values +/-50%. Subtle and refined.

    Best for: Minimalist, sophisticated designs

    Tetradic

    Two sets of complementary colors, separated by 60 degrees of hue.

    Best for: Rich, diverse color schemes

    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
    1.00
    Fail
    Very poor
    Small text
    ✖︎
    Large text
    ✖︎
    WCAG Standards
    AA:Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Required for most websites.
    AAA:Enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text. Recommended for optimal accessibility.
    Insufficient contrast for all text sizes - fails 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.

    - Albert Einstein

    Technical Formats

    Practical Formats

    Color Analysis

    Blindness Simulator

    Creative Aspects

    Frequently asked questions