A little colour memory test

Trust your eyes?

Remember this shade. It disappears in three seconds.

Look closely…

Black CSS gradients

Black CSS gradients with near-black and charcoal stops at very low chroma for restrained tonal shifts on deep surfaces. These 24 selected examples come from the existing gradient library.

Gradient usage, contrast & CSS

Use this gradient.

Use a charcoal blend to separate a dark panel from its surroundings without adding a vivid hue. Keep a clear foreground and enough edge contrast for interactive areas.

Text over gradients.

Near-black variations can disappear on some displays. Measure text and focus indicators against the lightest part of the gradient as well as the darkest.

CSS for Slate & Ink

background: radial-gradient(ellipse at 30% 25%, #222221 0%, #3B3937 100%);
background: radial-gradient(ellipse at 30% 25% in oklab, #222221 0%, #3B3937 100%);

The first declaration supplies an sRGB fallback; the second interpolates in OKLab. Create a gradient with your own colours and stops.

THE COLOR SHEET / RESTORE

Bring your colours back?

IndustrialRadial · 2 stops
MoodyLinear · 3 stops
CoffeeRadial · 2 stops
Black & AccentRadial · 2 stops
CatppuccinRadial · 2 stops
MoodyLinear · 3 stops
DarkLinear · 2 stops
ForestRadial · 2 stops
Black & AccentLinear · 2 stops
DarkLinear · 2 stops
CatppuccinLinear · 2 stops
IndustrialLinear · 2 stops
DarkRadial · 3 stops
DarkLinear · 3 stops
Black & AccentRadial · 2 stops
MinimalLinear · 2 stops
MoodyRadial · 2 stops
MoodyLinear · 3 stops
Rosé PineLinear · 2 stops
MinimalRadial · 2 stops
Black & AccentLinear · 2 stops
DarkRadial · 2 stops
MoodyLinear · 3 stops
Black & AccentLinear · 2 stops

THE COLOR SHEET / POSTCARD

Send a little colour.

THE PICTURE SIDE

Just for this postcard. Your saved memory stays as you wrote it.