BrandTeal
#0e8080
oklch(0.54 0.090 195)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#0e8080
|
oklch(0.54 0.090 195)
|
|
|
|
| 95 |
#d6f9f8
|
oklch(0.96 0.036 195)
|
|
|
|
| 90 |
#beeeed
|
oklch(0.92 0.050 195)
|
|
|
|
| 80 |
#92d5d4
|
oklch(0.83 0.068 195)
|
|
|
|
| 70 |
#69bcbb
|
oklch(0.74 0.081 195)
|
|
|
|
| 60 |
#41a3a3
|
oklch(0.66 0.090 195)
|
|
|
|
| 50 |
#148383
|
oklch(0.55 0.090 195)
|
|
|
|
| 40 |
#006464
|
oklch(0.46 0.078 195)
|
|
|
|
| 30 |
#004e4e
|
oklch(0.38 0.066 195)
|
|
|
|
| 20 |
#003939
|
oklch(0.31 0.054 195)
|
|
|
|
| 10 |
#002222
|
oklch(0.23 0.040 195)
|
|
|
|
| 05 |
#001616
|
oklch(0.18 0.031 195)
|
|
|
AccentCamel
#c48f60
oklch(0.69 0.090 62)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#c48f60
|
oklch(0.69 0.090 62)
|
|
|
|
| 95 |
#ffefe2
|
oklch(0.96 0.025 62)
|
|
|
|
| 90 |
#ffe0c5
|
oklch(0.92 0.049 62)
|
|
|
|
| 80 |
#ebc19e
|
oklch(0.84 0.068 62)
|
|
|
|
| 70 |
#d6a57a
|
oklch(0.76 0.081 62)
|
|
|
|
| 60 |
#bf8a5b
|
oklch(0.68 0.090 62)
|
|
|
|
| 50 |
#9d6a3c
|
oklch(0.57 0.090 62)
|
|
|
|
| 40 |
#7e4e1e
|
oklch(0.47 0.090 62)
|
|
|
|
| 30 |
#663c10
|
oklch(0.40 0.081 62)
|
|
|
|
| 20 |
#4c2b08
|
oklch(0.32 0.068 62)
|
|
|
|
| 10 |
#2f1903
|
oklch(0.24 0.050 62)
|
|
|
|
| 05 |
#1e0f02
|
oklch(0.19 0.036 62)
|
|
|
NeutralParchment
0.02
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#f0eeeb
oklch(0.95 0.005 78)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#f0eeeb
|
oklch(0.95 0.005 78)
|
|
|
|
| 95 |
#f2f2f0
|
oklch(0.96 0.002 78)
|
|
|
|
| 90 |
#e6e5e3
|
oklch(0.92 0.002 78)
|
|
|
|
| 80 |
#cac9c7
|
oklch(0.84 0.003 78)
|
|
|
|
| 70 |
#b0aeac
|
oklch(0.75 0.004 78)
|
|
|
|
| 60 |
#979592
|
oklch(0.67 0.005 78)
|
|
|
|
| 50 |
#777573
|
oklch(0.56 0.005 78)
|
|
|
|
| 40 |
#5b5956
|
oklch(0.46 0.005 78)
|
|
|
|
| 30 |
#474543
|
oklch(0.39 0.004 78)
|
|
|
|
| 20 |
#343331
|
oklch(0.32 0.003 78)
|
|
|
|
| 10 |
#1f1e1d
|
oklch(0.23 0.002 78)
|
|
|
|
| 05 |
#131211
|
oklch(0.18 0.002 78)
|
|
|
SuccessTropical Teal
#57aeb2
oklch(0.70 0.084 199)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#57aeb2
|
oklch(0.70 0.084 199)
|
|
|
|
| 95 |
#d8f8f9
|
oklch(0.96 0.034 199)
|
|
|
|
| 90 |
#c1eeef
|
oklch(0.92 0.046 199)
|
|
|
|
| 80 |
#96d4d7
|
oklch(0.83 0.063 199)
|
|
|
|
| 70 |
#6fbbbe
|
oklch(0.74 0.076 199)
|
|
|
|
| 60 |
#4aa2a6
|
oklch(0.66 0.084 199)
|
|
|
|
| 50 |
#248186
|
oklch(0.55 0.084 199)
|
|
|
|
| 40 |
#006367
|
oklch(0.46 0.078 199)
|
|
|
|
| 30 |
#004e51
|
oklch(0.38 0.066 199)
|
|
|
|
| 20 |
#00393c
|
oklch(0.31 0.054 199)
|
|
|
|
| 10 |
#002224
|
oklch(0.23 0.039 199)
|
|
|
|
| 05 |
#001517
|
oklch(0.18 0.031 199)
|
|
|
WarningCopper
#b46834
oklch(0.59 0.118 53)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#b46834
|
oklch(0.59 0.118 53)
|
|
|
|
| 95 |
#ffefe5
|
oklch(0.96 0.022 53)
|
|
|
|
| 90 |
#ffdfcc
|
oklch(0.93 0.044 53)
|
|
|
|
| 80 |
#fabc96
|
oklch(0.84 0.088 53)
|
|
|
|
| 70 |
#e79e70
|
oklch(0.76 0.106 53)
|
|
|
|
| 60 |
#d0824f
|
oklch(0.68 0.118 53)
|
|
|
|
| 50 |
#ae622e
|
oklch(0.57 0.118 53)
|
|
|
|
| 40 |
#8e4506
|
oklch(0.47 0.118 53)
|
|
|
|
| 30 |
#713500
|
oklch(0.40 0.102 53)
|
|
|
|
| 20 |
#542600
|
oklch(0.33 0.084 53)
|
|
|
|
| 10 |
#351500
|
oklch(0.24 0.062 53)
|
|
|
|
| 05 |
#230c00
|
oklch(0.19 0.047 53)
|
|
|
DangerBurnt Rose
#8b4545
oklch(0.48 0.095 21)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#8b4545
|
oklch(0.48 0.095 21)
|
|
|
|
| 95 |
#ffeeed
|
oklch(0.96 0.019 21)
|
|
|
|
| 90 |
#ffdedc
|
oklch(0.93 0.037 21)
|
|
|
|
| 80 |
#f8bab8
|
oklch(0.84 0.072 21)
|
|
|
|
| 70 |
#e39c9a
|
oklch(0.76 0.086 21)
|
|
|
|
| 60 |
#cd807f
|
oklch(0.68 0.096 21)
|
|
|
|
| 50 |
#aa6160
|
oklch(0.58 0.096 21)
|
|
|
|
| 40 |
#8a4444
|
oklch(0.48 0.096 21)
|
|
|
|
| 30 |
#703334
|
oklch(0.40 0.086 21)
|
|
|
|
| 20 |
#542424
|
oklch(0.33 0.072 21)
|
|
|
|
| 10 |
#341414
|
oklch(0.24 0.052 21)
|
|
|
|
| 05 |
#220c0c
|
oklch(0.19 0.038 21)
|
|
|
Stormy Teal
#0d5d57
oklch(0.43 0.072 187)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#0d5d57
|
oklch(0.43 0.072 187)
|
|
|
|
| 95 |
#dcf7f4
|
oklch(0.96 0.029 187)
|
|
|
|
| 90 |
#c7ede8
|
oklch(0.92 0.039 187)
|
|
|
|
| 80 |
#a0d3cd
|
oklch(0.83 0.054 187)
|
|
|
|
| 70 |
#7cbab3
|
oklch(0.74 0.064 187)
|
|
|
|
| 60 |
#5ba19a
|
oklch(0.66 0.072 187)
|
|
|
|
| 50 |
#3a817a
|
oklch(0.56 0.072 187)
|
|
|
|
| 40 |
#18635d
|
oklch(0.46 0.072 187)
|
|
|
|
| 30 |
#074f49
|
oklch(0.38 0.064 187)
|
|
|
|
| 20 |
#023a36
|
oklch(0.31 0.054 187)
|
|
|
|
| 10 |
#012320
|
oklch(0.23 0.039 187)
|
|
|
|
| 05 |
#021614
|
oklch(0.18 0.029 187)
|
|
|
Charcoal Blue
#254a5d
oklch(0.39 0.053 233)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#254a5d
|
oklch(0.39 0.053 233)
|
|
|
|
| 95 |
#e4f4fe
|
oklch(0.96 0.021 233)
|
|
|
|
| 90 |
#d2e9f5
|
oklch(0.92 0.029 233)
|
|
|
|
| 80 |
#b0cedf
|
oklch(0.83 0.040 233)
|
|
|
|
| 70 |
#90b3c7
|
oklch(0.75 0.048 233)
|
|
|
|
| 60 |
#739ab0
|
oklch(0.67 0.053 233)
|
|
|
|
| 50 |
#547a8f
|
oklch(0.56 0.053 233)
|
|
|
|
| 40 |
#385e71
|
oklch(0.46 0.053 233)
|
|
|
|
| 30 |
#294a5b
|
oklch(0.39 0.048 233)
|
|
|
|
| 20 |
#1c3643
|
oklch(0.32 0.040 233)
|
|
|
|
| 10 |
#0e2029
|
oklch(0.23 0.029 233)
|
|
|
|
| 05 |
#08141a
|
oklch(0.18 0.021 233)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls