Color Conversion
#015e85Ironbound Harbor
About this color
Calm authority with maritime depth
A dense, marine-teal with a shadowed cyan core and an almost metallic depth. It evokes the steady, composed confidence of a ship moored in storm-ready harbor light.
Designer tip
Use #015E85 as a primary UI action color paired with a warm complementary accent (around FF7A3B) for call-to-action buttons — keep button surfaces flat and use a 2–3px lighter border or shadow to readably lift elements against dark backgrounds.
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 brand identity
- Use as a primary brand color to signal stability and competence; it pairs well with a warm orange accent for CTAs to create urgency without undermining trust.
- Mobile banking or security UI
- Works as a background or header color to imply safety and reliability while allowing bright icons and white typography to pop for legibility and hierarchy.
- High-end outerwear
- Applies to shell fabrics and trim to suggest ruggedness and marine performance; it reads premium when combined with brass hardware and textured canvas.
- Hospitality interiors (lobbies, bars)
- Use as an accent wall or banquette upholstery to create an intimate, anchored atmosphere when balanced with warm wood and soft lighting.
- Product packaging for technical goods
- Conveys precision and durability on labels and boxes for tools, electronics, or outdoor gear when contrasted with matte light neutrals and tactile finishes.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- Pair #015E85 with a warm complementary accent (approx. FF7A3B) for CTAs to achieve high perceived trust with visible action contrast.
- Use high-quality matte or satin textures in print or materials to emphasize depth — avoid glossy finishes that can look cheap on this dark teal.
- Balance with light, warm neutrals (cream or warm gray) to prevent the color from feeling institutional; apply at 20–40% coverage as an anchor rather than the overwhelming background.
Avoid this
- Don’t place thin hairline typeweights in white directly on large fields of this color — low contrast reduces legibility.
- Don’t mix with overly saturated neon greens or pinks that create visual conflict; they clash with its maritime restraint.
- Don’t use it as the sole primary background in hospitality or retail without offsetting warmth; it can feel cold and uninviting.
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
#FF7A3B
Warm complementary orange creates high-contrast complementary harmony—ideal for CTAs and highlights that need immediate attention.
#007A6B
Analogous teal-green (cool harmony) deepens maritime associations and supports layered tonal systems for backgrounds and overlays.
#D9C9B3
Warm beige neutral provides soft, high-contrast grounding (achromatic + warm accent) making layouts feel refined and legible.
Typography hints
Historical significance
The story and heritage of this color
Deep blue-greens like #015E85 trace their visual lineage to early synthetic blues of the 18th and 19th centuries (Prussian blue, then later aniline dyes) and to maritime paints developed for hulls and rigging. The human eye has long associated this region of color with seawater and iron-clad ship fittings, giving the shade an industrial-maritime pedigree.
In art and architecture, variations of this teal emerged in nautical uniforms, ceramic glazes and later in modernist interiors as a steady, sober alternative to pure blue. Fashion appropriated these tones in utility wear and workwear—engineered textiles, pea coats and rain shells—where the color’s practicality and depth matched functional aesthetics.
Today this exact shade has renewed relevance across tech, sustainable branding and premium outdoor goods: it reads as both contemporary and rooted, fitting interfaces that need authority and physical products that require a weather-ready, trustworthy look. Designers draw on its maritime history while applying it to digital trust signals and material finishes in a post-industrial palette.
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.