Color Conversion
#013f6aMidnight Harbor
About this color
Calm authority with quiet sophistication
A dense, ink-like navy with a cool teal undertone that reads almost black in low light yet reveals deep maritime blue up close. It evokes composed strength and introspective clarity, like standing at a sheltered pier before dawn.
Designer tip: Use Midnight Harbor as a primary UI header or navigation background and pair it with a warm amber accent (around C96A2B) for call-to-action buttons to create clear visual hierarchy and accessibility-compliant contrast.
Best use case: Corporate identity for professional services (legal, maritime logistics, executive consulting) where authority and calm trustworthiness must read across print and digital touchpoints.
Psychology
Psychological traits and emotional associations
Effect
In spaces and layouts, this shade grounds a composition, making lighter elements appear more precise and authoritative. It reduces visual noise while encouraging focus and perceived professionalism.
Emotional impact
Viewers typically feel reassured and attentive, a mix of trust and contemplative calm.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western corporate contexts this deep navy signals authority and reliability (used by banks, law firms). In maritime cultures (Nordic, British) it reads as seafaring tradition and heritage tied to naval uniforms. In East Asian contexts, deep blue tones can imply refined seriousness and scholarly restraint but are less associated with ceremony than deeper blacks or reds.
Positive associations
Associated with naval and maritime tradition (British, Nordic), and with conservative professionalism in Western business culture.
Negative associations
Can suggest somberness or austerity in cultures where black denotes formality (some Western contexts) and may feel cold or distant in cultures that favor warmer hues (certain Mediterranean design traditions).
Design applications
How this color is used across different fields
Corporate identity (logos & stationery)
Works as a primary brand color to communicate trust and longevity; pairs well with metallics or warm amber accents for premium differentiation.
Website headers and footers
Provides a low-distraction backdrop that increases legibility of white or warm-neutral text and stabilizes page composition on long-scroll layouts.
Hospitality interiors (lobby walls, seating)
Creates an enveloping, elegant environment that feels both safe and upscale when combined with natural woods and brass accents.
Apparel (outerwear, suiting)
Ideal for structured garments like pea coats and blazers where the deep blue reads formal yet less severe than black, and flatters many skin tones.
Product packaging for premium goods
Conveys quality and restraint on small-format boxes and labels, especially when contrasted with tactile finishes like matte lamination or foil.
Historical significance
The story and heritage of this color
Deep maritime blues emerged from coastal dyes and pigments used by sailors and merchants; indigo trades and Prussian blue discoveries in the 18th century allowed darker blues to be produced more consistently and economically. Naval uniforms standardized deep blues for practicality and rank recognition, cementing the association between navy tones and authority.
In art and architecture, deep blues were used to create spatial recession and to suggest infinity—seen in Renaissance lapis-laid altarpieces and later in the monumental facades and interiors of maritime institutions. Fashion adopted dark navy for tailoring and uniforms because it communicates seriousness without the finality of black.
Today this shade remains relevant across digital and physical design: its low-light richness reads well on screens and in print, and modern finishes (matte, soft-touch, metallic foil) allow brands to use it to signal premium positioning while remaining distinctly contemporary.
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.