Accent
#bb936f
oklch(0.69 0.069 63)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#bb936f
|
oklch(0.69 0.069 63)
|
|
|
|
| 95 |
#ffefe1
|
oklch(0.96 0.026 63)
|
|
|
|
| 90 |
#f9e1cd
|
oklch(0.92 0.038 63)
|
|
|
|
| 80 |
#e3c4a8
|
oklch(0.84 0.052 63)
|
|
|
|
| 70 |
#cca887
|
oklch(0.76 0.062 63)
|
|
|
|
| 60 |
#b58d69
|
oklch(0.67 0.069 63)
|
|
|
|
| 50 |
#946e4b
|
oklch(0.57 0.069 63)
|
|
|
|
| 40 |
#76512f
|
oklch(0.47 0.069 63)
|
|
|
|
| 30 |
#5e3f21
|
oklch(0.40 0.062 63)
|
|
|
|
| 20 |
#462d15
|
oklch(0.32 0.052 63)
|
|
|
|
| 10 |
#2b1a0a
|
oklch(0.24 0.038 63)
|
|
|
|
| 05 |
#1b1006
|
oklch(0.18 0.028 63)
|
|
|
Neutral
0.02
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#ebe7f2
oklch(0.93 0.015 303)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#ebe7f2
|
oklch(0.93 0.015 303)
|
|
|
|
| 95 |
#f3f1f5
|
oklch(0.96 0.006 303)
|
|
|
|
| 90 |
#e6e4ea
|
oklch(0.92 0.008 303)
|
|
|
|
| 80 |
#cbc8d0
|
oklch(0.84 0.012 303)
|
|
|
|
| 70 |
#b0adb6
|
oklch(0.75 0.014 303)
|
|
|
|
| 60 |
#97939d
|
oklch(0.67 0.015 303)
|
|
|
|
| 50 |
#77747e
|
oklch(0.56 0.015 303)
|
|
|
|
| 40 |
#5b5861
|
oklch(0.46 0.015 303)
|
|
|
|
| 30 |
#47444c
|
oklch(0.39 0.014 303)
|
|
|
|
| 20 |
#343238
|
oklch(0.32 0.012 303)
|
|
|
|
| 10 |
#1f1d21
|
oklch(0.24 0.008 303)
|
|
|
|
| 05 |
#131215
|
oklch(0.18 0.006 303)
|
|
|
Success
#01deb6
oklch(0.80 0.154 173)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#01deb6
|
oklch(0.80 0.154 173)
|
|
|
|
| 95 |
#c6fdec
|
oklch(0.95 0.061 173)
|
|
|
|
| 90 |
#a6f5dd
|
oklch(0.91 0.084 173)
|
|
|
|
| 80 |
#69ddbe
|
oklch(0.82 0.115 173)
|
|
|
|
| 70 |
#12c5a1
|
oklch(0.73 0.138 173)
|
|
|
|
| 60 |
#00a88a
|
oklch(0.65 0.125 173)
|
|
|
|
| 50 |
#00856c
|
oklch(0.55 0.105 173)
|
|
|
|
| 40 |
#006552
|
oklch(0.45 0.087 173)
|
|
|
|
| 30 |
#005040
|
oklch(0.38 0.073 173)
|
|
|
|
| 20 |
#003a2e
|
oklch(0.31 0.060 173)
|
|
|
|
| 10 |
#00231b
|
oklch(0.23 0.044 173)
|
|
|
|
| 05 |
#001610
|
oklch(0.18 0.035 173)
|
|
|
Warning
#cdc2de
oklch(0.83 0.040 303)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#cdc2de
|
oklch(0.83 0.040 303)
|
|
|
|
| 95 |
#f4f0fb
|
oklch(0.96 0.016 303)
|
|
|
|
| 90 |
#e9e3f3
|
oklch(0.92 0.022 303)
|
|
|
|
| 80 |
#cec6db
|
oklch(0.84 0.030 303)
|
|
|
|
| 70 |
#b4aac3
|
oklch(0.76 0.036 303)
|
|
|
|
| 60 |
#9b90ab
|
oklch(0.67 0.040 303)
|
|
|
|
| 50 |
#7b718a
|
oklch(0.57 0.040 303)
|
|
|
|
| 40 |
#5f556d
|
oklch(0.47 0.040 303)
|
|
|
|
| 30 |
#4a4257
|
oklch(0.40 0.036 303)
|
|
|
|
| 20 |
#373040
|
oklch(0.32 0.030 303)
|
|
|
|
| 10 |
#201c27
|
oklch(0.24 0.022 303)
|
|
|
|
| 05 |
#141119
|
oklch(0.18 0.016 303)
|
|
|
Danger
#c5b4ff
oklch(0.81 0.106 294)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#c5b4ff
|
oklch(0.81 0.106 294)
|
|
|
|
| 95 |
#f3f0ff
|
oklch(0.96 0.021 294)
|
|
|
|
| 90 |
#e7e2ff
|
oklch(0.92 0.040 294)
|
|
|
|
| 80 |
#cec2fa
|
oklch(0.84 0.079 294)
|
|
|
|
| 70 |
#b4a5e8
|
oklch(0.76 0.095 294)
|
|
|
|
| 60 |
#9c8ad2
|
oklch(0.68 0.106 294)
|
|
|
|
| 50 |
#7c6bb0
|
oklch(0.57 0.106 294)
|
|
|
|
| 40 |
#604e91
|
oklch(0.47 0.106 294)
|
|
|
|
| 30 |
#4c3c76
|
oklch(0.40 0.095 294)
|
|
|
|
| 20 |
#382b59
|
oklch(0.33 0.079 294)
|
|
|
|
| 10 |
#211938
|
oklch(0.24 0.058 294)
|
|
|
|
| 05 |
#140f24
|
oklch(0.19 0.042 294)
|
|
|
Component Preview
Buttons
Callouts
Badges