BrandPrimary
#1f584f
oklch(0.42 0.061 181)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#1f584f
|
oklch(0.42 0.061 181)
|
|
|
|
| 95 |
#e0f7f2
|
oklch(0.96 0.024 181)
|
|
|
|
| 90 |
#cdece5
|
oklch(0.92 0.034 181)
|
|
|
|
| 80 |
#a8d2c9
|
oklch(0.83 0.046 181)
|
|
|
|
| 70 |
#86b8ae
|
oklch(0.74 0.055 181)
|
|
|
|
| 60 |
#689f95
|
oklch(0.66 0.061 181)
|
|
|
|
| 50 |
#487f75
|
oklch(0.56 0.061 181)
|
|
|
|
| 40 |
#2a6259
|
oklch(0.46 0.061 181)
|
|
|
|
| 30 |
#1c4d46
|
oklch(0.39 0.055 181)
|
|
|
|
| 20 |
#113933
|
oklch(0.31 0.046 181)
|
|
|
|
| 10 |
#07221e
|
oklch(0.23 0.034 181)
|
|
|
|
| 05 |
#051512
|
oklch(0.18 0.024 181)
|
|
|
Accent
#38978d
oklch(0.62 0.090 185)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#38978d
|
oklch(0.62 0.090 185)
|
|
|
|
| 95 |
#d7f9f4
|
oklch(0.96 0.036 185)
|
|
|
|
| 90 |
#c0efe8
|
oklch(0.92 0.049 185)
|
|
|
|
| 80 |
#94d5cd
|
oklch(0.83 0.067 185)
|
|
|
|
| 70 |
#6cbcb2
|
oklch(0.74 0.081 185)
|
|
|
|
| 60 |
#46a499
|
oklch(0.66 0.090 185)
|
|
|
|
| 50 |
#1d837a
|
oklch(0.55 0.090 185)
|
|
|
|
| 40 |
#00655d
|
oklch(0.45 0.080 185)
|
|
|
|
| 30 |
#004f48
|
oklch(0.38 0.068 185)
|
|
|
|
| 20 |
#003a35
|
oklch(0.31 0.055 185)
|
|
|
|
| 10 |
#00231f
|
oklch(0.23 0.041 185)
|
|
|
|
| 05 |
#001613
|
oklch(0.18 0.032 185)
|
|
|
Neutral
0.02
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#f7f7f7
oklch(0.98 0.000 90)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#f7f7f7
|
oklch(0.98 0.000 90)
|
|
|
|
| 95 |
#f2f2f2
|
oklch(0.96 0.000 90)
|
|
|
|
| 90 |
#e5e5e5
|
oklch(0.92 0.000 90)
|
|
|
|
| 80 |
#c9c9c9
|
oklch(0.84 0.000 90)
|
|
|
|
| 70 |
#aeaeae
|
oklch(0.75 0.000 90)
|
|
|
|
| 60 |
#959595
|
oklch(0.67 0.000 90)
|
|
|
|
| 50 |
#757575
|
oklch(0.56 0.000 90)
|
|
|
|
| 40 |
#595959
|
oklch(0.46 0.000 90)
|
|
|
|
| 30 |
#464646
|
oklch(0.39 0.000 90)
|
|
|
|
| 20 |
#333333
|
oklch(0.32 0.000 90)
|
|
|
|
| 10 |
#1e1e1e
|
oklch(0.23 0.000 90)
|
|
|
|
| 05 |
#121212
|
oklch(0.18 0.000 90)
|
|
|
Success
#71b842
oklch(0.71 0.168 135)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#71b842
|
oklch(0.71 0.168 135)
|
|
|
|
| 95 |
#ddfbce
|
oklch(0.95 0.067 135)
|
|
|
|
| 90 |
#c8f1b3
|
oklch(0.91 0.092 135)
|
|
|
|
| 80 |
#a2d884
|
oklch(0.82 0.126 135)
|
|
|
|
| 70 |
#7fbf58
|
oklch(0.74 0.151 135)
|
|
|
|
| 60 |
#60a62e
|
oklch(0.66 0.168 135)
|
|
|
|
| 50 |
#438500
|
oklch(0.55 0.161 135)
|
|
|
|
| 40 |
#326500
|
oklch(0.45 0.133 135)
|
|
|
|
| 30 |
#264f00
|
oklch(0.38 0.112 135)
|
|
|
|
| 20 |
#1a3a00
|
oklch(0.31 0.092 135)
|
|
|
|
| 10 |
#0d2300
|
oklch(0.23 0.068 135)
|
|
|
|
| 05 |
#061600
|
oklch(0.18 0.053 135)
|
|
|
Warning
#fe9e1b
oklch(0.78 0.168 66)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#fe9e1b
|
oklch(0.78 0.168 66)
|
|
|
|
| 95 |
#ffefe0
|
oklch(0.96 0.027 66)
|
|
|
|
| 90 |
#ffe0c2
|
oklch(0.92 0.053 66)
|
|
|
|
| 80 |
#ffbc76
|
oklch(0.84 0.116 66)
|
|
|
|
| 70 |
#f19b34
|
oklch(0.76 0.151 66)
|
|
|
|
| 60 |
#d58200
|
oklch(0.68 0.151 66)
|
|
|
|
| 50 |
#a96600
|
oklch(0.57 0.127 66)
|
|
|
|
| 40 |
#824d00
|
oklch(0.47 0.105 66)
|
|
|
|
| 30 |
#673c00
|
oklch(0.40 0.089 66)
|
|
|
|
| 20 |
#4c2b00
|
oklch(0.32 0.072 66)
|
|
|
|
| 10 |
#2f1900
|
oklch(0.24 0.053 66)
|
|
|
|
| 05 |
#1f0e00
|
oklch(0.19 0.042 66)
|
|
|
Danger
#ca4c29
oklch(0.58 0.168 36)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#ca4c29
|
oklch(0.58 0.168 36)
|
|
|
|
| 95 |
#ffeeea
|
oklch(0.96 0.020 36)
|
|
|
|
| 90 |
#ffded5
|
oklch(0.93 0.039 36)
|
|
|
|
| 80 |
#ffb9a5
|
oklch(0.84 0.087 36)
|
|
|
|
| 70 |
#ff9072
|
oklch(0.77 0.141 36)
|
|
|
|
| 60 |
#ef6e4b
|
oklch(0.69 0.168 36)
|
|
|
|
| 50 |
#ca4c29
|
oklch(0.58 0.168 36)
|
|
|
|
| 40 |
#a72c00
|
oklch(0.48 0.165 36)
|
|
|
|
| 30 |
#852100
|
oklch(0.41 0.140 36)
|
|
|
|
| 20 |
#641600
|
oklch(0.33 0.114 36)
|
|
|
|
| 10 |
#3f0a00
|
oklch(0.24 0.084 36)
|
|
|
|
| 05 |
#2b0500
|
oklch(0.19 0.066 36)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls