Color Conversion
#02866fMangrove Teal
About this color
Grounded renewal with quiet assurance
A saturated blue-green with deep teal depth and a cool, slightly shadowed intensity. It feels rooted, restorative, and quietly confident, like a shaded mangrove pool at midday.
Designer tip: Use #02866F as a dominant accent against a warm, desaturated coral (complementary) to create energetic contrast; keep the teal at 60–80% coverage and the coral as small call-to-action elements at 5–10% to preserve the teal's calming authority.
Best use case: Sustainable premium brand identity (logo + packaging) for an outdoor or wellness brand where the shade communicates natural authority and eco-luxury.
Psychology
Psychological traits and emotional associations
Effect
In spaces and designs this teal soothes and centers attention while suggesting competence and ecological intent. It reduces visual noise compared with saturated blues, making it effective for signage and focal elements that need to read as reliable and contemporary.
Emotional impact
Viewers most commonly feel reassured and quietly uplifted when they see this color.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western branding this teal reads as contemporary naturalism and trustworthiness; in East Asian contexts green-blue tones can suggest health and longevity; in some coastal cultures it conjures sea, navigation, and resources. Across cultures it often balances nature associations with a modern, design-forward sensibility.
Positive associations
Associated with environmental stewardship and health in many Western and global sustainability movements (Western/global); conveys longevity and natural balance in parts of East Asia (Japan, China).
Negative associations
In some traditional South Asian contexts green-blue mixed with certain patterns can be associated with funerary cloths or be considered too somber for celebratory events (South Asia); if used with low contrast text it can feel heavy or murky in poorly lit spaces (general).
Design applications
How this color is used across different fields
Brand identity for sustainable goods
Works as a primary brand color to communicate eco-luxury and reliability on labels, boxes, and digital marks because it reads both natural and premium when paired with warm neutrals and metallic accents.
Wellness or spa interiors
As a wall accent or tile color it calms a room while adding depth; use in water-adjacent areas or treatment rooms for an anchored, restorative atmosphere.
Outdoor gear and apparel trims
Functions as a distinct, legible accent against technical fabrics and neutrals, signaling outdoor credibility without the sportiness of neon greens.
UI accents for sustainability apps
Use for primary buttons and progress bars to convey environmental intent and trustworthiness, keeping accessibility contrast in mind by pairing with off-white text.
Luxury packaging
As a box or label base it feels premium and nature-forward; combine with matte finishes and subtle foil stamping for upscale tactile presence.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Pair #02866F with a warm, desaturated coral for high-impact CTAs while keeping the coral at small doses to avoid aggression.
- + Use matte or low-sheen materials when applying this teal in interiors to emphasize its natural, grounded quality.
- + Ensure accessible contrast by placing light neutrals (e.g., off-white) or bold white text over the color; test at body and large text sizes for legibility.
Avoid this
- - Don't combine with saturated neon greens or bright cyan — these clash and reduce the teal's sophistication.
- - Don't use as the sole background color across large swathes of a UI without contrast elements; it can feel heavy and reduce perceived lightness.
- - Don't pair with highly chromatic magentas or purple neons that create visual tension and compete with the teal's serene tone.
Fundamentals: Preserve contrast: always balance this deep teal with warm neutrals or light highlights to keep designs legible and lively.
Overuse risk: If it dominates a design, the result can feel heavy and introspective, reducing perceived brightness and approachability; designs may read as somber rather than refreshing. Use supporting neutrals and strategic highlights to maintain balance.
Brand fit
Industries and brand archetypes that align with this color
Trust level
high
Seriousness
balanced
Trend
Color pairing
Colors that complement and enhance this shade
#D94F3B
Warm desaturated coral — complementary contrast that activates the teal for CTAs and focal elements (complementary harmony).
#C9A14B
Muted warm gold — provides luxe contrast and a natural-periodic accent that reads as upscale and earthy (split-complementary/contrast harmony).
#0AA089
Softer aqua-teal — an analogous, lighter tone that creates depth layers and calm gradients without clashing (analogous harmony).
Typography hints: For text on #02866F use a clean sans-serif in a heavier weight for headings (e.g., 600–800 weight of a geometric sans like Montserrat or Proxima Nova) and a medium weight (400–600) for body copy when on light backgrounds; for text placed on the teal (dark background), use bold/semibold off-white (#F5F5F) or warm ivory and avoid thin strokes to maintain legibility.
Historical significance
The story and heritage of this color
Bluish-greens have been noted since antiquity where natural copper oxidation and mineral deposits created verdigris-like greens used in objects and glazes. With the industrial age and invention of synthetic pigments in the 18th–19th centuries, richer, more stable blue-greens such as viridian and phthalocyanine greens became available to artists and manufacturers.
Artists of the 19th and 20th centuries used deep teal and viridian tones to suggest aquatic depth and botanical lushness—seen in landscape works and in Art Nouveau palettes that referenced organic forms. Architects and textile designers later adopted similar tones for mid-century modern schemes where cool, saturated greens paired with warm woods created sophisticated domestic interiors.
Today this precise deep teal carries modern cultural weight: it is widely adopted by sustainable brands, boutique hospitality, and product designers who want to read both contemporary and natural. Its stability and versatility make it a frequent choice in digital design systems, packaging, and high-end outdoor apparel, keeping it relevant in current aesthetic trends toward nature-driven, muted colorways.
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.