Gray Lab — Perceptual Grayscale Playground

Steps10

Lightness RangeL* 0.05 → 0.97

Min0.05

Max0.97

Distribution

Apply Tint

Visual Playground

1#000000

2#0C0C0C

3#232323

4#3C3C3C

5#585858

6#757575

7#939393

8#B3B3B3

9#D3D3D3

10#F5F5F5

Continuous Gradient

ΔL* Between Steps

Data Table

Step		L*	C	H	HEX	RGB	ΔL*	vs ⬜	vs ⬛
1		0.0500	0.0000	0.0	#000000	0, 0, 0	—	21.0	1.0
2		0.1522	0.0000	0.0	#0C0C0C	12, 12, 12	0.1022	19.6	1.1
3		0.2544	0.0000	0.0	#232323	35, 35, 35	0.1022	15.7	1.3
4		0.3567	0.0000	0.0	#3C3C3C	60, 60, 60	0.1022	11.0	1.9
5		0.4589	0.0000	0.0	#585858	88, 88, 88	0.1022	7.1	3.0
6		0.5611	0.0000	0.0	#757575	117, 117, 117	0.1022	4.6	4.6
7		0.6633	0.0000	0.0	#939393	147, 147, 147	0.1022	3.1	6.8
8		0.7656	0.0000	0.0	#B3B3B3	179, 179, 179	0.1022	2.1	10.0
9		0.8678	0.0000	0.0	#D3D3D3	211, 211, 211	0.1022	1.5	14.0
10		0.9700	0.0000	0.0	#F5F5F5	245, 245, 245	0.1022	1.1	19.3

UI Preview

Card Component

This mock card uses your generated gray ramp for background, text, border, and shadow.

Caption text — muted level

Heading Text

Body text with secondary color

Caption / muted text

Disabled text

Industry Benchmarks

▸ Your Ramp

Tailwind Slate

Material Neutral

Radix Gray

IBM Carbon

Export