Brand
#0c34ff
oklch(0.49 0.289 265)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#0c34ff
|
oklch(0.49 0.289 265)
|
|
|
|
| 95 |
#ecf2ff
|
oklch(0.96 0.019 265)
|
|
|
|
| 90 |
#d9e6ff
|
oklch(0.92 0.037 265)
|
|
|
|
| 80 |
#b0caff
|
oklch(0.84 0.081 265)
|
|
|
|
| 70 |
#88adff
|
oklch(0.76 0.126 265)
|
|
|
|
| 60 |
#6291ff
|
oklch(0.68 0.171 265)
|
|
|
|
| 50 |
#3268ff
|
oklch(0.58 0.231 265)
|
|
|
|
| 40 |
#0d37ff
|
oklch(0.49 0.287 265)
|
|
|
|
| 30 |
#0722d7
|
oklch(0.42 0.260 265)
|
|
|
|
| 20 |
#0414a6
|
oklch(0.34 0.217 265)
|
|
|
|
| 10 |
#01096c
|
oklch(0.25 0.159 265)
|
|
|
|
| 05 |
#010747
|
oklch(0.19 0.116 265)
|
|
|
Accent
#1c94f2
oklch(0.65 0.171 249)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#1c94f2
|
oklch(0.65 0.171 249)
|
|
|
|
| 95 |
#e8f3ff
|
oklch(0.96 0.020 249)
|
|
|
|
| 90 |
#d1e8ff
|
oklch(0.92 0.040 249)
|
|
|
|
| 80 |
#9dceff
|
oklch(0.83 0.087 249)
|
|
|
|
| 70 |
#64b4ff
|
oklch(0.75 0.135 249)
|
|
|
|
| 60 |
#2599f8
|
oklch(0.67 0.171 249)
|
|
|
|
| 50 |
#0079cb
|
oklch(0.56 0.155 249)
|
|
|
|
| 40 |
#005c9d
|
oklch(0.46 0.128 249)
|
|
|
|
| 30 |
#00487c
|
oklch(0.39 0.108 249)
|
|
|
|
| 20 |
#00345d
|
oklch(0.32 0.088 249)
|
|
|
|
| 10 |
#001f3b
|
oklch(0.23 0.065 249)
|
|
|
|
| 05 |
#001328
|
oklch(0.18 0.051 249)
|
|
|
Neutral
0.034
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#d6f5fc
oklch(0.95 0.034 213)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#d6f5fc
|
oklch(0.95 0.034 213)
|
|
|
|
| 95 |
#e8f4f7
|
oklch(0.96 0.013 213)
|
|
|
|
| 90 |
#d8e8ec
|
oklch(0.92 0.018 213)
|
|
|
|
| 80 |
#b7cdd2
|
oklch(0.83 0.025 213)
|
|
|
|
| 70 |
#99b3b9
|
oklch(0.75 0.030 213)
|
|
|
|
| 60 |
#7d9aa0
|
oklch(0.67 0.034 213)
|
|
|
|
| 50 |
#5e7a80
|
oklch(0.56 0.034 213)
|
|
|
|
| 40 |
#425e63
|
oklch(0.46 0.034 213)
|
|
|
|
| 30 |
#32494f
|
oklch(0.39 0.030 213)
|
|
|
|
| 20 |
#23363a
|
oklch(0.32 0.025 213)
|
|
|
|
| 10 |
#132023
|
oklch(0.23 0.018 213)
|
|
|
|
| 05 |
#0b1416
|
oklch(0.18 0.013 213)
|
|
|
Success
#c3f744
oklch(0.91 0.204 125)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#c3f744
|
oklch(0.91 0.204 125)
|
|
|
|
| 95 |
#e3fabe
|
oklch(0.95 0.082 125)
|
|
|
|
| 90 |
#d2f09c
|
oklch(0.91 0.112 125)
|
|
|
|
| 80 |
#b0d75f
|
oklch(0.83 0.153 125)
|
|
|
|
| 70 |
#91bd07
|
oklch(0.74 0.184 125)
|
|
|
|
| 60 |
#7ca200
|
oklch(0.66 0.165 125)
|
|
|
|
| 50 |
#618000
|
oklch(0.56 0.139 125)
|
|
|
|
| 40 |
#496100
|
oklch(0.46 0.114 125)
|
|
|
|
| 30 |
#394c00
|
oklch(0.39 0.097 125)
|
|
|
|
| 20 |
#293800
|
oklch(0.32 0.079 125)
|
|
|
|
| 10 |
#172100
|
oklch(0.23 0.058 125)
|
|
|
|
| 05 |
#0d1500
|
oklch(0.18 0.046 125)
|
|
|
Warning
#fff701
oklch(0.95 0.204 107)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#fff701
|
oklch(0.95 0.204 107)
|
|
|
|
| 95 |
#f6f5b5
|
oklch(0.96 0.082 107)
|
|
|
|
| 90 |
#ecea90
|
oklch(0.92 0.112 107)
|
|
|
|
| 80 |
#d3ce46
|
oklch(0.83 0.153 107)
|
|
|
|
| 70 |
#b9b300
|
oklch(0.75 0.160 107)
|
|
|
|
| 60 |
#9e9900
|
oklch(0.66 0.143 107)
|
|
|
|
| 50 |
#7d7900
|
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)
|
|
|
Danger
#ffc801
oklch(0.86 0.175 88)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#ffc801
|
oklch(0.86 0.175 88)
|
|
|
|
| 95 |
#fff1cd
|
oklch(0.96 0.049 88)
|
|
|
|
| 90 |
#ffe39c
|
oklch(0.92 0.094 88)
|
|
|
|
| 80 |
#edc55b
|
oklch(0.84 0.131 88)
|
|
|
|
| 70 |
#d7a800
|
oklch(0.75 0.154 88)
|
|
|
|
| 60 |
#b89000
|
oklch(0.67 0.137 88)
|
|
|
|
| 50 |
#927100
|
oklch(0.56 0.116 88)
|
|
|
|
| 40 |
#6f5600
|
oklch(0.46 0.095 88)
|
|
|
|
| 30 |
#584300
|
oklch(0.39 0.081 88)
|
|
|
|
| 20 |
#413100
|
oklch(0.32 0.066 88)
|
|
|
|
| 10 |
#271c00
|
oklch(0.24 0.048 88)
|
|
|
|
| 05 |
#191100
|
oklch(0.18 0.038 88)
|
|
|
Light
#fb8502
oklch(0.73 0.179 56)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#fb8502
|
oklch(0.73 0.179 56)
|
|
|
|
| 95 |
#ffefe4
|
oklch(0.96 0.023 56)
|
|
|
|
| 90 |
#ffdfca
|
oklch(0.93 0.046 56)
|
|
|
|
| 80 |
#ffbb8a
|
oklch(0.84 0.102 56)
|
|
|
|
| 70 |
#fe943c
|
oklch(0.76 0.161 56)
|
|
|
|
| 60 |
#e47800
|
oklch(0.68 0.167 56)
|
|
|
|
| 50 |
#b55e00
|
oklch(0.58 0.141 56)
|
|
|
|
| 40 |
#8b4700
|
oklch(0.47 0.116 56)
|
|
|
|
| 30 |
#6e3700
|
oklch(0.40 0.098 56)
|
|
|
|
| 20 |
#522700
|
oklch(0.33 0.080 56)
|
|
|
|
| 10 |
#331600
|
oklch(0.24 0.059 56)
|
|
|
|
| 05 |
#220c00
|
oklch(0.19 0.046 56)
|
|
|
Sky
#566ef3
oklch(0.59 0.200 271)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#566ef3
|
oklch(0.59 0.200 271)
|
|
|
|
| 95 |
#edf2ff
|
oklch(0.96 0.019 271)
|
|
|
|
| 90 |
#dce5ff
|
oklch(0.92 0.037 271)
|
|
|
|
| 80 |
#b7c8ff
|
oklch(0.84 0.080 271)
|
|
|
|
| 70 |
#93abff
|
oklch(0.76 0.125 271)
|
|
|
|
| 60 |
#738dff
|
oklch(0.68 0.170 271)
|
|
|
|
| 50 |
#5269ed
|
oklch(0.58 0.200 271)
|
|
|
|
| 40 |
#3a49cb
|
oklch(0.48 0.200 271)
|
|
|
|
| 30 |
#2b36a9
|
oklch(0.41 0.180 271)
|
|
|
|
| 20 |
#1e2681
|
oklch(0.33 0.150 271)
|
|
|
|
| 10 |
#101553
|
oklch(0.24 0.110 271)
|
|
|
|
| 05 |
#080d37
|
oklch(0.19 0.080 271)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls