Our color system is based off of Radix Colors. There are several categories of colors that we use in this library and they are all defined in CSS variables.
Base colors
Base colors are used as the basis of every UI element including backgrounds, borders, and text.
Accent colors
Accent colors provide additional meaning to UI elements and are used in buttons, links and statuses.
CSS variables
The base colors are a 12-step color range going from lightest to darkest.
Light theme
| --base-color-1 | #fcfcfc |
| --base-color-2 | #f9f9f9 |
| --base-color-3 | #f0f0f0 |
| --base-color-4 | #e8e8e8 |
| --base-color-5 | #e0e0e0 |
| --base-color-6 | #d9d9d9 |
| --base-color-7 | #cecece |
| --base-color-8 | #bbbbbb |
| --base-color-9 | #8d8d8d |
| --base-color-10 | #838383 |
| --base-color-11 | #646464 |
| --base-color-12 | #202020 |
Dark theme
| --base-color-1 | #111111 |
| --base-color-2 | #191919 |
| --base-color-3 | #222222 |
| --base-color-4 | #2a2a2a |
| --base-color-5 | #313131 |
| --base-color-6 | #3a3a3a |
| --base-color-7 | #484848 |
| --base-color-8 | #606060 |
| --base-color-9 | #6e6e6e |
| --base-color-10 | #7b7b7b |
| --base-color-11 | #b4b4b4 |
| --base-color-12 | #eeeeee |
Accent colors (light/dark)
| --accent-color-gray | #8d8d8d |
| --accent-color-gold | #978365 |
| --accent-color-bronze | #a18072 |
| --accent-color-brown | #ad7f58 |
| --accent-color-yellow | #ffe629 |
| --accent-color-amber | #ffc53d |
| --accent-color-orange | #f76b15 |
| --accent-color-tomato | #e54d2e |
| --accent-color-red | #e5484d |
| --accent-color-ruby | #e54666 |
| --accent-color-crimson | #e93d82 |
| --accent-color-pink | #d6409f |
| --accent-color-plum | #ab4aba |
| --accent-color-purple | #8e4ec6 |
| --accent-color-violet | #6e56cf |
| --accent-color-iris | #5b5bd6 |
| --accent-color-indigo | #3e63dd |
| --accent-color-blue | #0090ff |
| --accent-color-cyan | #00a2c7 |
| --accent-color-teal | #12a594 |
| --accent-color-jade | #29a383 |
| --accent-color-green | #30a46c |
| --accent-color-grass | #46a758 |
| --accent-color-lime | #bdee63 |
| --accent-color-mint | #86ead4 |
| --accent-color-sky | #7ce2fe |