Documentation > Colors

Colors

Customizing colors for your project

Radian simplifies its approach to colors by limiting the colors needed to a very small subset. Which is more often enough for teams to build systems that are functional. However you also have the option to use both Tailwind CSS color schemes or add your own color schemes.

We suggest using the tool below to generate the color scheme for your project

Colors and Theming

The base version of Radian before release

Colors
ColorUsed ForHSL
primaryMain brand color for your product
258,70%,50%
secondaryPlaceholder for your secondary color if needed
258,60%,60%
bgMain background
0,0%,100%
bg-secondaryBackground color for subtle containers
0,0%,98%
bg-tertiaryDefault
0,0%,95%
bg-quaternaryDefault
0,0%,92%
fgDefault
240,10%,10%
fg-secondaryDefault
240,4%,40%
fg-tertiaryDefault
240,4%,60%
fg-quaternaryDefault
240,4%,80%
static-whiteDefault
0,0%,100%
static-blackDefault
240,10%,10%
borderDefault
240, 4%, 20%
border-secondaryDefault
240, 3%, 30%
infoDefault
210, 100%, 52%
successDefault
135, 60%, 46%
errorDefault
0, 100%, 62%
warningDefault
35, 100%, 52%

We suggest adding your own colors to the system or using color systems from tailwind or use the color generator below to generate light and dark mode colors for your system

Color Generator

The base version of Radian before release