Color Conversion
#84a0a0Saltwater Slate
About this color
Calm confidence with gentle resilience
A soft, desaturated teal with equal parts blue and green that reads cool and chalky rather than bright. It feels composed and quietly resilient, like a steady breath in a coastal room.
Designer tip: Use Saltwater Slate (#84A0A0) as a mid-tone backdrop and add a single warm accent (e.g., muted terracotta) at 10–20% area coverage to create focal contrast without losing the color's calming effect.
Best use case: A wellness brand's website hero section where the color provides a calming backdrop for white typography and natural-product photography.
Psychology
Psychological traits and emotional associations
Effect
In a space or UI, Saltwater Slate soothes and reduces visual noise while retaining a cool, modern presence. It helps users feel grounded and focused without imposing formality.
Emotional impact
A sense of quiet reassurance and lowered agitation.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western contexts this teal evokes coastal living, wellness, and mid-century modern design; in East Asian palettes muted teal-green tones are often linked to nature and balance; in Mediterranean cultures similar shades read as sea-linked and restorative, recalling saline landscapes and ceramics.
Positive associations
Associated with wellness and eco-conscious brands in Western and Northern European design, and with nature and balance in Japanese and Korean aesthetics.
Negative associations
In some conservative corporate settings (Western) it can feel too informal or under-serious compared with navy; in certain Middle Eastern contexts very muted greens can lack the cultural symbolism of richer greens tied to prosperity.
Design applications
How this color is used across different fields
Brand identity for a boutique spa
Works as the primary brand color to suggest relaxation and clean, natural ingredients while pairing with warm neutrals for a human touch.
Interior paint for a bathroom or bedroom
Creates a restful atmosphere that visually recedes, especially when used on three walls with a slightly lighter trim to keep the space airy.
Product packaging for botanical skincare
Conveys natural efficacy and premium restraint when used as a flat matte label color with cream paper stock and restrained typography.
Digital dashboards and data visualizations
Serves as a non-distracting mid-tone for backgrounds or secondary data lines, improving focus without flattening hierarchy.
Textile upholstery in hospitality
Hides wear and pairs well with natural linens and brass accents to create an approachable yet refined palette.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Pair with a single warm accent (muted terracotta or soft brass) at 5–20% coverage to create focal points without overwhelming the calm.
- + Use as a mid-tone background and place high-contrast copy (white or very dark slate) over it to preserve legibility and hierarchy.
- + Favor matte or low-sheen finishes in interiors to keep the color feeling soft and tactile rather than slick.
Avoid this
- - Don't pair it with saturated neon greens or brights that fight its muted character and create visual discord.
- - Don't use it as the sole high-contrast element for UI controls—use bolder hues for call-to-action buttons.
- - Don't combine with very warm, saturated golds at large scale; they will create a dated or clashing effect.
Fundamentals: Maintain clear contrast and a single warm accent to preserve visual focus while keeping the overall mood calm.
Overuse risk: If Saltwater Slate dominates a design it can make spaces or interfaces feel overly muted and somnolent, reducing perceived energy and visual hierarchy. Use accents and contrast to prevent the palette from becoming monotonous.
Brand fit
Industries and brand archetypes that align with this color
Trust level
medium
Seriousness
balanced
Trend
Color pairing
Colors that complement and enhance this shade
#A08484
Complementary muted rose — provides soft contrast and warmth while using complementary harmony to create visual interest without high saturation.
#84A084
Analogous muted sage — extends the green axis for a harmonious, nature-driven palette using analogous harmony.
#5F84A0
Deeper muted slate blue — creates a tonal triadic/analogous accent for depth and layered coolness while maintaining cohesion.
Typography hints: For body text on a Saltwater Slate background use a humanist sans-serif (e.g., Inter, FF Meta) at 16–18px with 500–700 weight in white or very light grey; for headings choose a slab or geometric sans (e.g., GT Sectra, Neue Haas Grotesk) at bolder weights (600–800) to create clear hierarchy.
Historical significance
The story and heritage of this color
Variations of muted teal have long existed in material culture where blue and green pigments intersected — early examples were achieved by combining blue (azurite or indigo) with green earths or by using copper-based pigments such as verdigris in small amounts to nudge blues toward green. Artists often toned these mixtures with umbers or carbon blacks to achieve the chalky, desaturated quality seen in Saltwater Slate.
Through the 18th and 19th centuries, teal and blue-greens appeared in ceramics, coastal architecture, and textiles; the Arts & Crafts and later mid-century modern movements embraced softened, nature-referential teals for wallpaper, glazes, and upholstery. Industrial advances in the 19th century (viridian and later phthalocyanine pigments) made these cooler, more stable teals more widely available and consistent.
In contemporary design Saltwater Slate-like tones are popular in wellness branding, Scandinavian interiors, and sustainable packaging because they read both modern and organic. Today digital color reproducibility and eco-friendly dyes allow this muted teal to appear across web, print, and product finishes with consistent, subtle presence.
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.