Colors

Color and Background

Colors are defined as RGB values and can be used with pure CSS classes like.bg-red-500 and.green-500 or directly with var(--green-500) or rgba(var(--rgb-gray-300), 0.1) with alpha channel.

Gray
0
25
50
100
200
300
400
500
600
700
800
900
1000
Red
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
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

Color and Background opacity

.bg-opacity-0
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
.bg-opacity-100
.color-opacity-0
.color-opacity-10
.color-opacity-20
.color-opacity-30
.color-opacity-40
.color-opacity-50
.color-opacity-60
.color-opacity-70
.color-opacity-80
.color-opacity-90
.color-opacity-100

Hover

The hover: prefix is enabled for the customizable color and background-color properties.

hover:gray-300