Color Conversion
#003b49North Atlantic Ink
About this color
Reserved maritime authority
A dense, near-black teal that reads as deep sea water caught between blue and green with a slate undertone. It feels resolute and quietly maritime—reassuring, cool, and composed like a ship's hull at dusk.
Designer tip
Use #003B49 as a full-bleed hero background and place UI key actions in a warm peach accent (FFC4B6) at 18–22px weight 600 to maximize perceived contrast without harshness.
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
- Brand identity for maritime or offshore services
- Use as the primary brand field color to evoke sea-born experience and reliability; pair with warm coral or soft sand accents for approachability.
- Dashboard UI and data visualization backgrounds
- Apply as a dark canvas to reduce glare and let bright data colors pop—ensure metric labels use >= 4.5:1 contrast (light neutrals or warm accents).
- Hotel or boutique lobby paint
- Use on an accent wall or behind the reception desk to create a calm, luxurious anchor that reads sophisticated in warm lighting.
- Men’s outerwear fabric
- Works as a seasonal coat or blazer color that reads modern and rugged; texture (tweed or waxed cotton) adds warmth and prevents austerity.
- Premium packaging for spirits or grooming products
- Use as the base carton color to communicate craft and depth; foil or matte copper accents elevate perceived value.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- Pair with a warm complementary accent (FFC4B6) for readable CTAs and to soften austerity.
- Use as a rich background and keep typography in high-contrast neutrals (FFFFFF or EDEDED) for accessibility.
- Introduce texture (linen, matte finishes, brushed metals) when used in interiors or packaging to prevent a flat, heavy appearance.
Avoid this
- Don’t use as the sole dark for small UI elements (icons, thin rules) — it can disappear against other darks.
- Don’t pair only with cold blues or blacks; that increases a sterile, overly somber feel.
- Don’t use without testing under warm LED and incandescent lighting—its undertone shifts and can look nearly black in dim light.
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
#FFC4B6
Direct complementary contrast: warm peach provides visual pop and readable CTAs against the deep teal (complementary harmony).
#006D72
Analogous harmony: a slightly lighter teal keeps a cohesive maritime palette while providing tonal contrast for layered UI elements.
#A63B00
Split-complement accent: a burnt orange/copper adds warmth and luxury without clashing, ideal for metallic foils or callouts (split-complementary harmony).
Typography hints
Historical significance
The story and heritage of this color
Deep blue-greens like this one have roots in early pigment experiments where copper- and iron-based compounds produced teal and turquoise hues; artists and dyers achieved darker blue-greens by mixing blue minerals (azurite, ultramarine) with green earths or by layering indigo over yellow grounds. The arrival of Prussian Blue in the 18th century and later synthetic copper phthalocyanine pigments in the 20th century made richer, more stable deep teals widely available.
Through the 19th and 20th centuries the shade migrated from craft and tilework into fashion and architecture—naval uniforms, Victorian glazed tiles, and later Art Deco and mid-century interiors favored saturated, dark teals for cabinetry, upholstery, and wallpaper. Designers used the color to suggest modernity while retaining a link to natural water tones.
Today, this deep teal is prominent in branding for marine services, fintech, and luxury hospitality as a versatile neutral-alternative; modern pigment technology and digital color management allow precise reproduction across textiles, print, and screens, giving designers a reliably reproducible option for a moody, authoritative palette anchor.
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.