BrandCrimson Violet
#751847
oklch(0.38 0.134 355)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#751847
|
oklch(0.38 0.134 355)
|
|
|
|
| 95 |
#ffedf3
|
oklch(0.96 0.021 355)
|
|
|
|
| 90 |
#ffdce9
|
oklch(0.93 0.042 355)
|
|
|
|
| 80 |
#ffb4d1
|
oklch(0.85 0.094 355)
|
|
|
|
| 70 |
#ef92b7
|
oklch(0.77 0.120 355)
|
|
|
|
| 60 |
#d9759f
|
oklch(0.69 0.134 355)
|
|
|
|
| 50 |
#b6557f
|
oklch(0.58 0.134 355)
|
|
|
|
| 40 |
#953762
|
oklch(0.48 0.134 355)
|
|
|
|
| 30 |
#79274d
|
oklch(0.41 0.120 355)
|
|
|
|
| 20 |
#5b1a39
|
oklch(0.33 0.100 355)
|
|
|
|
| 10 |
#390d22
|
oklch(0.24 0.074 355)
|
|
|
|
| 05 |
#250815
|
oklch(0.19 0.054 355)
|
|
|
AccentDusk Blue
#355070
oklch(0.42 0.063 253)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#355070
|
oklch(0.42 0.063 253)
|
|
|
|
| 95 |
#e9f3ff
|
oklch(0.96 0.020 253)
|
|
|
|
| 90 |
#d6e7fc
|
oklch(0.92 0.035 253)
|
|
|
|
| 80 |
#b4cce8
|
oklch(0.84 0.047 253)
|
|
|
|
| 70 |
#96b1d2
|
oklch(0.75 0.057 253)
|
|
|
|
| 60 |
#7a97bb
|
oklch(0.67 0.063 253)
|
|
|
|
| 50 |
#5b789a
|
oklch(0.56 0.063 253)
|
|
|
|
| 40 |
#405b7c
|
oklch(0.46 0.063 253)
|
|
|
|
| 30 |
#2f4763
|
oklch(0.39 0.057 253)
|
|
|
|
| 20 |
#21344a
|
oklch(0.32 0.047 253)
|
|
|
|
| 10 |
#121f2e
|
oklch(0.23 0.035 253)
|
|
|
|
| 05 |
#0a131d
|
oklch(0.18 0.025 253)
|
|
|
NeutralAlabaster Grey
0.02
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#dde1e4
oklch(0.91 0.006 240)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#dde1e4
|
oklch(0.91 0.006 240)
|
|
|
|
| 95 |
#f0f2f3
|
oklch(0.96 0.002 240)
|
|
|
|
| 90 |
#e3e6e7
|
oklch(0.92 0.003 240)
|
|
|
|
| 80 |
#c7cacc
|
oklch(0.84 0.004 240)
|
|
|
|
| 70 |
#abafb1
|
oklch(0.75 0.005 240)
|
|
|
|
| 60 |
#929598
|
oklch(0.67 0.006 240)
|
|
|
|
| 50 |
#727679
|
oklch(0.56 0.006 240)
|
|
|
|
| 40 |
#565a5c
|
oklch(0.46 0.006 240)
|
|
|
|
| 30 |
#434648
|
oklch(0.39 0.005 240)
|
|
|
|
| 20 |
#313335
|
oklch(0.32 0.004 240)
|
|
|
|
| 10 |
#1d1e1f
|
oklch(0.23 0.003 240)
|
|
|
|
| 05 |
#111213
|
oklch(0.18 0.002 240)
|
|
|
SuccessForrest Green
#4d8b31
oklch(0.57 0.139 137)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#4d8b31
|
oklch(0.57 0.139 137)
|
|
|
|
| 95 |
#dff9d5
|
oklch(0.96 0.056 137)
|
|
|
|
| 90 |
#cbf0be
|
oklch(0.92 0.077 137)
|
|
|
|
| 80 |
#a6d693
|
oklch(0.83 0.104 137)
|
|
|
|
| 70 |
#84bd6d
|
oklch(0.74 0.125 137)
|
|
|
|
| 60 |
#65a44b
|
oklch(0.66 0.139 137)
|
|
|
|
| 50 |
#468429
|
oklch(0.55 0.139 137)
|
|
|
|
| 40 |
#296600
|
oklch(0.45 0.138 137)
|
|
|
|
| 30 |
#1f5000
|
oklch(0.38 0.117 137)
|
|
|
|
| 20 |
#153b00
|
oklch(0.31 0.095 137)
|
|
|
|
| 10 |
#092300
|
oklch(0.23 0.070 137)
|
|
|
|
| 05 |
#041600
|
oklch(0.18 0.055 137)
|
|
|
WarningBright Amber
#efca08
oklch(0.85 0.173 96)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#efca08
|
oklch(0.85 0.173 96)
|
|
|
|
| 95 |
#fff2be
|
oklch(0.96 0.068 96)
|
|
|
|
| 90 |
#f8e59b
|
oklch(0.92 0.095 96)
|
|
|
|
| 80 |
#e3c85d
|
oklch(0.84 0.130 96)
|
|
|
|
| 70 |
#ccac00
|
oklch(0.75 0.154 96)
|
|
|
|
| 60 |
#af9300
|
oklch(0.67 0.138 96)
|
|
|
|
| 50 |
#8a7400
|
oklch(0.56 0.116 96)
|
|
|
|
| 40 |
#6a5800
|
oklch(0.46 0.095 96)
|
|
|
|
| 30 |
#534500
|
oklch(0.39 0.081 96)
|
|
|
|
| 20 |
#3d3200
|
oklch(0.32 0.066 96)
|
|
|
|
| 10 |
#251d00
|
oklch(0.23 0.048 96)
|
|
|
|
| 05 |
#171200
|
oklch(0.18 0.038 96)
|
|
|
DangerStrawberry Red
#fb3640
oklch(0.65 0.230 24)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#fb3640
|
oklch(0.65 0.230 24)
|
|
|
|
| 95 |
#ffeeec
|
oklch(0.96 0.019 24)
|
|
|
|
| 90 |
#ffdedb
|
oklch(0.93 0.038 24)
|
|
|
|
| 80 |
#ffb7b1
|
oklch(0.85 0.084 24)
|
|
|
|
| 70 |
#ff8e88
|
oklch(0.77 0.138 24)
|
|
|
|
| 60 |
#ff5e5c
|
oklch(0.69 0.197 24)
|
|
|
|
| 50 |
#e7192f
|
oklch(0.59 0.230 24)
|
|
|
|
| 40 |
#b6001e
|
oklch(0.49 0.198 24)
|
|
|
|
| 30 |
#910016
|
oklch(0.41 0.167 24)
|
|
|
|
| 20 |
#6d000e
|
oklch(0.34 0.136 24)
|
|
|
|
| 10 |
#450005
|
oklch(0.25 0.100 24)
|
|
|
|
| 05 |
#2f0003
|
oklch(0.19 0.079 24)
|
|
|
Baby Blue Ice
#a4bef3
oklch(0.80 0.081 264)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#a4bef3
|
oklch(0.80 0.081 264)
|
|
|
|
| 95 |
#ebf2ff
|
oklch(0.96 0.019 264)
|
|
|
|
| 90 |
#d9e6ff
|
oklch(0.92 0.037 264)
|
|
|
|
| 80 |
#b6caf2
|
oklch(0.84 0.061 264)
|
|
|
|
| 70 |
#98afde
|
oklch(0.75 0.073 264)
|
|
|
|
| 60 |
#7c95c8
|
oklch(0.67 0.081 264)
|
|
|
|
| 50 |
#5e75a6
|
oklch(0.56 0.081 264)
|
|
|
|
| 40 |
#435987
|
oklch(0.47 0.081 264)
|
|
|
|
| 30 |
#32456d
|
oklch(0.39 0.073 264)
|
|
|
|
| 20 |
#233252
|
oklch(0.32 0.061 264)
|
|
|
|
| 10 |
#131e33
|
oklch(0.24 0.044 264)
|
|
|
|
| 05 |
#0b1221
|
oklch(0.18 0.032 264)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls