Color Husband
Neutral
Primary
Success
Danger
Warning
Info
Accent
Import color
Neutral
HueSlide to change the hue value. It will affect all the shades for this color. You have finer controls of the hue of each shade below.
218
H
Hue
S
Saturation
B
Brightness
Label
#
Label
#
Label
#
Label
#
Label
#
Label
#
Label
#
Label
#
Label
#
Label
#
Figma Tokens
CSS Variables
Tailwind Config
JSON
Color Husband
Chakra UI Theme
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
"Neutral": {
"50": {
"value": "#F7F9FC",
"type": "color"
},
"100": {
"value": "#E9EDF5",
"type": "color"
},
"200": {
"value": "#CAD1DE",
"type": "color"
},
"300": {
"value": "#A7B1C2",
"type": "color"
},
"400": {
"value": "#8A96AB",
"type": "color"
},
"500": {
"value": "#727E94",
"type": "color"
},
"600": {
"value": "#5A677D",
"type": "color"
},
"700": {
"value": "#424D61",
"type": "color"
},
"800": {
"value": "#2B3545",
"type": "color"
},
"900": {
"value": "#181E29",
"type": "color"
}},
Built by Yi Xin @Artylope for her own design workflow using NextJS, Tailwind CSS