Color Conversion
#988c85
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 #988C85?
- #988C85 is Hearthstone Taupe – A soft, desaturated taupe with warm brown undertones and a subtle gray veil. It feels quietly grounded and familiar, like an heirloom fabric smoothed by time.
- What does Hearthstone Taupe symbolize?
- heritage and craft, reliability and steadiness, subtle luxury, maturity and restraint, earth and grounding. In Western contexts this taupe reads as understated elegance and workmanship; in Japanese aesthetics it aligns with wabi-sabi values of imperfection and aged beauty; in Mediterranean or Middle Eastern contexts it can reference sun-baked earth and traditional ceramics, expressing warmth and endurance.
- Where is Hearthstone Taupe used in design?
- In a space or design, this shade reduces visual noise and encourages slower attention, making details and textures read richer. It calms high-energy elements and supports tactile materials like wood, wool, and paper.
- Which colors go well with Hearthstone Taupe?
- Hearthstone Taupe pairs well with #6A8FA6, #B59F96, #6AA682. #6A8FA6: Desaturated steel blue; a complementary/cool counterpoint that creates low-contrast, balanced harmony and a calm focal accent.. #B59F96: Warm taupe/tan; an analogous layering color that enriches the palette while preserving tonal subtlety.. #6AA682: Muted sage green; a soft triadic-like accent that introduces organic freshness without breaking the restrained mood..
- How does Hearthstone Taupe affect mood?
- grounded comfort with quiet sophistication Viewers typically feel reassured and subtly nostalgic when encountering this color. Key traits: stability, maturity, reliability, restraint, comfort.
- Which industries use Hearthstone Taupe?
- Hearthstone Taupe is commonly used in Artisanal food & beverage (coffee, chocolate), Skincare & apothecary, High-end furniture & home goods. It fits brand archetypes like The Caregiver, The Sage.
- What is the history of Hearthstone Taupe?
- Earthy taupes like this one trace back to naturally occurring ochres and umbers used since antiquity; raw umber and burnt umber—with iron and manganese oxides—produced similar muted brown-grays used by early painters for underpaintings and flesh shadows. Artists in ancient Egypt, Rome and later European ateliers exploited these pigments for their stability and subtle shading qualities.
- How to use Hearthstone Taupe in design?
- Maintain clear tonal contrast—use Hearthstone Taupe as a mid-tone anchor between a darker accent and a lighter neutral to preserve hierarchy and legibility. Best practices: Pair with a single cool desaturated blue for contrast and clarity (use the blue for CTAs or focal elements).; Layer with textured materials—raw wood, stone, linen—to amplify tactile richness.; Use as a mid-tone in a three-value palette: a dark anchor, Hearthstone Taupe as mid, and a very light neutral for highlights..
- Is Hearthstone Taupe accessible?
- Contrast ratio on white: 3.27:1, on black: 6.43:1. Passes WCAG AA for normal and large text.