Quickly generate custom color palettes for Chakra UI.
50
100
200
300
400
500
600
700
800
900
#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
#0e1012
WCAG 2:
19.06
#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
#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
#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
#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
#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
#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
#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
#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
#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
#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
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
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
import { extendTheme } from '@chakra-ui/react'
import { theme as baseTheme } from '@saas-ui/react'
const colors = {}
const theme = extendTheme({
colors
}, baseTheme)
export default theme
{}
With Supa Palette you can easily create beautiful, harmonious and accessible-first palettes for Chakra UI in Figma.