Color Conversion
#154c79Northsea Ledger
About this color
Calm authority with reflective depth
A compact, deep blue with a cool-teal undertone that reads dense and maritime rather than electric. It evokes steady, navigational authority with a reserved, contemplative hush.
Designer tip: Use #154C79 as a primary header or nav background with white or off-white body text (≥600 weight for headings); pair it with a warm amber CTA (around C77A15) at 18–24px and 12–16px padding to create a clear visual hierarchy and accessible contrast.
Best use case: Top navigation and data axes in B2B fintech or enterprise SaaS dashboards where credibility and clear hierarchy are paramount.
Psychology
Psychological traits and emotional associations
Effect
In spaces and interfaces this shade tightens perceived focus and reduces visual noise, steering attention toward calls-to-action and content hierarchy. It can make environments feel formal and controlled while anchoring lighter accents for legibility.
Emotional impact
A primary sense of reliable steadiness that feels professional and somewhat reserved.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western corporate contexts this deep blue reads as trust and institutional authority; in Japan and parts of East Asia deep indigo/blue tones carry connections to craftsmanship and restraint; across Mediterranean and Middle Eastern cultures dark blues often recall sea, protection, and traditional dyes like indigo and lapis influences.
Positive associations
Associated with corporate trust in Western business, artisanal indigo dye traditions in Japan and India, and protective talismanic blues in parts of the Middle East.
Negative associations
Can be perceived as cold, distant, or overly formal in cultures or brands that favor warm, convivial palettes (notably many Latin American and Southern European retail contexts).
Design applications
How this color is used across different fields
Fintech dashboards
Use as header/nav background and for axis lines to convey trust and focus; it reduces glare and makes data accents pop when paired with warm CTAs.
Corporate identity
Works as a primary brand color for law firms, consulting, and B2B tech to communicate seriousness and reliability across print and digital.
Meeting rooms / libraries
On an accent wall it deepens a room and encourages concentration while allowing warm woods and brass to add balance.
Outerwear and suiting
Ideal for structured coats and blazers—reads modern yet classic, pairing well with tan leathers and muted grays.
Premium packaging
As a box or sleeve color it signals quality and restraint while making gilded or amber accents read premium.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Pair with a warm amber accent (C77A15) for CTAs to create high-impact complementary contrast.
- + Use it as a grounding field (nav, footer, or full-height hero) and layer off-white typographic systems for accessible contrast.
- + Introduce matte brass or warm oak textures in interiors to offset perceived coolness and add tactile richness.
Avoid this
- - Don't pair it with saturated cool cyans of similar value—these can muddy the hue and reduce legibility.
- - Avoid using it as the sole background with small, low-weight colored text — contrast will fail.
- - Don't combine with neon or overly bright pastels; they compete and make the blue feel overly conservative or flat.
Fundamentals: Maintain contrast and balance: anchor with warm accents or light neutrals so the blue reads authoritative rather than oppressive.
Overuse risk: If this shade dominates a design it can make the overall feel heavy, somber, and unapproachable; accents and neutrals must be introduced to restore warmth and visual breathing room.
Brand fit
Industries and brand archetypes that align with this color
Trust level
high
Seriousness
serious
Trend
Color pairing
Colors that complement and enhance this shade
#C77A15
Complementary contrast (warm amber) — creates immediate visual hierarchy and energetic CTAs against the cool deep blue.
#15687A
Analogous harmony (teal-cyan neighbor) — adds subtle depth while preserving a maritime palette and smooth gradients.
#7A155E
Split-complementary/triadic accent (muted magenta) — provides sophisticated contrast for secondary accents and editorial highlights.
Typography hints: For text on this color use high-contrast off-white (F5F4F2) with a geometric sans like Avenir Next or Inter; headings at 600–800 weight and 18–28px, body text 16–18px at 400–500 weight. For reversed UI elements (light text on dark field) prefer semibold or bold weights to preserve legibility.
Historical significance
The story and heritage of this color
This cool, green-leaning deep blue is closest in lineage to Prussian Blue and indigo-based dyes that became widely used in the 18th and 19th centuries; Prussian Blue (iron ferrocyanide) was the first synthetic pigment introduced in the early 1700s and produced deep, stable blues similar to this tone.
Artists and tailors embraced these deep blues for both paint and textiles—naval uniforms, shipping crates, and oil paintings used these pigments for their permanence and tonal depth; in 19th-century art the cool deep blues conveyed distance, shadow, and gravitas in seascapes and portraits.
Today this exact shade appears in digital interfaces, premium consumer goods, and contemporary interiors where reproducible, stable blues are desirable; its persistence reflects both historical pigment stability and modern branding needs for dependable, sober color voices.
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.