BrandPantone 2132C
#0758c3
oklch(0.49 0.182 259)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#0758c3
|
oklch(0.49 0.182 259)
|
|
|
|
| 95 |
#eaf2ff
|
oklch(0.96 0.019 259)
|
|
|
|
| 90 |
#d6e7ff
|
oklch(0.92 0.038 259)
|
|
|
|
| 80 |
#a9cbff
|
oklch(0.84 0.082 259)
|
|
|
|
| 70 |
#7cb0ff
|
oklch(0.75 0.128 259)
|
|
|
|
| 60 |
#4e94ff
|
oklch(0.67 0.174 259)
|
|
|
|
| 50 |
#2972df
|
oklch(0.57 0.182 259)
|
|
|
|
| 40 |
#0054be
|
oklch(0.47 0.182 259)
|
|
|
|
| 30 |
#004198
|
oklch(0.40 0.154 259)
|
|
|
|
| 20 |
#002f72
|
oklch(0.32 0.125 259)
|
|
|
|
| 10 |
#001b49
|
oklch(0.24 0.092 259)
|
|
|
|
| 05 |
#001032
|
oklch(0.19 0.073 259)
|
|
|
NeutralPantone 289C
0.062
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#0c2340
oklch(0.26 0.062 256)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#0c2340
|
oklch(0.26 0.062 256)
|
|
|
|
| 95 |
#e9f3ff
|
oklch(0.96 0.020 256)
|
|
|
|
| 90 |
#d7e7fc
|
oklch(0.92 0.034 256)
|
|
|
|
| 80 |
#b6cbe8
|
oklch(0.84 0.046 256)
|
|
|
|
| 70 |
#97b0d2
|
oklch(0.75 0.056 256)
|
|
|
|
| 60 |
#7c97bb
|
oklch(0.67 0.062 256)
|
|
|
|
| 50 |
#5d779a
|
oklch(0.56 0.062 256)
|
|
|
|
| 40 |
#425b7c
|
oklch(0.46 0.062 256)
|
|
|
|
| 30 |
#314763
|
oklch(0.39 0.056 256)
|
|
|
|
| 20 |
#22344a
|
oklch(0.32 0.046 256)
|
|
|
|
| 10 |
#131f2e
|
oklch(0.23 0.034 256)
|
|
|
|
| 05 |
#0b131d
|
oklch(0.18 0.025 256)
|
|
|
SuccessPantone 2420C
#00c65f
oklch(0.72 0.196 151)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#00c65f
|
oklch(0.72 0.196 151)
|
|
|
|
| 95 |
#caffd4
|
oklch(0.95 0.078 151)
|
|
|
|
| 90 |
#acf6bc
|
oklch(0.91 0.108 151)
|
|
|
|
| 80 |
#75df91
|
oklch(0.82 0.147 151)
|
|
|
|
| 70 |
#39c66b
|
oklch(0.73 0.177 151)
|
|
|
|
| 60 |
#00ac51
|
oklch(0.65 0.177 151)
|
|
|
|
| 50 |
#00883f
|
oklch(0.55 0.149 151)
|
|
|
|
| 40 |
#00672e
|
oklch(0.45 0.122 151)
|
|
|
|
| 30 |
#005123
|
oklch(0.38 0.104 151)
|
|
|
|
| 20 |
#003c18
|
oklch(0.31 0.084 151)
|
|
|
|
| 10 |
#00240c
|
oklch(0.23 0.062 151)
|
|
|
|
| 05 |
#001705
|
oklch(0.18 0.049 151)
|
|
|
WarningPantone 109C
#ffd100
oklch(0.88 0.179 93)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#ffd100
|
oklch(0.88 0.179 93)
|
|
|
|
| 95 |
#fff1c6
|
oklch(0.96 0.059 93)
|
|
|
|
| 90 |
#fce498
|
oklch(0.92 0.098 93)
|
|
|
|
| 80 |
#e8c757
|
oklch(0.84 0.134 93)
|
|
|
|
| 70 |
#d1ab00
|
oklch(0.75 0.154 93)
|
|
|
|
| 60 |
#b39200
|
oklch(0.67 0.137 93)
|
|
|
|
| 50 |
#8d7300
|
oklch(0.56 0.116 93)
|
|
|
|
| 40 |
#6c5700
|
oklch(0.46 0.095 93)
|
|
|
|
| 30 |
#554400
|
oklch(0.39 0.081 93)
|
|
|
|
| 20 |
#3e3100
|
oklch(0.32 0.066 93)
|
|
|
|
| 10 |
#261d00
|
oklch(0.23 0.048 93)
|
|
|
|
| 05 |
#181200
|
oklch(0.18 0.038 93)
|
|
|
DangerPantone 1787C
#f4354d
oklch(0.63 0.224 20)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#f4354d
|
oklch(0.63 0.224 20)
|
|
|
|
| 95 |
#ffeeed
|
oklch(0.96 0.019 20)
|
|
|
|
| 90 |
#ffdedc
|
oklch(0.93 0.037 20)
|
|
|
|
| 80 |
#ffb7b6
|
oklch(0.85 0.084 20)
|
|
|
|
| 70 |
#ff8e8e
|
oklch(0.77 0.138 20)
|
|
|
|
| 60 |
#ff5d67
|
oklch(0.69 0.197 20)
|
|
|
|
| 50 |
#e41f40
|
oklch(0.59 0.224 20)
|
|
|
|
| 40 |
#b5002c
|
oklch(0.49 0.196 20)
|
|
|
|
| 30 |
#900021
|
oklch(0.41 0.166 20)
|
|
|
|
| 20 |
#6c0016
|
oklch(0.34 0.136 20)
|
|
|
|
| 10 |
#45000b
|
oklch(0.25 0.100 20)
|
|
|
|
| 05 |
#2f0005
|
oklch(0.19 0.078 20)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls