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.42) | ||
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.42) | ||
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 | #D9D4FF | 1.42 | |
purple.300 | #B8A9FF | 2.07 | |
purple.400 | #9373FF | 3.42 | |
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 | #D9D4FF | 1.42 | |
primary.300 | #B8A9FF | 2.07 | |
primary.400 | #9373FF | 3.42 | |
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 | #D9D4FF | 1.42 | |
info.300 | #B8A9FF | 2.07 | |
info.400 | #9373FF | 3.42 | |
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 |