WOPC Color Guide
Color Shades
Each color has 20 shades, from lightest (50) to darkest (1000), in 50-step increments.
Primary
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Secondary
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Success
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Info
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Warning
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Danger
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Blue
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Indigo
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Purple
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Pink
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Red
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Orange
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Yellow
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Green
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Teal
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Cyan
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Light
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Gray
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Dark
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Brown
50
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
950
1000
Usage Examples
Text Colors
.text-primary
.text-blue-500
.text-danger-700
class="text-primary"
Background Colors
.bg-success
.bg-indigo-200
.bg-warning-300
class="bg-success"
Buttons
class="btn btn-primary"
Borders
.border-danger
.border-top-cyan-600
class="border border-danger"
Opacity Variations
.bg-primary .bg-opacity-75
.bg-success .bg-opacity-50
.bg-warning .bg-opacity-25
class="bg-primary bg-opacity-75"
Gradients
.bg-gradient-primary
.bg-gradient-secondary
class="bg-gradient-primary"
Hover Effects
class="btn btn-primary hover:bg-primary-600"
Active States
class="btn btn-success active"
Text Colors
.text-primary
.text-blue-500
.text-danger-700
Background Colors
.bg-success
.bg-indigo-200
.bg-warning-300
Buttons
Borders
.border-danger
.border-top-cyan-600