Brand
#55b7ff
oklch(0.75 0.139 243)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#55b7ff
|
oklch(0.75 0.139 243)
|
|
|
|
| 95 |
#e6f4ff
|
oklch(0.96 0.021 243)
|
|
|
|
| 90 |
#cee9ff
|
oklch(0.92 0.042 243)
|
|
|
|
| 80 |
#95d0ff
|
oklch(0.83 0.091 243)
|
|
|
|
| 70 |
#61b6f6
|
oklch(0.75 0.125 243)
|
|
|
|
| 60 |
#369ce2
|
oklch(0.67 0.139 243)
|
|
|
|
| 50 |
#007bbe
|
oklch(0.56 0.137 243)
|
|
|
|
| 40 |
#005e92
|
oklch(0.46 0.113 243)
|
|
|
|
| 30 |
#004974
|
oklch(0.39 0.096 243)
|
|
|
|
| 20 |
#003557
|
oklch(0.32 0.078 243)
|
|
|
|
| 10 |
#002036
|
oklch(0.23 0.057 243)
|
|
|
|
| 05 |
#001424
|
oklch(0.18 0.045 243)
|
|
|
Accent
#69be57
oklch(0.72 0.162 140)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#69be57
|
oklch(0.72 0.162 140)
|
|
|
|
| 95 |
#d9fbd2
|
oklch(0.95 0.065 140)
|
|
|
|
| 90 |
#c3f2b9
|
oklch(0.91 0.089 140)
|
|
|
|
| 80 |
#9ad98d
|
oklch(0.82 0.122 140)
|
|
|
|
| 70 |
#75c065
|
oklch(0.74 0.146 140)
|
|
|
|
| 60 |
#53a740
|
oklch(0.65 0.162 140)
|
|
|
|
| 50 |
#31861b
|
oklch(0.55 0.162 140)
|
|
|
|
| 40 |
#1a6700
|
oklch(0.45 0.146 140)
|
|
|
|
| 30 |
#125100
|
oklch(0.38 0.124 140)
|
|
|
|
| 20 |
#0b3c00
|
oklch(0.31 0.101 140)
|
|
|
|
| 10 |
#042400
|
oklch(0.23 0.074 140)
|
|
|
|
| 05 |
#021700
|
oklch(0.18 0.059 140)
|
|
|
Neutral
0.014
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#ddd4cd
oklch(0.88 0.014 61)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#ddd4cd
|
oklch(0.88 0.014 61)
|
|
|
|
| 95 |
#f5f1ee
|
oklch(0.96 0.006 61)
|
|
|
|
| 90 |
#e9e4e0
|
oklch(0.92 0.008 61)
|
|
|
|
| 80 |
#cfc8c3
|
oklch(0.84 0.010 61)
|
|
|
|
| 70 |
#b5ada7
|
oklch(0.75 0.012 61)
|
|
|
|
| 60 |
#9c938d
|
oklch(0.67 0.014 61)
|
|
|
|
| 50 |
#7c746e
|
oklch(0.56 0.014 61)
|
|
|
|
| 40 |
#5f5852
|
oklch(0.46 0.014 61)
|
|
|
|
| 30 |
#4b443f
|
oklch(0.39 0.012 61)
|
|
|
|
| 20 |
#37322e
|
oklch(0.32 0.010 61)
|
|
|
|
| 10 |
#211d1a
|
oklch(0.24 0.008 61)
|
|
|
|
| 05 |
#141210
|
oklch(0.18 0.006 61)
|
|
|
Success
#91cc54
oklch(0.78 0.163 131)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#91cc54
|
oklch(0.78 0.163 131)
|
|
|
|
| 95 |
#e1facc
|
oklch(0.95 0.065 131)
|
|
|
|
| 90 |
#cef0b1
|
oklch(0.92 0.090 131)
|
|
|
|
| 80 |
#aad781
|
oklch(0.83 0.122 131)
|
|
|
|
| 70 |
#89bd54
|
oklch(0.74 0.147 131)
|
|
|
|
| 60 |
#6ca427
|
oklch(0.66 0.163 131)
|
|
|
|
| 50 |
#508300
|
oklch(0.55 0.152 131)
|
|
|
|
| 40 |
#3c6400
|
oklch(0.46 0.125 131)
|
|
|
|
| 30 |
#2e4e00
|
oklch(0.38 0.106 131)
|
|
|
|
| 20 |
#203900
|
oklch(0.31 0.086 131)
|
|
|
|
| 10 |
#112200
|
oklch(0.23 0.064 131)
|
|
|
|
| 05 |
#091600
|
oklch(0.18 0.050 131)
|
|
|
Warning
#e1d948
oklch(0.87 0.160 106)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#e1d948
|
oklch(0.87 0.160 106)
|
|
|
|
| 95 |
#f6f4c3
|
oklch(0.96 0.064 106)
|
|
|
|
| 90 |
#ebe9a4
|
oklch(0.92 0.088 106)
|
|
|
|
| 80 |
#d2cd6c
|
oklch(0.83 0.120 106)
|
|
|
|
| 70 |
#b9b230
|
oklch(0.75 0.144 106)
|
|
|
|
| 60 |
#a09800
|
oklch(0.67 0.142 106)
|
|
|
|
| 50 |
#7e7800
|
oklch(0.56 0.120 106)
|
|
|
|
| 40 |
#605b00
|
oklch(0.46 0.099 106)
|
|
|
|
| 30 |
#4b4700
|
oklch(0.39 0.084 106)
|
|
|
|
| 20 |
#373400
|
oklch(0.32 0.068 106)
|
|
|
|
| 10 |
#211f00
|
oklch(0.23 0.050 106)
|
|
|
|
| 05 |
#141300
|
oklch(0.18 0.040 106)
|
|
|
Danger
#e7b121
oklch(0.79 0.155 85)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#e7b121
|
oklch(0.79 0.155 85)
|
|
|
|
| 95 |
#fff0d2
|
oklch(0.96 0.043 85)
|
|
|
|
| 90 |
#ffe2a5
|
oklch(0.92 0.084 85)
|
|
|
|
| 80 |
#ecc46c
|
oklch(0.84 0.116 85)
|
|
|
|
| 70 |
#d7a731
|
oklch(0.75 0.139 85)
|
|
|
|
| 60 |
#bc8e00
|
oklch(0.67 0.138 85)
|
|
|
|
| 50 |
#957000
|
oklch(0.57 0.116 85)
|
|
|
|
| 40 |
#725500
|
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)
|
|
|
Unassigned
#c2e459
oklch(0.87 0.168 122)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#c2e459
|
oklch(0.87 0.168 122)
|
|
|
|
| 95 |
#e9f8c6
|
oklch(0.96 0.067 122)
|
|
|
|
| 90 |
#d9eea8
|
oklch(0.92 0.092 122)
|
|
|
|
| 80 |
#b9d473
|
oklch(0.83 0.126 122)
|
|
|
|
| 70 |
#9dba3e
|
oklch(0.74 0.151 122)
|
|
|
|
| 60 |
#83a000
|
oklch(0.66 0.160 122)
|
|
|
|
| 50 |
#677e00
|
oklch(0.56 0.134 122)
|
|
|
|
| 40 |
#4e6000
|
oklch(0.46 0.111 122)
|
|
|
|
| 30 |
#3c4b00
|
oklch(0.39 0.094 122)
|
|
|
|
| 20 |
#2c3700
|
oklch(0.32 0.076 122)
|
|
|
|
| 10 |
#192100
|
oklch(0.23 0.056 122)
|
|
|
|
| 05 |
#0f1400
|
oklch(0.18 0.044 122)
|
|
|
Unassigned
#78e5ff
oklch(0.87 0.106 215)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#78e5ff
|
oklch(0.87 0.106 215)
|
|
|
|
| 95 |
#d8f7ff
|
oklch(0.96 0.034 215)
|
|
|
|
| 90 |
#b8eefc
|
oklch(0.92 0.058 215)
|
|
|
|
| 80 |
#88d5e8
|
oklch(0.83 0.080 215)
|
|
|
|
| 70 |
#5bbbd2
|
oklch(0.74 0.096 215)
|
|
|
|
| 60 |
#2ba2bb
|
oklch(0.66 0.106 215)
|
|
|
|
| 50 |
#008197
|
oklch(0.56 0.098 215)
|
|
|
|
| 40 |
#006273
|
oklch(0.46 0.081 215)
|
|
|
|
| 30 |
#004d5b
|
oklch(0.39 0.068 215)
|
|
|
|
| 20 |
#003843
|
oklch(0.32 0.056 215)
|
|
|
|
| 10 |
#002229
|
oklch(0.23 0.041 215)
|
|
|
|
| 05 |
#00151b
|
oklch(0.18 0.032 215)
|
|
|
Component Preview
Buttons
Callouts
Badges
Progress & Controls