Tailwind Colors
Explore all Tailwind CSS v4 and v3 colors. Click-to-copy OKLCH, hex code and HSL values. Preview the colors in real-world UI examples and check accessible contrast ratios.
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950