File: colors.md | Updated: 11/15/2025
ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors
Documentation Custom palette Blog
Comprehensive color system for designing beautiful, accessible websites and apps.
Backgrounds
Interactive components
Borders and separators
Solid colors
Accessible text
1
2
3
4
5
6
7
8
9
10
11
12
Graygray 1gray 2gray 3gray 4gray 5gray 6gray 7gray 8gray 9gray 10gray 11gray 12Mauvemauve 1mauve 2mauve 3mauve 4mauve 5mauve 6mauve 7mauve 8mauve 9mauve 10mauve 11mauve 12Slateslate 1slate 2slate 3slate 4slate 5slate 6slate 7slate 8slate 9slate 10slate 11slate 12Sagesage 1sage 2sage 3sage 4sage 5sage 6sage 7sage 8sage 9sage 10sage 11sage 12Oliveolive 1olive 2olive 3olive 4olive 5olive 6olive 7olive 8olive 9olive 10olive 11olive 12Sandsand 1sand 2sand 3sand 4sand 5sand 6sand 7sand 8sand 9sand 10sand 11sand 12Tomatotomato 1tomato 2tomato 3tomato 4tomato 5tomato 6tomato 7tomato 8tomato 9tomato 10tomato 11tomato 12Redred 1red 2red 3red 4red 5red 6red 7red 8red 9red 10red 11red 12Rubyruby 1ruby 2ruby 3ruby 4ruby 5ruby 6ruby 7ruby 8ruby 9ruby 10ruby 11ruby 12Crimsoncrimson 1crimson 2crimson 3crimson 4crimson 5crimson 6crimson 7crimson 8crimson 9crimson 10crimson 11crimson 12Pinkpink 1pink 2pink 3pink 4pink 5pink 6pink 7pink 8pink 9pink 10pink 11pink 12Plumplum 1plum 2plum 3plum 4plum 5plum 6plum 7plum 8plum 9plum 10plum 11plum 12Purplepurple 1purple 2purple 3purple 4purple 5purple 6purple 7purple 8purple 9purple 10purple 11purple 12Violetviolet 1violet 2violet 3violet 4violet 5violet 6violet 7violet 8violet 9violet 10violet 11violet 12Irisiris 1iris 2iris 3iris 4iris 5iris 6iris 7iris 8iris 9iris 10iris 11iris 12Indigoindigo 1indigo 2indigo 3indigo 4indigo 5indigo 6indigo 7indigo 8indigo 9indigo 10indigo 11indigo 12Blueblue 1blue 2blue 3blue 4blue 5blue 6blue 7blue 8blue 9blue 10blue 11blue 12Cyancyan 1cyan 2cyan 3cyan 4cyan 5cyan 6cyan 7cyan 8cyan 9cyan 10cyan 11cyan 12Tealteal 1teal 2teal 3teal 4teal 5teal 6teal 7teal 8teal 9teal 10teal 11teal 12Jadejade 1jade 2jade 3jade 4jade 5jade 6jade 7jade 8jade 9jade 10jade 11jade 12Greengreen 1green 2green 3green 4green 5green 6green 7green 8green 9green 10green 11green 12Grassgrass 1grass 2grass 3grass 4grass 5grass 6grass 7grass 8grass 9grass 10grass 11grass 12Bronzebronze 1bronze 2bronze 3bronze 4bronze 5bronze 6bronze 7bronze 8bronze 9bronze 10bronze 11bronze 12Goldgold 1gold 2gold 3gold 4gold 5gold 6gold 7gold 8gold 9gold 10gold 11gold 12Brownbrown 1brown 2brown 3brown 4brown 5brown 6brown 7brown 8brown 9brown 10brown 11brown 12Orangeorange 1orange 2orange 3orange 4orange 5orange 6orange 7orange 8orange 9orange 10orange 11orange 12Amberamber 1amber 2amber 3amber 4amber 5amber 6amber 7amber 8amber 9amber 10amber 11amber 12Yellowyellow 1yellow 2yellow 3yellow 4yellow 5yellow 6yellow 7yellow 8yellow 9yellow 10yellow 11yellow 12Limelime 1lime 2lime 3lime 4lime 5lime 6lime 7lime 8lime 9lime 10lime 11lime 12Mintmint 1mint 2mint 3mint 4mint 5mint 6mint 7mint 8mint 9mint 10mint 11mint 12Skysky 1sky 2sky 3sky 4sky 5sky 6sky 7sky 8sky 9sky 10sky 11sky 12
Shadows, highlights, and overlays
1
2
3
4
5
6
7
8
9
10
11
12
Blackblack 1black 2black 3black 4black 5black 6black 7black 8black 9black 10black 11black 12Whitewhite 1white 2white 3white 4white 5white 6white 7white 8white 9white 10white 11white 12
Text colors are guaranteed to pass target contrast ratios against the corresponding background colors.
Switching to dark theme is as simple as applying a class to a container. Dark mode Just Works™.
Each scale has a matching alpha color variant, which is handy for UI components that need to blend into colored backgrounds.
Contrast targets are based on the modern APCA contrast algorithm, which accurately predicts how human vision perceives text.
Accounts for the blending differences in the wide gamut color spaces and enables the brightest yellows and reds possible.
Each step is designed with a specific use case in mind, such as backgrounds, hover states, borders, overlays, or text.
Directory listing - 2 item(s) total