Grayscale with Temperature

Temperature-saturated grayscale generation with accessibility reporting.

year

2025

tags

React · TypeScript · Vibe Code · Design Systems

Saturation Curve

#ffffff

#ffffff

Fail

1.00

#e4e5e7

Fail

1.26

#caccd0

Fail

1.61

#b0b3bb

Fail

2.10

#969ba7

Fail

2.78

#7d8492

A

3.76

#676d7a

AA

5.19

#525661

AAA

7.34

#3e4147

AAA

10.23

#2b2d30

AAA

13.81

#191a1b

AAA

17.43

#000001

AAA

20.99

#e4e5e7

#ffffff

Fail

1.26

#e4e5e7

Fail

1.00

#caccd0

Fail

1.28

#b0b3bb

Fail

1.66

#969ba7

Fail

2.21

#7d8492

Fail

2.98

#676d7a

A

4.12

#525661

AA

5.82

#3e4147

AAA

8.12

#2b2d30

AAA

10.96

#191a1b

AAA

13.83

#000001

AAA

16.65

#caccd0

#ffffff

Fail

1.61

#e4e5e7

Fail

1.28

#caccd0

Fail

1.00

#b0b3bb

Fail

1.30

#969ba7

Fail

1.73

#7d8492

Fail

2.34

#676d7a

A

3.23

#525661

A

4.56

#3e4147

AA

6.36

#2b2d30

AAA

8.59

#191a1b

AAA

10.84

#000001

AAA

13.05

#b0b3bb

#ffffff

Fail

2.10

#e4e5e7

Fail

1.66

#caccd0

Fail

1.30

#b0b3bb

Fail

1.00

#969ba7

Fail

1.33

#7d8492

Fail

1.79

#676d7a

Fail

2.47

#525661

A

3.50

#3e4147

A

4.88

#2b2d30

AA

6.58

#191a1b

AAA

8.31

#000001

AAA

10.01

#969ba7

#ffffff

Fail

2.78

#e4e5e7

Fail

2.21

#caccd0

Fail

1.73

#b0b3bb

Fail

1.33

#969ba7

Fail

1.00

#7d8492

Fail

1.35

#676d7a

Fail

1.86

#525661

Fail

2.64

#3e4147

A

3.68

#2b2d30

A

4.96

#191a1b

AA

6.26

#000001

AAA

7.54

#7d8492

#ffffff

A

3.76

#e4e5e7

Fail

2.98

#caccd0

Fail

2.34

#b0b3bb

Fail

1.79

#969ba7

Fail

1.35

#7d8492

Fail

1.00

#676d7a

Fail

1.38

#525661

Fail

1.95

#3e4147

Fail

2.72

#2b2d30

A

3.67

#191a1b

A

4.64

#000001

AA

5.59

#676d7a

#ffffff

AA

5.19

#e4e5e7

A

4.12

#caccd0

A

3.23

#b0b3bb

Fail

2.47

#969ba7

Fail

1.86

#7d8492

Fail

1.38

#676d7a

Fail

1.00

#525661

Fail

1.41

#3e4147

Fail

1.97

#2b2d30

Fail

2.66

#191a1b

A

3.36

#000001

A

4.04

#525661

#ffffff

AAA

7.34

#e4e5e7

AA

5.82

#caccd0

A

4.56

#b0b3bb

A

3.50

#969ba7

Fail

2.64

#7d8492

Fail

1.95

#676d7a

Fail

1.41

#525661

Fail

1.00

#3e4147

Fail

1.40

#2b2d30

Fail

1.88

#191a1b

Fail

2.38

#000001

Fail

2.86

#3e4147

#ffffff

AAA

10.23

#e4e5e7

AAA

8.12

#caccd0

AA

6.36

#b0b3bb

A

4.88

#969ba7

A

3.68

#7d8492

Fail

2.72

#676d7a

Fail

1.97

#525661

Fail

1.40

#3e4147

Fail

1.00

#2b2d30

Fail

1.35

#191a1b

Fail

1.70

#000001

Fail

2.05

#2b2d30

#ffffff

AAA

13.81

#e4e5e7

AAA

10.96

#caccd0

AAA

8.59

#b0b3bb

AA

6.58

#969ba7

A

4.96

#7d8492

A

3.67

#676d7a

Fail

2.66

#525661

Fail

1.88

#3e4147

Fail

1.35

#2b2d30

Fail

1.00

#191a1b

Fail

1.26

#000001

Fail

1.52

#191a1b

#ffffff

AAA

17.43

#e4e5e7

AAA

13.83

#caccd0

AAA

10.84

#b0b3bb

AAA

8.31

#969ba7

AA

6.26

#7d8492

A

4.64

#676d7a

A

3.36

#525661

Fail

2.38

#3e4147

Fail

1.70

#2b2d30

Fail

1.26

#191a1b

Fail

1.00

#000001

Fail

1.20

#000001

#ffffff

AAA

20.99

#e4e5e7

AAA

16.65

#caccd0

AAA

13.05

#b0b3bb

AAA

10.01

#969ba7

AAA

7.54

#7d8492

AA

5.59

#676d7a

A

4.04

#525661

Fail

2.86

#3e4147

Fail

2.05

#2b2d30

Fail

1.52

#191a1b

Fail

1.20

#000001

Fail

1.00

Name

Format

  --color-gray-1: #ffffff;
  --color-gray-2: #e4e5e7;
  --color-gray-3: #caccd0;
  --color-gray-4: #b0b3bb;
  --color-gray-5: #969ba7;
  --color-gray-6: #7d8492;
  --color-gray-7: #676d7a;
  --color-gray-8: #525661;
  --color-gray-9: #3e4147;
  --color-gray-10: #2b2d30;
  --color-gray-11: #191a1b;
  --color-gray-12: #000001;