Color Conversion
#111111Obsidian Whisper
About this color
Calm authority with quiet refinement
A near-absolute black with a barely perceptible depth that reads as intense charcoal in natural light. It evokes quiet authority and an intimate, contemplative hush.
Designer tip: Use #111111 as the primary background for product photography to make metallic or warm-gold accents pop; add a 2–4% lighter rim light (using a 5–10 px soft gradient) to separate subject edges from the near-black field.
Best use case: Luxury e-commerce product hero backgrounds where tiny highlights and metal finishes require deep, neutral contrast.
Psychology
Psychological traits and emotional associations
Effect
In a space or layout, this near-black recedes the background and brings the foreground into sharp relief, concentrating attention on shapes and highlights. It compresses perceived depth, making surfaces feel more tactile and finishes more premium.
Emotional impact
Viewers typically feel respect, seriousness, and concentrated focus when confronted with this deep near-black.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western contexts this deep black often signals luxury and formal wear (e.g., evening dress) and is used in mourning. In East Asian traditions (China, Japan), black can mean water, formality, and refined simplicity; in Japan it aligns with wabi-sabi austerity while in China it can denote experience and masculinity. In many African and Middle Eastern contexts, deep blacks appear in ceremonial textiles and jewelry, where they can represent both status and reverence.
Positive associations
Associated with luxury and formality in Western fashion (e.g., evening wear) and with refined simplicity in Japanese aesthetics.
Negative associations
Linked to mourning and death in many Western countries and sometimes viewed as forbidding or unapproachable in cultures that favor brighter ceremonial colors (notably some South Asian ceremonies).
Design applications
How this color is used across different fields
Luxury product photography background
Its near-black quality absorbs stray light and makes metallics and highlights read richer, creating an upscale presentation without the flatness of pure black.
Website dark-mode UI
Provides a low-glare canvas that improves perceived contrast for vibrant accents and reduces eye strain compared with absolute black in long-form interfaces.
Editorial cover design
Acts as a dramatic field for bold typography and single-color spot printing (e.g., gold foil) to create bookstore-impact with minimal elements.
High-fashion outerwear
Reads as deep charcoal in daylight and richly matte in urban lighting, giving garments an elevated, urban-luxe presence.
Home cinema or gallery interiors
Minimizes reflections and visual noise so screens or artworks become the unquestioned focal point while walls feel intimate and enveloping.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Pair with a single warm metallic accent (e.g., gold foil) for instant luxury contrast—limit accents to one or two elements.
- + Use subtle surface treatments (matte vs. satin) and micro-highlights (1–2% lighter borders or hairline strokes) to define edges against the near-black field.
- + For accessibility, ensure body text on #111111 has at least 15–20% lighter luminance (e.g., off-white) and meet WCAG contrast for size and weight.
Avoid this
- - Don’t rely on #111111 as a substitute for true black when absolute zero reflectance is required—this hue still shows subtle depth under light.
- - Don’t combine with multiple saturated accents at once; competing colors will fragment the intended focused luxury effect.
- - Don’t place low-contrast gray UI controls (mid-gray) directly on #111111—controls will disappear without clear borders or glow.
Fundamentals: Control contrast deliberately: #111111 should be the deepest anchor in the palette, not the only value—always provide lighter focal points and at least one contrasting accent.
Overuse risk: If #111111 dominates a design it can create a claustrophobic or overly severe atmosphere and negate warmth; without lighter anchors it flattens visual hierarchy and fatigues attention. Balance with measured highlights, textures, or warm accents to retain depth and approachability.
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
#D4AF37
Warm gold provides complementary, high-contrast luxury highlights—classic metallic accent pairing that reads as richness against near-black (contrast harmony).
#0FB3B3
A deep teal-cyan creates a refined split-complement contrast that adds modern vibrancy without jarring the composition (split-complementary harmony).
#B22222
A muted, deep crimson offers dramatic, elegant emphasis and a near-triadic warmth that stands out strongly on #111111 (triadic/adjoining contrast).
Typography hints: For headlines on #111111 use a high-contrast sans-serif like Inter or Helvetica Neue in 600–800 weight with tracking tightened; for body copy use 300–400 weight with off-white (#F5F4F2) or warm-gray text and line-height 1.45 to maintain legibility.
Historical significance
The story and heritage of this color
Black pigments have been used since prehistoric times—charcoal and soot were among the earliest marks humans made on cave walls, and by antiquity artisans refined carbon-based blacks (lampblack) and bone/ivory blacks. In medieval and Renaissance painting, bone black and carbon blacks were staples for deep shadows and glazes, while textile dyers and tanners produced dense blacks for garments and banners.
From the 16th to 19th centuries, deep blacks signaled wealth and restraint—Spanish and Flemish courts prized luxurious black cloth, and artists like Goya used deep tones to render dramatic psychological scenes. The 20th century codified black as modern luxury through fashion (Coco Chanel's little black dress) and art (Ad Reinhardt's near-black canvases), establishing near-black as both practical and conceptual.
Today this near-absolute black is ubiquitous in digital interfaces (dark modes), product finishes (matte electronics and camera bodies), and contemporary interiors that favor minimal, tactile palettes; designers and brands leverage its ability to create contrast, depth, and premium associations while avoiding the flatness of absolute #000000.
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.