Colors
Colors are being revised and subject to short-term changes
Example | Token | Value | Contrast against bg |
---|---|---|---|
black | #000000 | 21.00 | |
white | #FFFFFF | 1.00 | |
whiteAlpha.50 | rgba(255,255,255, 0.04) | ||
whiteAlpha.100 | rgba(255,255,255,0.06) | ||
whiteAlpha.200 | rgba(255,255,255,0.11) | ||
whiteAlpha.300 | rgba(255,255,255,0.29) | ||
whiteAlpha.400 | rgba(255,255,255,0.43) | ||
whiteAlpha.500 | rgba(255,255,255,0.55) | ||
whiteAlpha.600 | rgba(255,255,255,0.68) | ||
whiteAlpha.700 | rgba(255,255,255,0.76) | ||
whiteAlpha.800 | rgba(255,255,255,0.78) | ||
whiteAlpha.900 | rgba(255,255,255,0.94) | ||
blackAlpha.50 | rgba(0,0,0, 0.04) | ||
blackAlpha.100 | rgba(0,0,0,0.06) | ||
blackAlpha.200 | rgba(0,0,0,0.11) | ||
blackAlpha.300 | rgba(0,0,0,0.29) | ||
blackAlpha.400 | rgba(0,0,0,0.43) | ||
blackAlpha.500 | rgba(0,0,0,0.55) | ||
blackAlpha.600 | rgba(0,0,0,0.68) | ||
blackAlpha.700 | rgba(0,0,0,0.76) | ||
blackAlpha.800 | rgba(0,0,0,0.78) | ||
blackAlpha.900 | rgba(0,0,0,0.94) | ||
gray.50 | #F7F7F7 | 1.07 | |
gray.100 | #E9E9E9 | 1.21 | |
gray.200 | #D8D8D8 | 1.43 | |
gray.300 | #B5B5B5 | 2.05 | |
gray.400 | #8E8E8E | 3.28 | |
gray.500 | #717171 | 4.88 | |
gray.600 | #535353 | 7.69 | |
gray.700 | #3B3B3B | 11.20 | |
gray.800 | #282828 | 14.74 | |
gray.900 | #212121 | 16.10 | |
red.50 | #fff5f4 | 1.07 | |
red.100 | #ffe4e2 | 1.20 | |
red.200 | #ffccc8 | 1.43 | |
red.300 | #ff9a94 | 2.04 | |
red.400 | #f4595a | 3.27 | |
red.500 | #d92739 | 4.88 | |
red.600 | #b30426 | 7.09 | |
red.700 | #92001f | 9.37 | |
red.800 | #730019 | 12.05 | |
red.900 | #580113 | 14.70 | |
orange.50 | #fff6e7 | 1.07 | |
orange.100 | #ffe6bd | 1.21 | |
orange.200 | #fdd291 | 1.42 | |
orange.300 | #ffa037 | 2.03 | |
orange.400 | #e26e00 | 3.25 | |
orange.500 | #ba5200 | 4.89 | |
orange.600 | #953d00 | 7.13 | |
orange.700 | #7a2f00 | 9.40 | |
orange.800 | #612300 | 12.01 | |
orange.900 | #491901 | 14.76 | |
yellow.50 | #fdf8d2 | 1.08 | |
yellow.100 | #faec79 | 1.21 | |
yellow.200 | #f8d904 | 1.41 | |
yellow.300 | #d7b300 | 2.03 | |
yellow.400 | #ae8a00 | 3.26 | |
yellow.500 | #8b6b00 | 5.00 | |
yellow.600 | #705300 | 7.18 | |
yellow.700 | #5b4300 | 9.34 | |
yellow.800 | #483300 | 12.01 | |
yellow.900 | #362500 | 14.77 | |
green.50 | #e8fcf5 | 1.07 | |
green.100 | #bef6e3 | 1.20 | |
green.200 | #8bebd0 | 1.41 | |
green.300 | #44cbac | 2.02 | |
green.400 | #0ea184 | 3.26 | |
green.500 | #007f66 | 4.97 | |
green.600 | #006450 | 7.15 | |
green.700 | #085040 | 9.41 | |
green.800 | #0d3e31 | 12.00 | |
green.900 | #0f2d25 | 14.76 | |
teal.50 | #e7fbfb | 1.07 | |
teal.100 | #bbf4f3 | 1.21 | |
teal.200 | #8be9e8 | 1.41 | |
teal.300 | #3cc8cb | 2.04 | |
teal.400 | #019ea5 | 3.26 | |
teal.500 | #007c85 | 4.97 | |
teal.600 | #00626b | 7.10 | |
teal.700 | #0a4e57 | 9.37 | |
teal.800 | #103b44 | 12.13 | |
teal.900 | #102c33 | 14.68 | |
blue.50 | #f4f7ff | 1.07 | |
blue.100 | #e1eaff | 1.21 | |
blue.200 | #c9d8ff | 1.42 | |
blue.300 | #9cb3fd | 2.04 | |
blue.400 | #6987f9 | 3.26 | |
blue.500 | #4a65e8 | 4.86 | |
blue.600 | #344bc3 | 7.14 | |
blue.700 | #293ba1 | 9.40 | |
blue.800 | #1f2d7f | 12.07 | |
blue.900 | #16215f | 14.82 | |
cyan.50 | #eafaff | 1.07 | |
cyan.100 | #c6f1ff | 1.21 | |
cyan.200 | #a0e3fd | 1.41 | |
cyan.300 | #5cc0f1 | 2.05 | |
cyan.400 | #2695de | 3.26 | |
cyan.500 | #0873c8 | 4.89 | |
cyan.600 | #0059a1 | 7.13 | |
cyan.700 | #004783 | 9.42 | |
cyan.800 | #003767 | 12.05 | |
cyan.900 | #00294d | 14.74 | |
purple.50 | #f7f6ff | 1.07 | |
purple.100 | #eae7ff | 1.21 | |
purple.200 | #d8d2ff | 1.44 | |
purple.300 | #b6a7ff | 2.11 | |
purple.400 | #8f70ff | 3.54 | |
purple.500 | #6e3fff | 5.50 | |
purple.600 | #5319e0 | 8.13 | |
purple.700 | #4715af | 10.53 | |
purple.800 | #401791 | 12.00 | |
purple.900 | #2f1469 | 14.74 | |
pink.50 | #fff4fe | 1.07 | |
pink.100 | #ffe2fb | 1.20 | |
pink.200 | #fec7f8 | 1.42 | |
pink.300 | #f592f3 | 2.04 | |
pink.400 | #de53e0 | 3.27 | |
pink.500 | #bc29bd | 5.01 | |
pink.600 | #9d039e | 7.14 | |
pink.700 | #800081 | 9.40 | |
pink.800 | #640664 | 11.99 | |
pink.900 | #470e46 | 14.80 | |
primary.50 | #f7f6ff | 1.07 | |
primary.100 | #eae7ff | 1.21 | |
primary.200 | #d8d2ff | 1.44 | |
primary.300 | #b6a7ff | 2.11 | |
primary.400 | #8f70ff | 3.54 | |
primary.500 | #6e3fff | 5.50 | |
primary.600 | #5319e0 | 8.13 | |
primary.700 | #4715af | 10.53 | |
primary.800 | #401791 | 12.00 | |
primary.900 | #2f1469 | 14.74 | |
danger.50 | #fff5f4 | 1.07 | |
danger.100 | #ffe4e2 | 1.20 | |
danger.200 | #ffccc8 | 1.43 | |
danger.300 | #ff9a94 | 2.04 | |
danger.400 | #f4595a | 3.27 | |
danger.500 | #d92739 | 4.88 | |
danger.600 | #b30426 | 7.09 | |
danger.700 | #92001f | 9.37 | |
danger.800 | #730019 | 12.05 | |
danger.900 | #580113 | 14.70 | |
warning.50 | #fff6e7 | 1.07 | |
warning.100 | #ffe6bd | 1.21 | |
warning.200 | #fdd291 | 1.42 | |
warning.300 | #ffa037 | 2.03 | |
warning.400 | #e26e00 | 3.25 | |
warning.500 | #ba5200 | 4.89 | |
warning.600 | #953d00 | 7.13 | |
warning.700 | #7a2f00 | 9.40 | |
warning.800 | #612300 | 12.01 | |
warning.900 | #491901 | 14.76 | |
success.50 | #e8fcf5 | 1.07 | |
success.100 | #bef6e3 | 1.20 | |
success.200 | #8bebd0 | 1.41 | |
success.300 | #44cbac | 2.02 | |
success.400 | #0ea184 | 3.26 | |
success.500 | #007f66 | 4.97 | |
success.600 | #006450 | 7.15 | |
success.700 | #085040 | 9.41 | |
success.800 | #0d3e31 | 12.00 | |
success.900 | #0f2d25 | 14.76 | |
info.50 | #f7f6ff | 1.07 | |
info.100 | #eae7ff | 1.21 | |
info.200 | #d8d2ff | 1.44 | |
info.300 | #b6a7ff | 2.11 | |
info.400 | #8f70ff | 3.54 | |
info.500 | #6e3fff | 5.50 | |
info.600 | #5319e0 | 8.13 | |
info.700 | #4715af | 10.53 | |
info.800 | #401791 | 12.00 | |
info.900 | #2f1469 | 14.74 |