BrandSteel Blue
#507aa2
oklch(0.57 0.078 248)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#507aa2
|
oklch(0.57 0.078 248)
|
|
|
|
| 95 |
#e7f3ff
|
oklch(0.96 0.021 248)
|
|
|
|
| 90 |
#d1e8ff
|
oklch(0.92 0.040 248)
|
|
|
|
| 80 |
#accdee
|
oklch(0.84 0.058 248)
|
|
|
|
| 70 |
#8bb2d9
|
oklch(0.75 0.070 248)
|
|
|
|
| 60 |
#6e99c3
|
oklch(0.67 0.078 248)
|
|
|
|
| 50 |
#4f79a1
|
oklch(0.56 0.078 248)
|
|
|
|
| 40 |
#335c82
|
oklch(0.46 0.078 248)
|
|
|
|
| 30 |
#244869
|
oklch(0.39 0.070 248)
|
|
|
|
| 20 |
#18354f
|
oklch(0.32 0.058 248)
|
|
|
|
| 10 |
#0c1f31
|
oklch(0.23 0.043 248)
|
|
|
|
| 05 |
#07131f
|
oklch(0.18 0.031 248)
|
|
|
AccentDeep Space Blue
#05253d
oklch(0.26 0.058 246)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#05253d
|
oklch(0.26 0.058 246)
|
|
|
|
| 95 |
#e7f3ff
|
oklch(0.96 0.021 246)
|
|
|
|
| 90 |
#d4e8fa
|
oklch(0.92 0.032 246)
|
|
|
|
| 80 |
#b2cce4
|
oklch(0.84 0.044 246)
|
|
|
|
| 70 |
#93b2ce
|
oklch(0.75 0.052 246)
|
|
|
|
| 60 |
#7799b6
|
oklch(0.67 0.058 246)
|
|
|
|
| 50 |
#587995
|
oklch(0.56 0.058 246)
|
|
|
|
| 40 |
#3d5c77
|
oklch(0.46 0.058 246)
|
|
|
|
| 30 |
#2d4860
|
oklch(0.39 0.052 246)
|
|
|
|
| 20 |
#1f3547
|
oklch(0.32 0.044 246)
|
|
|
|
| 10 |
#101f2c
|
oklch(0.23 0.032 246)
|
|
|
|
| 05 |
#09131c
|
oklch(0.18 0.023 246)
|
|
|
NeutralVanilla Cream
0.02
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#f4e9cd
oklch(0.94 0.039 89)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#f4e9cd
|
oklch(0.94 0.039 89)
|
|
|
|
| 95 |
#f4f2ec
|
oklch(0.96 0.008 89)
|
|
|
|
| 90 |
#e8e5dd
|
oklch(0.92 0.011 89)
|
|
|
|
| 80 |
#cdc9bf
|
oklch(0.84 0.015 89)
|
|
|
|
| 70 |
#b3aea2
|
oklch(0.75 0.018 89)
|
|
|
|
| 60 |
#9a9587
|
oklch(0.67 0.020 89)
|
|
|
|
| 50 |
#7a7568
|
oklch(0.56 0.020 89)
|
|
|
|
| 40 |
#5e594d
|
oklch(0.46 0.020 89)
|
|
|
|
| 30 |
#49453b
|
oklch(0.39 0.018 89)
|
|
|
|
| 20 |
#36322a
|
oklch(0.32 0.015 89)
|
|
|
|
| 10 |
#201e18
|
oklch(0.23 0.011 89)
|
|
|
|
| 05 |
#14120e
|
oklch(0.18 0.008 89)
|
|
|
SuccessTurf Green
#04724d
oklch(0.49 0.106 162)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#04724d
|
oklch(0.49 0.106 162)
|
|
|
|
| 95 |
#d8fae7
|
oklch(0.96 0.042 162)
|
|
|
|
| 90 |
#c1f0d7
|
oklch(0.92 0.058 162)
|
|
|
|
| 80 |
#97d7b7
|
oklch(0.83 0.080 162)
|
|
|
|
| 70 |
#70be98
|
oklch(0.74 0.095 162)
|
|
|
|
| 60 |
#4ca57d
|
oklch(0.66 0.106 162)
|
|
|
|
| 50 |
#26855e
|
oklch(0.55 0.106 162)
|
|
|
|
| 40 |
#006644
|
oklch(0.45 0.099 162)
|
|
|
|
| 30 |
#005035
|
oklch(0.38 0.084 162)
|
|
|
|
| 20 |
#003b26
|
oklch(0.31 0.068 162)
|
|
|
|
| 10 |
#002415
|
oklch(0.23 0.050 162)
|
|
|
|
| 05 |
#00160c
|
oklch(0.18 0.040 162)
|
|
|
WarningCanary Yellow
#faf33e
oklch(0.94 0.186 107)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#faf33e
|
oklch(0.94 0.186 107)
|
|
|
|
| 95 |
#f6f5bb
|
oklch(0.96 0.074 107)
|
|
|
|
| 90 |
#ebe998
|
oklch(0.92 0.102 107)
|
|
|
|
| 80 |
#d2ce58
|
oklch(0.83 0.140 107)
|
|
|
|
| 70 |
#b9b300
|
oklch(0.75 0.160 107)
|
|
|
|
| 60 |
#9e9900
|
oklch(0.66 0.143 107)
|
|
|
|
| 50 |
#7d7800
|
oklch(0.56 0.120 107)
|
|
|
|
| 40 |
#5f5c00
|
oklch(0.46 0.099 107)
|
|
|
|
| 30 |
#4a4800
|
oklch(0.39 0.084 107)
|
|
|
|
| 20 |
#363400
|
oklch(0.32 0.068 107)
|
|
|
|
| 10 |
#201f00
|
oklch(0.23 0.050 107)
|
|
|
|
| 05 |
#141300
|
oklch(0.18 0.040 107)
|
|
|
DangerPrimary Scarlet
#de1a1a
oklch(0.57 0.224 28)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#de1a1a
|
oklch(0.57 0.224 28)
|
|
|
|
| 95 |
#ffeeeb
|
oklch(0.96 0.019 28)
|
|
|
|
| 90 |
#ffded9
|
oklch(0.93 0.038 28)
|
|
|
|
| 80 |
#ffb8ae
|
oklch(0.85 0.085 28)
|
|
|
|
| 70 |
#ff8f81
|
oklch(0.77 0.138 28)
|
|
|
|
| 60 |
#ff5f51
|
oklch(0.69 0.198 28)
|
|
|
|
| 50 |
#e42421
|
oklch(0.59 0.224 28)
|
|
|
|
| 40 |
#b60009
|
oklch(0.49 0.200 28)
|
|
|
|
| 30 |
#910005
|
oklch(0.41 0.169 28)
|
|
|
|
| 20 |
#6d0003
|
oklch(0.34 0.138 28)
|
|
|
|
| 10 |
#460001
|
oklch(0.25 0.101 28)
|
|
|
|
| 05 |
#2f0000
|
oklch(0.19 0.079 28)
|
|
|
Dusty Rose
#d87b83
oklch(0.69 0.116 15)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#d87b83
|
oklch(0.69 0.116 15)
|
|
|
|
| 95 |
#ffeeee
|
oklch(0.96 0.019 15)
|
|
|
|
| 90 |
#ffdddf
|
oklch(0.93 0.038 15)
|
|
|
|
| 80 |
#ffb6bb
|
oklch(0.85 0.085 15)
|
|
|
|
| 70 |
#ed979d
|
oklch(0.76 0.104 15)
|
|
|
|
| 60 |
#d77a82
|
oklch(0.68 0.116 15)
|
|
|
|
| 50 |
#b35a63
|
oklch(0.58 0.116 15)
|
|
|
|
| 40 |
#933d48
|
oklch(0.48 0.116 15)
|
|
|
|
| 30 |
#772d37
|
oklch(0.41 0.104 15)
|
|
|
|
| 20 |
#5a1f27
|
oklch(0.33 0.087 15)
|
|
|
|
| 10 |
#381016
|
oklch(0.24 0.064 15)
|
|
|
|
| 05 |
#24090d
|
oklch(0.19 0.046 15)
|
|
|
Smoky Rose
#8b635c
oklch(0.54 0.054 30)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#8b635c
|
oklch(0.54 0.054 30)
|
|
|
|
| 95 |
#ffeeeb
|
oklch(0.96 0.019 30)
|
|
|
|
| 90 |
#fae0db
|
oklch(0.93 0.029 30)
|
|
|
|
| 80 |
#e4c2bb
|
oklch(0.84 0.040 30)
|
|
|
|
| 70 |
#cda59e
|
oklch(0.76 0.048 30)
|
|
|
|
| 60 |
#b68b83
|
oklch(0.68 0.054 30)
|
|
|
|
| 50 |
#946c65
|
oklch(0.57 0.054 30)
|
|
|
|
| 40 |
#765049
|
oklch(0.47 0.054 30)
|
|
|
|
| 30 |
#5e3d38
|
oklch(0.40 0.048 30)
|
|
|
|
| 20 |
#462c28
|
oklch(0.32 0.040 30)
|
|
|
|
| 10 |
#2b1916
|
oklch(0.24 0.029 30)
|
|
|
|
| 05 |
#1b0f0d
|
oklch(0.19 0.021 30)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls