Color Conversion
#003153Midnight Harbor
About this color
Calm authority with reserved sophistication
A dense, low-light navy with a cool teal undertone that reads almost black in dim conditions and reveals rich ultramarine at close range. It evokes composed authority — a quiet, maritime confidence with an inward, contemplative edge.
Designer tip
Use Midnight Harbor as a full-screen header or app navigation background and pair it with a warm orange accent (use #FF7A18) for CTAs to create immediate, accessible contrast and visual hierarchy.
Best use case
Psychology
Psychological traits and emotional associations
Effect
Emotional impact
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
Positive associations
Negative associations
Design applications
How this color is used across different fields
- Corporate app/dashboard
- Use as a persistent background for side navigation and header bars to convey stability; bright accent colors for CTAs will be highly visible against it.
- Executive interior (boardroom/library)
- Apply to an accent wall or built-in shelving to create a grounded, intimate atmosphere that suggests seriousness and focus; warm wood and brass accents prevent coldness.
- Luxury spirits packaging
- Use as the primary label field to signal premium quality and heritage; pair with matte finishes and gold foil to elevate perceived value.
- Menswear tailoring
- Ideal for formal suits, blazers, and pea coats where it reads as classic and authoritative while being less severe than black.
- Maritime branding
- Works for yacht clubs, shipping lines, and coastal museums to reference nautical tradition while remaining readable in signage and digital assets.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- Pair with a single warm accent (e.g., #FF7A18) for CTAs to achieve accessible contrast and immediate visual hierarchy.
- Use it as a grounding background at 100% or with a subtle texture rather than tinting it lighter, so its depth remains intact.
- Introduce warm neutrals (wood tones, brass) in physical spaces to offset the coolness and avoid an overly austere result.
Avoid this
- Don’t use Midnight Harbor for small body text on dark backgrounds — the low lightness reduces legibility.
- Don’t mix it with near-black blues or dark grays without introducing lighter contrasts, which can create a muddy, indistinct palette.
- Don’t rely on it alone to convey warmth or friendliness — without warm accents it reads formal and reserved.
Fundamentals
Overuse risk
Brand fit
Industries and brand archetypes that align with this color
Trust level
Seriousness
Trend
Color pairing
Colors that complement and enhance this shade
#FF7A18
A near-complementary burnt orange that creates high-impact, legible contrast for CTAs and accents (complementary harmony).
#00A3BF
A cool cyan that lifts the blue into an analogous/split-complement contrast, brightening interfaces without clashing (analogous/split-complement harmony).
#C9B99E
A warm sand tone that softens the cool depth and provides an elegant neutral contrast suitable for packaging and interiors (warm neutral contrast).
Typography hints
Historical significance
The story and heritage of this color
Deep, near-black blues like Midnight Harbor trace their lineage to historical indigo and Prussian blue pigments: indigo dye was cultivated and traded for millennia across Asia and Africa, and Prussian blue was discovered accidentally in early 18th-century Berlin, providing artists and dyers with a stable, deep blue previously unavailable in exactly this tonal range.
In art and fashion, these deep blues became associated with naval uniforms in the 18th and 19th centuries—the British Royal Navy popularized the 'navy' blazer—and painters used Prussian and synthetic ultramarine to achieve midnight atmospheres and shadows. In architecture and interior design the hue has been used to convey dignity and permanence, from ship interiors to gentleman’s libraries.
Today this shade is a staple for corporate identity, tech dashboards, and luxury goods where digital and material finishes meet; it functions as a modern neutral that still retains character, pairing well with metallics and warm accents while reading reliably across print and screens.
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.