1. Fractures
  3. Setup
  4. Colors
  5. Selectors

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