Color Conversion
#3ac3c7
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.
Technical Formats
Practical Formats
Color Analysis
Blindness Simulator
Creative Aspects
Frequently asked questions
- What color is #3AC3C7?
- #3AC3C7 is Caribbean Mint – A bright, clear aqua that sits between cyan and teal with a lively, salt-sparkle clarity. It feels invigorating and clean — a confident splash of seaside freshness.
- What does Caribbean Mint symbolize?
- renewal and freshness, clean water and hygiene, modern health and vitality, calm optimism, environmental friendliness. In Western branding it reads as fresh and tech-forward; in many Middle Eastern and Mediterranean contexts it connects to traditional glazed tiles and water symbolism; in parts of the American Southwest it evokes turquoise jewelry and healing, while in East Asia lighter cyan tones are often associated with cleanliness and modernity.
- Where is Caribbean Mint used in design?
- In a space or interface, this color tends to make environments feel breathable and modern while keeping stimulation moderate. It encourages action without the aggressiveness of true reds and adds perceived cleanliness to surfaces and layouts.
- Which colors go well with Caribbean Mint?
- Caribbean Mint pairs well with #C73A3C, #3AC77F, #3A77C7. #C73A3C: Complementary contrast — a warm coral-red anchor that creates energetic visual tension and makes the aqua pop (complementary harmony).. #3AC77F: Analogous green — extends the sea-inspired palette for a calm, botanical feel and smooth gradient transitions (analogous harmony).. #3A77C7: Analogous blue — deepens the palette for professional, maritime moods and provides strong mid-to-dark contrast (analogous harmony)..
- How does Caribbean Mint affect mood?
- Refreshing clarity with approachable energy Viewers feel subtly uplifted and reassured — a gentle nudge toward engagement. Key traits: clarity, purity, approachability, energy, trustworthiness.
- Which industries use Caribbean Mint?
- Caribbean Mint is commonly used in Wellness & spa, Consumer health & personal care, Sustainable apparel/outdoor gear. It fits brand archetypes like The Caregiver, The Explorer.
- What is the history of Caribbean Mint?
- This bright cyan-teal sits in the long lineage of turquoise and aqua hues that date to antiquity: ancient Egyptians and Mesopotamians produced similar tones through copper-based faience glazes and ground minerals, while Mesoamerican cultures inlaid turquoise into ceremonial objects. Early pigments resembling this tone were not single mineral paints but mixtures and glazes that achieved that luminous blue-green appearance.
- How to use Caribbean Mint in design?
- Maintain clear contrast and a neutral grounding element (warm off-white or deep charcoal) so the color reads as a purposeful accent, not the entire palette. Best practices: Pair with a warm off-white (e.g., F5F5F5) and deep charcoal for high-contrast layouts and legible CTAs.; Use at 40–60% coverage as an accent color (buttons, icons, small panels) rather than full-bleed backgrounds to preserve energy balance.; Combine with natural textures (matte paper, unglazed ceramic) to communicate sustainable luxury..
- Is Caribbean Mint accessible?
- Contrast ratio on white: 2.14:1, on black: 9.81:1. Passes WCAG AA for normal and large text.