Themes

New!
Documentation

Color palette generator

Quickly generate custom color palettes for Chakra UI.

50

100

200

300

400

500

600

700

800

900

Primary

#f9f6fd

WCAG 2:

17.82

#e5daf8

WCAG 2:

14.27

#d3bef4

WCAG 2:

11.29

#b795ec

WCAG 2:

7.74

#a379e7

WCAG 2:

5.85

#8952e0

WCAG 2:

4.83

#7434db

WCAG 2:

6.45

#6023c0

WCAG 2:

8.4

#4f1d9e

WCAG 2:

10.49

#3b1676

WCAG 2:

13.44

Black

#0e1012

WCAG 2:

19.06

Gray

#f9fafa

WCAG 2:

18.23

#f1f1f2

WCAG 2:

16.89

#e7e7e8

WCAG 2:

15.43

#d3d4d5

WCAG 2:

12.84

#abadaf

WCAG 2:

8.47

#7d7f83

WCAG 2:

4.75

#52555a

WCAG 2:

7.48

#33373d

WCAG 2:

11.97

#1d2025

WCAG 2:

16.34

#171a1d

WCAG 2:

17.47

Red

#fdf6f5

WCAG 2:

17.86

#f8d9d8

WCAG 2:

14.44

#f1b8b4

WCAG 2:

11.13

#e98d87

WCAG 2:

7.83

#e4726c

WCAG 2:

6.28

#dc4a41

WCAG 2:

4.63

#d2140a

WCAG 2:

5.46

#ac0900

WCAG 2:

7.52

#930800

WCAG 2:

9.23

#6d0600

WCAG 2:

12.53

Orange

#fdfaf6

WCAG 2:

18.32

#f9ebdb

WCAG 2:

16.28

#f1d4b1

WCAG 2:

13.43

#e6b273

WCAG 2:

9.97

#dc9239

WCAG 2:

7.46

#c37b24

WCAG 2:

5.61

#a5681e

WCAG 2:

4.57

#835318

WCAG 2:

6.53

#674113

WCAG 2:

8.97

#553610

WCAG 2:

10.93

Yellow

#fffefb

WCAG 2:

18.9

#fff8e9

WCAG 2:

18.03

#feecbd

WCAG 2:

16.29

#fddc87

WCAG 2:

14.31

#fbc434

WCAG 2:

11.84

#d2a01e

WCAG 2:

7.98

#a88018

WCAG 2:

5.23

#836413

WCAG 2:

5.53

#624b0e

WCAG 2:

8.29

#513e0c

WCAG 2:

10.27

Green

#f7fdfb

WCAG 2:

18.52

#d2f2e7

WCAG 2:

15.97

#9fe3cd

WCAG 2:

13.02

#64d2ad

WCAG 2:

10.32

#1dbd88

WCAG 2:

7.89

#0ea371

WCAG 2:

5.9

#0c875e

WCAG 2:

4.52

#096949

WCAG 2:

6.71

#07563c

WCAG 2:

8.73

#064731

WCAG 2:

10.75

Teal

#f1fcfc

WCAG 2:

18.22

#c0f1f4

WCAG 2:

15.55

#84e4e9

WCAG 2:

12.94

#2dd1da

WCAG 2:

10.21

#22b2ba

WCAG 2:

7.39

#1d979e

WCAG 2:

5.42

#187b80

WCAG 2:

5.02

#125f64

WCAG 2:

7.38

#0f5053

WCAG 2:

9.16

#0d4244

WCAG 2:

11.17

Cyan

#f4fbfd

WCAG 2:

18.21

#d0eef7

WCAG 2:

15.66

#bae7f3

WCAG 2:

14.36

#a2deee

WCAG 2:

12.91

#53c2e1

WCAG 2:

9.23

#2ab4d9

WCAG 2:

7.83

#24a2c4

WCAG 2:

6.39

#1e86a2

WCAG 2:

4.53

#196e85

WCAG 2:

5.82

#135567

WCAG 2:

8.32

Blue

#f1f6fd

WCAG 2:

17.56

#cde0f6

WCAG 2:

14.15

#a8c8f0

WCAG 2:

11.06

#7fafe8

WCAG 2:

8.35

#5896e1

WCAG 2:

6.23

#347fdb

WCAG 2:

4.72

#236abf

WCAG 2:

5.4

#1b5192

WCAG 2:

7.96

#164278

WCAG 2:

10.07

#123662

WCAG 2:

12.14

Purple

#f9f6fd

WCAG 2:

17.82

#e5daf8

WCAG 2:

14.27

#d3bef4

WCAG 2:

11.29

#b795ec

WCAG 2:

7.74

#a379e7

WCAG 2:

5.85

#8952e0

WCAG 2:

4.83

#7434db

WCAG 2:

6.45

#6023c0

WCAG 2:

8.4

#4f1d9e

WCAG 2:

10.49

#3b1676

WCAG 2:

13.44

Pink

#fdf5f9

WCAG 2:

17.8

#f8d9e7

WCAG 2:

14.59

#f3b9d3

WCAG 2:

11.52

#eb8db8

WCAG 2:

8.2

#e56ba2

WCAG 2:

6.32

#dc3882

WCAG 2:

4.48

#c4246c

WCAG 2:

5.5

#a01d58

WCAG 2:

7.47

#7d1745

WCAG 2:

10.09

#5d1133

WCAG 2:

13.18

Black Alpha

rgba(0, 0, 0, 0.04)

WCAG 2:

21

rgba(0, 0, 0, 0.06)

WCAG 2:

21

rgba(0, 0, 0, 0.08)

WCAG 2:

21

rgba(0, 0, 0, 0.16)

WCAG 2:

21

rgba(0, 0, 0, 0.24)

WCAG 2:

21

rgba(0, 0, 0, 0.36)

WCAG 2:

21

rgba(0, 0, 0, 0.48)

WCAG 2:

21

rgba(0, 0, 0, 0.64)

WCAG 2:

21

rgba(0, 0, 0, 0.80)

WCAG 2:

21

rgba(0, 0, 0, 0.92)

WCAG 2:

21

White Apha

rgba(255, 255, 255, 0.04)

WCAG 2:

19.06

rgba(255, 255, 255, 0.06)

WCAG 2:

19.06

rgba(255, 255, 255, 0.08)

WCAG 2:

19.06

rgba(255, 255, 255, 0.16)

WCAG 2:

19.06

rgba(255, 255, 255, 0.24)

WCAG 2:

19.06

rgba(255, 255, 255, 0.36)

WCAG 2:

19.06

rgba(255, 255, 255, 0.48)

WCAG 2:

19.06

rgba(255, 255, 255, 0.64)

WCAG 2:

19.06

rgba(255, 255, 255, 0.80)

WCAG 2:

19.06

rgba(255, 255, 255, 0.92)

WCAG 2:

19.06