Color Conversion
#3e6174
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 #3E6174?
- #3E6174 is Stormglass Teal – A muted deep teal with clear blue lean and a smoky gray undertone, like a weathered plate of ocean under low light. It evokes steady resilience and quiet competence—a composed hush rather than loud drama.
- What does Stormglass Teal symbolize?
- stability and resilience, practical professionalism, navigational/nautical ties, subdued luxury, contemplative solitude. In Northern European design, similar slate-teals are associated with coastal life and functional elegance; in East Asian contexts cool desaturated blues can suggest humility and balance; Western corporate usage reads as dependable and serious without being stern.
- Where is Stormglass Teal used in design?
- In a space or interface, this color reduces perceived visual noise and encourages focus by muting high-energy contrasts. It signals reliability while keeping environments approachable rather than clinical.
- Which colors go well with Stormglass Teal?
- Stormglass Teal pairs well with #C19E8B, #2E7A6A, #74407A. #C19E8B: Complementary—this warm desaturated terracotta provides balanced contrast that brightens CTAs without clashing.. #2E7A6A: Analogous—deep green-teal harmonizes tightly (analogous) to create a layered, natural palette for interiors or packaging.. #74407A: Split-complementary/triadic—muted plum introduces a rich accent that keeps the palette sophisticated while providing color depth..
- How does Stormglass Teal affect mood?
- Calm confidence with quiet authority A sense of steadied calm and professional reassurance. Key traits: dependability, measured authority, thoughtfulness, sophistication, calm focus.
- Which industries use Stormglass Teal?
- Stormglass Teal is commonly used in financial technology (B2B), marine and outdoor gear, industrial design and architecture firms. It fits brand archetypes like The Sage, The Explorer.
- What is the history of Stormglass Teal?
- This deep, muted teal sits in the historical lineage of blue-green pigments like indigo and Prussian blue blended with earth tones. Prussian blue emerged in early 18th-century Europe and, when mixed with green earths or umbers by painters and dyers, produced slatey teal variations used in military coats, maritime sails, and domestic textiles.
- How to use Stormglass Teal in design?
- Respect contrast and temperature: counterbalance its cool muted depth with strategic warm accents and textures to maintain visual interest and legibility. Best practices: Pair with a warm terracotta or muted coral accent for CTAs to create readable contrast and emotional warmth.; Use as a large background with high-contrast pale text (off-white ~F5F7F7) for legibility on digital screens.; Combine with natural materials (oiled oak, leather, matte brass) to emphasize refined, tactile warmth..
- Is Stormglass Teal accessible?
- Contrast ratio on white: 6.63:1, on black: 3.17:1. Passes WCAG AA for normal and large text.