BrandHorizon
#0175b6
oklch(0.54 0.133 244)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#0175b6
|
oklch(0.54 0.133 244)
|
|
|
|
| 95 |
#e6f4ff
|
oklch(0.96 0.021 244)
|
|
|
|
| 90 |
#cee9ff
|
oklch(0.92 0.042 244)
|
|
|
|
| 80 |
#95cfff
|
oklch(0.83 0.090 244)
|
|
|
|
| 70 |
#66b5f4
|
oklch(0.75 0.120 244)
|
|
|
|
| 60 |
#3e9cdf
|
oklch(0.67 0.133 244)
|
|
|
|
| 50 |
#117bbc
|
oklch(0.56 0.133 244)
|
|
|
|
| 40 |
#005d93
|
oklch(0.46 0.114 244)
|
|
|
|
| 30 |
#004975
|
oklch(0.39 0.096 244)
|
|
|
|
| 20 |
#003557
|
oklch(0.32 0.079 244)
|
|
|
|
| 10 |
#002037
|
oklch(0.23 0.058 244)
|
|
|
|
| 05 |
#001425
|
oklch(0.18 0.046 244)
|
|
|
AccentDragon Fire
#f23e1c
oklch(0.63 0.220 33)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#f23e1c
|
oklch(0.63 0.220 33)
|
|
|
|
| 95 |
#ffeeea
|
oklch(0.96 0.019 33)
|
|
|
|
| 90 |
#ffded7
|
oklch(0.93 0.038 33)
|
|
|
|
| 80 |
#ffb8a9
|
oklch(0.85 0.086 33)
|
|
|
|
| 70 |
#ff9079
|
oklch(0.77 0.140 33)
|
|
|
|
| 60 |
#ff6043
|
oklch(0.69 0.200 33)
|
|
|
|
| 50 |
#e22b00
|
oklch(0.59 0.220 33)
|
|
|
|
| 40 |
#ae1f00
|
oklch(0.48 0.182 33)
|
|
|
|
| 30 |
#8b1600
|
oklch(0.41 0.154 33)
|
|
|
|
| 20 |
#680e00
|
oklch(0.33 0.125 33)
|
|
|
|
| 10 |
#420500
|
oklch(0.24 0.092 33)
|
|
|
|
| 05 |
#2d0200
|
oklch(0.19 0.073 33)
|
|
|
Neutral
0.02
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#c1d1d8
oklch(0.85 0.020 226)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#c1d1d8
|
oklch(0.85 0.020 226)
|
|
|
|
| 95 |
#ecf3f6
|
oklch(0.96 0.008 226)
|
|
|
|
| 90 |
#dee7eb
|
oklch(0.92 0.011 226)
|
|
|
|
| 80 |
#bfcbd0
|
oklch(0.84 0.015 226)
|
|
|
|
| 70 |
#a3b1b7
|
oklch(0.75 0.018 226)
|
|
|
|
| 60 |
#88979e
|
oklch(0.67 0.020 226)
|
|
|
|
| 50 |
#69787e
|
oklch(0.56 0.020 226)
|
|
|
|
| 40 |
#4d5b61
|
oklch(0.46 0.020 226)
|
|
|
|
| 30 |
#3b484d
|
oklch(0.39 0.018 226)
|
|
|
|
| 20 |
#2b3438
|
oklch(0.32 0.015 226)
|
|
|
|
| 10 |
#181f22
|
oklch(0.23 0.011 226)
|
|
|
|
| 05 |
#0f1315
|
oklch(0.18 0.008 226)
|
|
|
Success
#55d4a4
oklch(0.79 0.133 165)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#55d4a4
|
oklch(0.79 0.133 165)
|
|
|
|
| 95 |
#d0fce7
|
oklch(0.95 0.053 165)
|
|
|
|
| 90 |
#b5f3d6
|
oklch(0.91 0.073 165)
|
|
|
|
| 80 |
#84dab5
|
oklch(0.82 0.100 165)
|
|
|
|
| 70 |
#53c297
|
oklch(0.74 0.120 165)
|
|
|
|
| 60 |
#17a97c
|
oklch(0.65 0.133 165)
|
|
|
|
| 50 |
#008660
|
oklch(0.55 0.116 165)
|
|
|
|
| 40 |
#006648
|
oklch(0.45 0.095 165)
|
|
|
|
| 30 |
#005038
|
oklch(0.38 0.081 165)
|
|
|
|
| 20 |
#003b28
|
oklch(0.31 0.066 165)
|
|
|
|
| 10 |
#002317
|
oklch(0.23 0.048 165)
|
|
|
|
| 05 |
#00160d
|
oklch(0.18 0.038 165)
|
|
|
Warning
#e1af36
oklch(0.78 0.143 85)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#e1af36
|
oklch(0.78 0.143 85)
|
|
|
|
| 95 |
#fff0d2
|
oklch(0.96 0.042 85)
|
|
|
|
| 90 |
#fee2aa
|
oklch(0.92 0.079 85)
|
|
|
|
| 80 |
#eac575
|
oklch(0.84 0.107 85)
|
|
|
|
| 70 |
#d4a842
|
oklch(0.75 0.128 85)
|
|
|
|
| 60 |
#bd8e00
|
oklch(0.67 0.138 85)
|
|
|
|
| 50 |
#957000
|
oklch(0.57 0.116 85)
|
|
|
|
| 40 |
#725400
|
oklch(0.47 0.096 85)
|
|
|
|
| 30 |
#5a4200
|
oklch(0.39 0.081 85)
|
|
|
|
| 20 |
#423000
|
oklch(0.32 0.066 85)
|
|
|
|
| 10 |
#291c00
|
oklch(0.24 0.049 85)
|
|
|
|
| 05 |
#1a1100
|
oklch(0.18 0.038 85)
|
|
|
Danger
#fc998a
oklch(0.78 0.122 29)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#fc998a
|
oklch(0.78 0.122 29)
|
|
|
|
| 95 |
#ffeeeb
|
oklch(0.96 0.019 29)
|
|
|
|
| 90 |
#ffded8
|
oklch(0.93 0.038 29)
|
|
|
|
| 80 |
#ffb8ac
|
oklch(0.85 0.085 29)
|
|
|
|
| 70 |
#f09789
|
oklch(0.76 0.110 29)
|
|
|
|
| 60 |
#da7a6c
|
oklch(0.68 0.122 29)
|
|
|
|
| 50 |
#b65a4e
|
oklch(0.58 0.122 29)
|
|
|
|
| 40 |
#953d32
|
oklch(0.48 0.122 29)
|
|
|
|
| 30 |
#792c24
|
oklch(0.40 0.110 29)
|
|
|
|
| 20 |
#5c1e18
|
oklch(0.33 0.091 29)
|
|
|
|
| 10 |
#3a100b
|
oklch(0.24 0.067 29)
|
|
|
|
| 05 |
#250906
|
oklch(0.19 0.049 29)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls