Explore 26 color families, each with eleven shades from light to dark. Copy a value or download the optional palette stylesheet.
Values stay readable without JavaScript.
The color palette Eleven shades per family: 50 is the lightest, 950 the darkest. Select any swatch to copy its value. These scales are independent of the selected theme.
Red 50 #fdf2f1 100 #fce5e4 200 #f8ccc9 300 #f4aaa4 400 #ee7b72 500 #e64337 600 #c82419 700 #9f1d14 800 #7b160f 900 #5b110b 950 #360a07
Orange 50 #fef6f1 100 #fdeee3 200 #fbdcc6 300 #f8c5a0 400 #f4a56c 500 #ef7f2e 600 #d16010 700 #a64c0c 800 #803b0a 900 #5f2c07 950 #391a04
Amber 50 #fefaf1 100 #fdf5e2 200 #fbebc5 300 #f9de9f 400 #f6cc6a 500 #f2b62c 600 #d3980d 700 #a8790b 800 #815d08 900 #604506 950 #3a2904
Yellow 50 #fefcf1 100 #fdfae3 200 #faf4c7 300 #f7eda1 400 #f2e36e 500 #edd731 600 #ceb812 700 #a4930e 800 #7f710b 900 #5e5408 950 #383205
Lime 50 #f9fcf2 100 #f2fae6 200 #e6f5cc 300 #d5eeaa 400 #bee47c 500 #a3d945 600 #84ba26 700 #69941e 800 #517217 900 #3c5511 950 #24330a
Green 50 #f3fcf6 100 #e7f8ec 200 #d0f1da 300 #b0e8c1 400 #84db9f 500 #51cd76 600 #32ae58 700 #288a46 800 #1f6b36 900 #174f28 950 #0e2f18
Emerald 50 #f2fcf8 100 #e6f9f2 200 #cdf4e5 300 #abedd4 400 #7de3bc 500 #47d7a0 600 #28b881 700 #209267 800 #19714f 900 #12543b 950 #0b3223
Teal 50 #f3fcfb 100 #e7f9f8 200 #cef3f1 300 #adebe8 400 #81dfdb 500 #4bd2cb 600 #2db4ad 700 #248f89 800 #1c6e6a 900 #14524f 950 #0c312f
Cyan 50 #f2fbfd 100 #e5f6fb 200 #caeef6 300 #a7e2f1 400 #77d2e9 500 #3ebfe0 600 #1fa1c1 700 #19809a 800 #136376 900 #0e4958 950 #092c35
Sky 50 #f1f8fd 100 #e4f2fc 200 #c8e4f9 300 #a4d3f4 400 #72baee 500 #369ee7 600 #187fc9 700 #1365a0 800 #0e4e7b 900 #0b3a5b 950 #062337
Blue 50 #f1f5fd 100 #e4eafb 200 #c9d5f8 300 #a5baf3 400 #7394ed 500 #3866e5 600 #1a48c7 700 #15399e 800 #102c7a 900 #0c215a 950 #071436
Indigo 50 #f2f2fc 100 #e6e6fa 200 #cdcdf4 300 #ababed 400 #7d7de3 500 #4646d8 600 #2727b9 700 #1f1f93 800 #181872 900 #121254 950 #0b0b32
Violet 50 #f6f2fc 100 #eee5fa 200 #ddccf5 300 #c6aaee 400 #a77be5 500 #8244da 600 #6425bb 700 #4f1d95 800 #3d1773 900 #2d1155 950 #1b0a33
Purple 50 #f9f3fc 100 #f3e6f9 200 #e8cdf3 300 #d9acec 400 #c47fe1 500 #ab49d4 600 #8c2bb6 700 #6f2291 800 #561a70 900 #401353 950 #260c32
Fuchsia 50 #fdf2fc 100 #fbe5f9 200 #f6caf3 300 #f1a7eb 400 #e977df 500 #e03ed2 600 #c11fb4 700 #9a198f 800 #76136e 900 #580e52 950 #350931
Pink 50 #fdf2f8 100 #fae5f2 200 #f6cbe5 300 #efa9d3 400 #e679bb 500 #dc419e 600 #be2380 700 #971c66 800 #74154e 900 #56103a 950 #340923
Rose 50 #fdf2f5 100 #fbe5ea 200 #f7cad5 300 #f1a7b9 400 #ea7693 500 #e13d66 600 #c21e47 700 #9a1839 800 #77132c 900 #580e20 950 #350813
Slate 50 #f6f7f8 100 #edeff2 200 #dcdfe5 300 #c4cad4 400 #a4adbc 500 #7e8aa0 600 #5f6c81 700 #4c5667 800 #3b424f 900 #2b313b 950 #1a1d23
Stone 50 #f8f7f7 100 #f1f0ee 200 #e3e1de 300 #d0cdc8 400 #b6b1aa 500 #989086 600 #797267 700 #605a52 800 #4a463f 900 #37342f 950 #211f1c
Gray 50 #f7f7f8 100 #eff0f0 200 #dfe0e1 300 #cacbce 400 #aeafb2 500 #8b8e92 600 #6d6f74 700 #57585c 800 #434447 900 #313235 950 #1e1e20
Zinc 50 #f7f7f8 100 #efeff0 200 #e0dfe2 300 #cbc9cf 400 #aeacb4 500 #8c8994 600 #6d6b76 700 #57555e 800 #434148 900 #323036 950 #1e1d20
Neutral 50 #f7f7f7 100 #f0f0f0 200 #e0e0e0 300 #cccccc 400 #b0b0b0 500 #8f8f8f 600 #707070 700 #595959 800 #454545 900 #333333 950 #1f1f1f
Taupe 50 #f8f7f6 100 #f2f0ee 200 #e4e0dd 300 #d2ccc6 400 #b9afa6 500 #9c8e81 600 #7e6f63 700 #64594f 800 #4d443d 900 #39332d 950 #221e1b
Mauve 50 #f8f7f8 100 #f1eef1 200 #e3dee2 300 #d1c7cf 400 #b7a9b5 500 #998596 600 #7a6677 700 #61515f 800 #4b3f49 900 #382e36 950 #211c20
Mist 50 #f7f8f8 100 #eef1f1 200 #dee2e3 300 #c7cfd1 400 #a9b5b7 500 #859699 600 #66777a 700 #515f61 800 #3f494b 900 #2e3638 950 #1c2021
Olive 50 #f8f8f6 100 #f1f2ee 200 #e2e4dd 300 #cfd2c6 400 #b5b9a6 500 #969c81 600 #777e63 700 #5f644f 800 #494d3d 900 #36392d 950 #20221b
Raw colors and theme tokens Load the optional palette stylesheet to use a fixed color such as var(--color-blue-600). It stays the same in light and dark mode. For everyday components, prefer a semantic token such as var(--accent), which adapts to the theme.
<link rel="stylesheet" href="/docs/colors/palette.5be964a9714b46b9.css">
.chart-series {
color: var(--color-teal-600);
}A shade number does not guarantee contrast. Check each foreground and background combination before using it for text or controls.