Home
Buy with Prime
Prime Gaming
Premera
Comcast
Crowds
About
Blog
Prism
Prism

Build an accessible color palette

Replace the five colors below with any color and a CIELAB color scale will be generated. It's the same approach behind Stripe's accessible color system, and an enhanced version of the one I built for Buy with Prime's merchant theme.

Chroma by step

50
100
200
300
400
500
600
700
800
900
950
#ff3b30
#ff9500
#34c759
#007aff
#af52de

Dashed outline = color has been adjusted to the nearest color a screen can reproduce.

L* 56.7 · C 88.7 · H 36.3°

50

#fff4f2

19.5:1

100

#ffe2dc

17.2:1

200

#ffc0b3

13.4:1

300

#ff9c89

10.4:1

400

#ff6d57

7.6:1

500

#f6312a

5.4:1

600

#d70016

5.4:1

700

#b20010

7.2:1

800

#8f000a

9.7:1

900

#6d0001

12.7:1

950

#420b00

16.4:1

L* 71.4 · C 83.2 · H 67.2°

#fff5ed

19.5:1

#ffe3cd

17.1:1

#ffc38d

13.4:1

#ffa037

10.3:1

#e38400

7.6:1

#be6d00

5.4:1

#9e5a00

5.4:1

#824900

7.2:1

#673900

9.7:1

#4d2a00

12.8:1

#301b00

16.4:1

L* 71.1 · C 75.0 · H 144.3°

#deffdf

19.5:1

#97ffa2

17.1:1

#5ee978

13.4:1

#3fcf61

10.3:1

#0bb347

7.6:1

#009639

5.4:1

#007c2e

5.4:1

#006624

7.2:1

#00501b

9.7:1

#003c12

12.7:1

#002603

16.4:1

L* 53.1 · C 76.9 · H 287.0°

#f5f6ff

19.5:1

#e4e7ff

17.2:1

#c4ccff

13.4:1

#a1b2ff

10.3:1

#7396ff

7.5:1

#1e7cff

5.4:1

#0066d8

5.4:1

#0054b3

7.2:1

#00428f

9.7:1

#00306d

12.8:1

#001e49

16.4:1

L* 52.3 · C 82.0 · H 317.1°

#fcf4ff

19.5:1

#f7e1ff

17.2:1

#ecbfff

13.5:1

#e09cff

10.4:1

#d172ff

7.6:1

#b457e3

5.4:1

#9a3ec9

5.4:1

#8327b3

7.2:1

#6d079d

9.7:1

#53007a

12.7:1

#370052

16.4:1