Color Palette
This plugin integrates the wonderful Radix UI Color Palette , (originally by WorkOS) with TailwindCSS. The Radix UI Color Palette is a set of colors that are designed to work harmoniously together. The colors are designed to be accessible and to provide a good contrast ratio. The best part is that the colors are designed to automatically work with dark and light mode through inversions. This provides designers and developers with a consistent color palette for light and dark themes without even having to manually adjust colors. All 30 colors are available in 4 variants, and 12 weights out of the box with this plugin. This means you have access to 1440 colors to choose from !
The only major difference between the original Radix UI Color Palette and how this palette is implemented is that we multiply the weights by 100, so instead of using the 1-12 scale, we use the 100-1200 scale. This is because this is more familiar for users of TailwindCSS and other weighted color palettes, and its also easier on the eyes in the markup to spot the difference between a color and a weight.
Amber
100
200
300
400
500
600
700
800
900
1000
1100
1200
amberLight
amberLightA
amberDark
amberDarkA
Blue
100
200
300
400
500
600
700
800
900
1000
1100
1200
blueLight
blueLightA
blueDark
blueDarkA
Bronze
100
200
300
400
500
600
700
800
900
1000
1100
1200
bronzeLight
bronzeLightA
bronzeDark
bronzeDarkA
Brown
100
200
300
400
500
600
700
800
900
1000
1100
1200
brownLight
brownLightA
brownDark
brownDarkA
Crimson
100
200
300
400
500
600
700
800
900
1000
1100
1200
crimsonLight
crimsonLightA
crimsonDark
crimsonDarkA
Cyan
100
200
300
400
500
600
700
800
900
1000
1100
1200
cyanLight
cyanLightA
cyanDark
cyanDarkA
Gold
100
200
300
400
500
600
700
800
900
1000
1100
1200
goldLight
goldLightA
goldDark
goldDarkA
Grass
100
200
300
400
500
600
700
800
900
1000
1100
1200
grassLight
grassLightA
grassDark
grassDarkA
Gray
100
200
300
400
500
600
700
800
900
1000
1100
1200
grayLight
grayLightA
grayDark
grayDarkA
Green
100
200
300
400
500
600
700
800
900
1000
1100
1200
greenLight
greenLightA
greenDark
greenDarkA
Indigo
100
200
300
400
500
600
700
800
900
1000
1100
1200
indigoLight
indigoLightA
indigoDark
indigoDarkA
Lime
100
200
300
400
500
600
700
800
900
1000
1100
1200
limeLight
limeLightA
limeDark
limeDarkA
Mauve
100
200
300
400
500
600
700
800
900
1000
1100
1200
mauveLight
mauveLightA
mauveDark
mauveDarkA
Mint
100
200
300
400
500
600
700
800
900
1000
1100
1200
mintLight
mintLightA
mintDark
mintDarkA
Olive
100
200
300
400
500
600
700
800
900
1000
1100
1200
oliveLight
oliveLightA
oliveDark
oliveDarkA
Orange
100
200
300
400
500
600
700
800
900
1000
1100
1200
orangeLight
orangeLightA
orangeDark
orangeDarkA
Pink
100
200
300
400
500
600
700
800
900
1000
1100
1200
pinkLight
pinkLightA
pinkDark
pinkDarkA
Plum
100
200
300
400
500
600
700
800
900
1000
1100
1200
plumLight
plumLightA
plumDark
plumDarkA
Purple
100
200
300
400
500
600
700
800
900
1000
1100
1200
purpleLight
purpleLightA
purpleDark
purpleDarkA
Red
100
200
300
400
500
600
700
800
900
1000
1100
1200
redLight
redLightA
redDark
redDarkA
Sage
100
200
300
400
500
600
700
800
900
1000
1100
1200
sageLight
sageLightA
sageDark
sageDarkA
Sand
100
200
300
400
500
600
700
800
900
1000
1100
1200
sandLight
sandLightA
sandDark
sandDarkA
Sky
100
200
300
400
500
600
700
800
900
1000
1100
1200
skyLight
skyLightA
skyDark
skyDarkA
Slate
100
200
300
400
500
600
700
800
900
1000
1100
1200
slateLight
slateLightA
slateDark
slateDarkA
Teal
100
200
300
400
500
600
700
800
900
1000
1100
1200
tealLight
tealLightA
tealDark
tealDarkA
Tomato
100
200
300
400
500
600
700
800
900
1000
1100
1200
tomatoLight
tomatoLightA
tomatoDark
tomatoDarkA
Violet
100
200
300
400
500
600
700
800
900
1000
1100
1200
violetLight
violetLightA
violetDark
violetDarkA
Yellow
100
200
300
400
500
600
700
800
900
1000
1100
1200
yellowLight
yellowLightA
yellowDark
yellowDarkA