Colors
Color and Background
Colors are defined as HSL
values, and can be used with pure CSS classes like.bg-red-500
or directly, var(--green-500)
or hsla(var(--hsl-gray-300), 0.1)
with alpha channel. Scales are linear by default, but all the steps are exposed and customizable.
For example, to have a slightly different purple scale, add
--hsl-purple: 261,80%;
to:root
.To update a single color to a more tone-correct one, you can add
--green-600: #0F0
to:root
.
Gray
0
25
50
100
200
300
400
500
600
700
800
900
1000
Red
100
200
300
400
500
600
700
800
900
Orange
100
200
300
400
500
600
700
800
900
Yellow
100
200
300
400
500
600
700
800
900
Green
100
200
300
400
500
600
700
800
900
Aqua
100
200
300
400
500
600
700
800
900
Blue
100
200
300
400
500
600
700
800
900
Purple
100
200
300
400
500
600
700
800
900
Pink
100
200
300
400
500
600
700
800
900