Studio
BlackBackground.dev
Home/Solid Colors/Material Dark Background
OLED & Dark Color Utility

Material Dark Background & 4K Wallpaper Generator

Material Dark (#121212) is the global UI standard recommended by Google Material Design. By keeping pixels at a subtle 7% luminance level, it prevents OLED black smearing during rapid text scrolling while allowing layered drop shadows and cards to create visual elevation.

CSS Background Code
background-color: #121212;
/* RGB: rgb(18, 18, 18) | HSL: hsl(0, 0%, 7%) */
Theme Palette:
#121212rgb(18, 18, 18)hsl(0, 0%, 7%)
Color Palette Collection

Solid Color Library

Explore calibrated solid color screens, keying backdrops, and OLED displays across all 6 specialized categories.

Back to Pure Black →
Comprehensive Color Analysis

The Science, Psychology & Engineering of Material Dark Background

In-depth breakdown of human perception, digital product usability, and display hardware physics for material dark background (#121212).

1. Color Psychology

Cognitive & Mood Impact

Dark charcoal gray reduces eye strain by 70% compared to pure white, maintaining a soft, comfortable environment for late-night programming and reading.

2. UI/UX & Digital Design

Design Systems & Usability

Unlike pure #000000, #121212 allows UI designers to use elevation shadows and semi-transparent overlays to express surface depth.

3. Display Engineering

OLED & Subpixel Physics

On OLED panels, pixels remain in a low-power active state, eliminating the 10-20ms pixel turn-on delay that causes purple trailing and smearing on scrolling text.

Color Values & WCAG 2.1 Accessibility Contrast Ratios

Color ModelExact Value / CodeAccessibility / Contrast RatioCompliance Status
HEX#121212vs Pure White (#FFFFFF)18.1:1 (AAA Pass)
RGBrgb(18, 18, 18)vs Pure Black (#000000)1.2:1 (Fail)
HSLhsl(0, 0%, 7%)Decimal Value (24-bit)1184274
CMYK (Print)cmyk(0%, 0%, 0%, 93%)Color Space StandardsRGB / Rec.709 D65
Practical Applications

Recommended Use Cases

UI Engineering

Anti-Black Smearing IDE

Keeps pixels active to transition smoothly without OLED response delays during code scrolling.

Ergonomics

Ergonomic Coding Backdrop

Reduces ocular fatigue during extended 8+ hour programming sessions.

Design System

Dark UI Surface Baseline

The official foundation color for Material Design dark mode themes.

FAQ

Frequently Asked Questions

Why does Google Material Design recommend #121212 instead of #000000?
#121212 reduces contrast harshness against white text, supports multi-layer surface elevation shadows, and completely eliminates OLED black smearing during fast scrolling.
What is OLED black smearing and how does #121212 prevent it?
OLED pixels take slightly longer to switch from completely OFF (0 nits) to ON than between low-luminance states. #121212 keeps pixels barely active, eliminating purple ghosting trails.
Does #121212 still save battery on mobile devices?
Yes! #121212 uses less than 10% of the energy of a white screen, providing nearly identical battery savings to pure black while being significantly gentler on human eyes.
Can I copy the CSS code for dark mode UI?
Yes, click 'Copy CSS' in our developer studio below to get `background-color: #121212; color: #ffffff;` instantly.