Color Conversion
#032b52Midnight Harbor
About this color
Calm authority with reserved sophistication
A profoundly dark, saturated navy with a crisp blue core that reads almost black in low light yet reveals rich cobalt depth in bright light. It evokes secure, maritime authority — calm, reserved, and quietly confident.
Designer tip
Use Midnight Harbor as a primary header or hero background with large, high-contrast off-white typography (e.g., 700 weight sans at 32–48px) and a warm metallic accent (use hex C9A23F) for CTAs to achieve premium clarity and tactile warmth.
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
- Financial services branding
- Use Midnight Harbor for primary logos, trust bars, and app nav to communicate stability and expertise; pair with warm gold accents for prestige and legibility.
- Website hero backgrounds
- As a hero background it creates dramatic contrast for large white type and imagery, anchoring the page while keeping focus on CTAs and product shots.
- Luxury packaging
- Applied to textured paperboard boxes or watch dials it reads as premium and refined, especially when combined with metallic foils or embossing.
- Corporate uniforms
- Ideal for uniforms or blazers where durability and a professional silhouette are needed — the shade hides wear while preserving a crisp shape.
- Residential accent wall
- Works as an accent wall in a study or library to create depth and intimacy without feeling oppressive, especially with warm wood and brass fixtures.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- Use Midnight Harbor as a grounding background with high-contrast off-white or warm metallic accents for hierarchy and legibility.
- Pair it with a single warm accent (gold or burnt orange) to create a refined split-complementary palette that preserves elegance and readable CTAs.
- Introduce it at large areas (headers, walls, packaging panels) but add texture (matte linen, brushed metal, or subtle grain) to avoid a flat, heavy appearance.
Avoid this
- Don't use it as the only dark element alongside many other dark neutrals — it will make the design muddy and reduce contrast.
- Don't pair it with bright neon colors or saturated magentas that clash and make the navy feel dated.
- Don't set small, thin light-colored text on top of it at small sizes; the low lightness reduces legibility unless weight and size are increased.
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
#D9822B
Warm burnt-orange complement — a direct complementary harmony that provides visible CTA contrast and a luxurious warmth against the cool navy.
#0EA7C0
Analogous teal-cyan — keeps the palette harmonious while brightening the visual field; useful for secondary accents and data visualizations.
#C9A23F
Muted gold — a split-complementary/luxury accent that reads as metallic and premium when used for small UI elements or packaging foil.
Typography hints
Historical significance
The story and heritage of this color
Deep ultramarine and indigo tones have long roots: natural indigo dyes were used across Asia and Africa for textiles and ceremonial garments, while Prussian blue (developed in early 18th-century Europe) introduced a stable synthetic deep blue that influenced art and industry. Dark navy tones later became standardized through military uniforms and maritime signaling, which cemented blue's association with authority and the sea.
In art and architecture, dark blues were used sparingly to create depth and to anchor compositions — from Dutch maritime paintings to neoclassical interiors where blue was paired with gilt. In fashion, the navy blazer and naval uniform became symbols of service and polished restraint, migrating into civilian suiting and eventually becoming a wardrobe staple.
Today this kind of deep navy is both classic and versatile: it appears in tech and finance branding for reliability, in luxury goods for understated elegance, and in contemporary interiors as a way to add drama without the heaviness of black. Its enduring presence comes from the balance it strikes between depth and readability across media and materials.
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.