What Color is Abyss
Abyss is a sophisticated blend of gray and teal, capturing the atmospheric quality of a foggy coastline. This mid-tone shade functions as a chameleon, appearing greener against warm tones and grayer next to cool blues. Its muted saturation provides a sense of visual serenity, acting as a grounding neutral that retains distinct character.
Additional Information
- Color Family: Gray
- Temperature: Cool
- Associated Season: Spring
- Complementary Color: #9E8F90
- Brightness: 153/255
- Saturation: 9%
Colors That Pair Well With Abyss
Complementary
Pair with Dusty Gray for a harmonious, balanced look. Great for backgrounds and accents.
High Contrast
Use Scorpion for maximum readability. Ideal for text or critical UI elements.
Harmonious Depth
Use lighter and darker shades for a sophisticated, cohesive design. Great for backgrounds, text, and subtle accents.
Color Variations
Tints (add white)
Tones (add grey)
Abyss History
Historically, colors resembling Abyss were achieved using Terre Verte (Green Earth) mixed with lead white or slate dust. In the 19th century, the refinement of Payne's Gray offered a closer synthetic approximation, favored by watercolorists for its cool, receding properties. These pigments were essential for rendering distant landscapes and turbulent seascapes, allowing artists to depict depth and atmosphere effectively.
During the Art Nouveau movement, muted teal-grays became prominent in stained glass and floral motifs, representing a break from the harsh primaries of the Victorian era. Later, mid-century modern architects utilized similar slate tones in raw concrete structures and textiles, appreciating the color's honest, industrial, and utilitarian aesthetic. It became a staple for distinguishing modern, forward-thinking design from traditional ornamentation.
Meaning & Psychology
This shade evokes a profound sense of detachment and introspection. Unlike warmer neutrals which invite closeness, Abyss maintains a cool distance, promoting focus and stability in chaotic environments. It is often associated with the quiet stillness found before a storm or the silence of deep water, encouraging mental clarity and reducing visual fatigue.
Culturally, gray-greens represent balance and renewal without the aggressive energy implied by bright vegetation. In corporate psychology, this hue implies reliability and technological sophistication, often used to suggest a futuristic yet grounded perspective. It signals intelligence and composure, lacking the emotional volatility of red or the melancholy sometimes associated with pure blue.
In Nature
In the natural world, Abyss appears in the dusty, waxy coating of Eucalyptus leaves and the protective surface of succulents like agave. It mirrors the turbulent, frothy water of a stormy sea, where sediment mixes with ocean spray to desaturate the water's color. Geologically, this hue is found in raw slate and weathered river stones, blending seamlessly into riparian environments.
How To Use Abyss
Abyss serves as an exceptional alternative to standard corporate grays, adding subtle chromatic interest to branding materials without overwhelming the eye. It pairs effectively with natural wood textures and metallic finishes like brushed brass, creating a modern, organic luxury aesthetic suitable for interior design and fashion.
For digital interfaces, this color lacks sufficient contrast against white for body text, posing accessibility issues for visually impaired users. It functions best as a background element or secondary container color. Designers must ensure foreground elements use dark charcoal or black to maintain readability and WCAG compliance.
Related Words
Curated Palettes
Nordic Coast
A cool, desaturated palette inspired by frozen shorelines and Scandinavian minimalism.
Oxidized Copper
Contrasting earthy rust tones with the cool patina of Abyss for a dynamic, industrial look.
Morning Fog
A soft, analogous gradient of greens and grays evoking a misty forest floor.
Color Conversions
Color Blindness Simulation
CSS Snippets
color: #8F9E9D;
color: rgb(143, 158, 157);
background-color: #8F9E9D;
border: 3px solid #8F9E9D;
box-shadow: 0 4px 12px #8F9E9D66;
background: linear-gradient(135deg, #8F9E9D 0%, #ffffff 100%);

Shop Premium Products in Abyss
This isn't just a mockup. We'll custom make high-quality home decor in this exact shade, just for you.
Ships in 3-5 daysSecure Checkout
Product Details
Add a touch of luxury to your home with our premium Eco Velvet cushions. Soft to the touch, these cushions are perfect for adding comfort and style to any room.
- Material: Soft Eco Velvet.
- Feel: Velvety soft finish.
- Print: Double-sided, all-over vibrant color using water-based inks.
- Care: Machine washable at 30°C.
- Construction: Handmade to order with a concealed zipper.
Eco Credentials
We believe in sustainable style. Our cushions are crafted with the planet in mind.
- Made to Order: Produced only when you order, eliminating overproduction and waste.
- Water-Based Inks: Printed using neo-pigment, water-based inks that are non-hazardous, toxin-free, and vegan-friendly.
- Local Fulfilment: Produced locally where possible to reduce carbon emissions from transport.
- Vegan Friendly: No animal products are used in the production of these cushions.
What Goes With Abyss?
Explore color palettes containing Abyss and discover harmonious combinations for your designs.
Analogous
Complementary
Triadic
Monochromatic
Accessibility
Contrast with Black and White
Contrast with Black
UI Examples
"Color is a power which directly influences the soul."
Contrast Ratio
Contrast with White
UI Examples
"Color is a power which directly influences the soul."
Contrast Ratio
Closest Color Matches
Similar Colors
View all Gray colors →Colors with similar hex values and appearance to Abyss
Frequently Asked Questions
What is the hex code for Abyss?
What colors go with Abyss?
Is Abyss accessible for text?
How do I use Abyss in CSS?
You can use Abyss in CSS with its hex code. Here is an example class:
.abyss {
background-color: #8F9E9D;
color: #FFFFFF;
}For more snippets including gradients, see the CSS snippets section.