Color Conversion
#202020Obsidian Slate
About this color
Quiet authority with refined restraint
A dense, matte near-black with the slightest warmth that reads as sophisticated charcoal rather than pure black. It evokes composed restraint — the hush of a gallery at closing, precise and quietly commanding.
Designer tip: Use #202020 as the primary dark background for product photography or dark-mode interfaces and reserve a single saturated accent (e.g., FFC857) for CTAs and focal points to create instant visual hierarchy.
Best use case: High-end e-commerce product pages (dark-mode hero and product canvases) where photographed goods need to pop without the backdrop reading as 'pure black.'
Psychology
Psychological traits and emotional associations
Effect
In a space or layout #202020 anchors the composition, reducing visual noise and sharpening attention toward lighter or saturated accents. It tends to make environments feel smaller but more intimate and focused, signaling seriousness and craft.
Emotional impact
A composed calm that reads as confident and exacting rather than emotive or exuberant.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western fashion and branding, near-black tones signal luxury and formality; in East Asia (particularly Japan) deep charcoals connect to wabi-sabi restraint and craft; in parts of Africa, deep blacks and charcoals are used both in ceremonial attire and contemporary design, often implying dignity or prestige. Across cultures the shade sits between mourning black and practical workwear, giving it flexible meaning depending on context.
Positive associations
Associated with elegance and craftsmanship in Western fashion and Japanese design (Japan, Western Europe).
Negative associations
May evoke mourning or somberness in some Western and African contexts if used without warmer accents (Western Europe, parts of Africa).
Design applications
How this color is used across different fields
E-commerce hero backgrounds
As a near-black backdrop for product photography it preserves shadow detail better than pure black, letting fabrics and materials read with depth while keeping attention on the product.
Dark-mode UI
Works as a primary surface color that reduces eye strain while maintaining a high-contrast stage for colored accents and white typography.
Luxury packaging
Conveys premium quality on boxes and labels, pairing especially well with metallic foils or embossed textures to communicate craftsmanship.
Editorial design
Provides an elegant page background that frames photography and large typography without dominating imagery or color.
Fashion outerwear and accessories
As a textile color it reads less severe than true black, offering depth and a softer silhouette that suggests tailored refinement.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Use a single saturated accent color against #202020 to create a clear focal point (e.g., saffron or teal).
- + Introduce tactile finishes (matte, soft-touch, embossed) to differentiate surfaces when using this shade in physical products.
- + Test contrast at small sizes — for body text pair #202020 with white or very light gray at WCAG AA/AAA sizes and increase weight or size when needed.
Avoid this
- - Don't rely on #202020 alone to provide legibility for small, low-weight text without raising contrast or weight.
- - Don't mix it with multiple mid-tone grays of similar value — this flattens hierarchy and makes interfaces look muddy.
- - Don't use it as the sole brand color for playful or brightly emotional brands where warmth and approachability are primary goals.
Fundamentals: Maintain deliberate contrast — use #202020 to anchor and contrast, never to compete with your primary focal element.
Overuse risk: When #202020 dominates a design it can feel oppressive or overly somber and can obscure material texture; without contrasting accents it reduces perceived brightness and can make spaces feel smaller. Always introduce at least one lighter or saturated counterpoint to avoid visual fatigue.
Brand fit
Industries and brand archetypes that align with this color
Trust level
high
Seriousness
serious
Trend
Color pairing
Colors that complement and enhance this shade
#FFC857
Saffron amber provides a high-contrast complementary accent that reads luxe and warm against the neutral charcoal (complementary accent harmony).
#0ABAB5
A cool teal brings a crisp, modern triadic-like counterpoint that pops against the near-black while remaining elegant (triadic/accent harmony).
#A64B2A
Burnt terracotta introduces earthy warmth and vintage richness as a split-complementary accent, softening the shade's severity.
Typography hints: For body text on #202020 use a humanist sans (Inter, Roboto, or FF Meta) at 16–18px, weight 400–500 with 0.02–0.04em letter-spacing; use 600–800 for headings and consider a warm accent (FFC857) or pure white (FFFFFF) for headlines to ensure hierarchy and legibility.
Historical significance
The story and heritage of this color
Deep charcoals and near-black pigments have ancient origins: early humans used carbon-based blacks (lampblack, soot, bone char) in cave paintings and utilitarian objects; the specific near-black tone we call Obsidian Slate would historically have been achieved with controlled mixtures of carbon blacks and small amounts of earth pigments to avoid a flat, 'dead' black.
Throughout art and architecture, near-black tones have served practical and aesthetic roles — from Italian Renaissance underpainting and chiaroscuro studies to the industrial ironwork patinas of the 19th century and the minimalist palettes of 20th-century modernists. In fashion the 1920s–30s saw charcoal suiting used as a softer alternative to jet black; later, designers leaned on rich charcoals to communicate discreet luxury.
Today this shade is ubiquitous in technology and luxury branding: it reads modern and handcrafted simultaneously, favored for dark-mode interfaces, matte consumer electronics, and premium packaging where subtlety and depth matter more than the absolute black of earlier eras.
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 #202020?
- #202020 is Obsidian Slate – A dense, matte near-black with the slightest warmth that reads as sophisticated charcoal rather than pure black. It evokes composed restraint — the hush of a gallery at closing, precise and quietly commanding.
- What does Obsidian Slate symbolize?
- Authority and professionalism, Timeless luxury, Secrecy or discretion, Sophisticated minimalism, Endurance or permanence. In Western fashion and branding, near-black tones signal luxury and formality; in East Asia (particularly Japan) deep charcoals connect to wabi-sabi restraint and craft; in parts of Africa, deep blacks and charcoals are used both in ceremonial attire and contemporary design, often implying dignity or prestige. Across cultures the shade sits between mourning black and practical workwear, giving it flexible meaning depending on context.
- Where is Obsidian Slate used in design?
- In a space or layout #202020 anchors the composition, reducing visual noise and sharpening attention toward lighter or saturated accents. It tends to make environments feel smaller but more intimate and focused, signaling seriousness and craft.