Color Conversion
#012731Abyssal Harbor
About this color
Calm, reserved confidence with quiet depth
A near-black, oceanic teal that reads as an inked slice of cold water at twilight. It feels anchored and intentionally reserved, like a safe quay in stormlight.
Designer tip
Use #012731 as a full-bleed background for premium interfaces or landing pages and apply a warm metallic accent (try CBAA57) for CTAs at 18–22px semibold to create high-contrast, luxe callouts.
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 logistics
- Uses as a primary brand color conveys nautical competence and reliability; pairs well with brass or warm neutrals to reference ship fittings and tradition.
- Fintech dashboard backgrounds
- As a full-screen background, it reduces glare and foreground noise, making data visualizations and accent metrics pop when paired with warm highlights.
- Museum or gallery wall paint
- Works as an exhibition backdrop to deepen perception of artifacts and make muted metals and ceramics read richer and more dimensional.
- Luxury packaging (spirits or fragrance)
- Provides a premium backdrop that elevates metallic foils and embossed logos, communicating craft and age without looking trendy.
- Home study or library paint
- Creates a cocooned, contemplative atmosphere that reduces eye fatigue and enhances the perceived quality of wood furniture and leather-bound books.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- Use it as a dominant background and introduce a single warm metallic or warm terracotta accent for CTAs to create luxe contrast.
- Test accessibility contrast with white and warm neutrals; keep body text at 16px+ and use bold weights for headings to ensure legibility.
- Layer subtle texture (matte paper grain or soft noise) when using in print to avoid a flat, inky look.
Avoid this
- Don't pair it only with cold, highly saturated blues — this can make the palette muddy and indistinct.
- Don't use as the sole color for small interactive elements (icons, microcopy) without increasing weight or contrast.
- Don't rely on it to convey cheerfulness or whimsy — it naturally 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
#7A2F01
A warm burnt-terracotta complementary accent — creates high-contrast complementary harmony and evokes brass fittings against a wet hull.
#0A5F6B
A slightly lighter analogous teal that expands the tonal range while preserving cohesion in an analogous harmony system.
#CBAA57
A muted warm gold that provides an elegant metallic contrast (split-complementary feel) and reads as premium foil on this deep background.
Typography hints
Historical significance
The story and heritage of this color
Deep teal tones trace back to early pigment experimentation where indigo, copper-derived greens (verdigris), and later Prussian blue were blended to reach blue-greens darker than natural dyes. In seafaring communities those shades were reinforced by the visual world of rigging, wet rope, and the cold, shadowed water around harbors.
In art and architecture the near-black teal has been used to create depth and reverence: from the glazed tiles of Middle Eastern mosques to the shadowed backgrounds in 18th- and 19th-century marine painting. Fashion adopted such tones for evening wear and suiting when designers sought alternatives to pure black that still read formal and durable.
Today this specific dark teal has modern relevance in branding, UI and interior specifiers who want a disciplined, contemporary alternative to navy or black; it reads as timeless yet contemporary, frequently used where quiet luxury and maritime references are desired.
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.