BrandNantucket Red
#b87878
oklch(0.64 0.081 20)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#b87878
|
oklch(0.64 0.081 20)
|
|
|
|
| 95 |
#ffeeed
|
oklch(0.96 0.019 20)
|
|
|
|
| 90 |
#ffdedd
|
oklch(0.93 0.037 20)
|
|
|
|
| 80 |
#f1bdbc
|
oklch(0.84 0.060 20)
|
|
|
|
| 70 |
#dc9f9f
|
oklch(0.76 0.073 20)
|
|
|
|
| 60 |
#c58484
|
oklch(0.68 0.081 20)
|
|
|
|
| 50 |
#a36565
|
oklch(0.57 0.081 20)
|
|
|
|
| 40 |
#834849
|
oklch(0.47 0.081 20)
|
|
|
|
| 30 |
#6a3738
|
oklch(0.40 0.073 20)
|
|
|
|
| 20 |
#4f2728
|
oklch(0.33 0.060 20)
|
|
|
|
| 10 |
#311616
|
oklch(0.24 0.044 20)
|
|
|
|
| 05 |
#200d0d
|
oklch(0.19 0.032 20)
|
|
|
AccentNantucket Blue
#6b8fa8
oklch(0.63 0.055 239)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#6b8fa8
|
oklch(0.63 0.055 239)
|
|
|
|
| 95 |
#e5f4ff
|
oklch(0.96 0.022 239)
|
|
|
|
| 90 |
#d3e8f7
|
oklch(0.92 0.030 239)
|
|
|
|
| 80 |
#b1cde1
|
oklch(0.83 0.041 239)
|
|
|
|
| 70 |
#92b3ca
|
oklch(0.75 0.050 239)
|
|
|
|
| 60 |
#759ab3
|
oklch(0.67 0.055 239)
|
|
|
|
| 50 |
#567a92
|
oklch(0.56 0.055 239)
|
|
|
|
| 40 |
#3b5d74
|
oklch(0.46 0.055 239)
|
|
|
|
| 30 |
#2b495d
|
oklch(0.39 0.050 239)
|
|
|
|
| 20 |
#1d3545
|
oklch(0.32 0.041 239)
|
|
|
|
| 10 |
#0f202a
|
oklch(0.23 0.030 239)
|
|
|
|
| 05 |
#09131b
|
oklch(0.18 0.022 239)
|
|
|
NeutralMain Street Yellow
0.032
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#d4c4a0
oklch(0.82 0.051 87)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#d4c4a0
|
oklch(0.82 0.051 87)
|
|
|
|
| 95 |
#f5f1e8
|
oklch(0.96 0.013 87)
|
|
|
|
| 90 |
#eae5d8
|
oklch(0.92 0.018 87)
|
|
|
|
| 80 |
#d0c9b8
|
oklch(0.84 0.024 87)
|
|
|
|
| 70 |
#b6ae9a
|
oklch(0.75 0.029 87)
|
|
|
|
| 60 |
#9e947f
|
oklch(0.67 0.032 87)
|
|
|
|
| 50 |
#7e7560
|
oklch(0.56 0.032 87)
|
|
|
|
| 40 |
#615845
|
oklch(0.46 0.032 87)
|
|
|
|
| 30 |
#4c4534
|
oklch(0.39 0.029 87)
|
|
|
|
| 20 |
#383225
|
oklch(0.32 0.024 87)
|
|
|
|
| 10 |
#221d14
|
oklch(0.23 0.018 87)
|
|
|
|
| 05 |
#15120c
|
oklch(0.18 0.013 87)
|
|
|
SuccessEssex Green
#3d5442
oklch(0.42 0.041 151)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#3d5442
|
oklch(0.42 0.041 151)
|
|
|
|
| 95 |
#eaf5ec
|
oklch(0.96 0.016 151)
|
|
|
|
| 90 |
#dae9dd
|
oklch(0.92 0.022 151)
|
|
|
|
| 80 |
#bbcebe
|
oklch(0.83 0.031 151)
|
|
|
|
| 70 |
#9db4a2
|
oklch(0.75 0.037 151)
|
|
|
|
| 60 |
#829b87
|
oklch(0.66 0.041 151)
|
|
|
|
| 50 |
#637b68
|
oklch(0.56 0.041 151)
|
|
|
|
| 40 |
#475f4c
|
oklch(0.46 0.041 151)
|
|
|
|
| 30 |
#364a3b
|
oklch(0.39 0.037 151)
|
|
|
|
| 20 |
#26362a
|
oklch(0.32 0.031 151)
|
|
|
|
| 10 |
#162018
|
oklch(0.23 0.022 151)
|
|
|
|
| 05 |
#0d140e
|
oklch(0.18 0.016 151)
|
|
|
WarningQuaker Gray
#8b7b6b
oklch(0.59 0.031 67)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#8b7b6b
|
oklch(0.59 0.031 67)
|
|
|
|
| 95 |
#f8f1e9
|
oklch(0.96 0.012 67)
|
|
|
|
| 90 |
#eee4da
|
oklch(0.92 0.017 67)
|
|
|
|
| 80 |
#d4c7ba
|
oklch(0.84 0.023 67)
|
|
|
|
| 70 |
#bbac9d
|
oklch(0.75 0.028 67)
|
|
|
|
| 60 |
#a39282
|
oklch(0.67 0.031 67)
|
|
|
|
| 50 |
#837363
|
oklch(0.56 0.031 67)
|
|
|
|
| 40 |
#665747
|
oklch(0.47 0.031 67)
|
|
|
|
| 30 |
#504336
|
oklch(0.39 0.028 67)
|
|
|
|
| 20 |
#3b3127
|
oklch(0.32 0.023 67)
|
|
|
|
| 10 |
#241d16
|
oklch(0.24 0.017 67)
|
|
|
|
| 05 |
#16110d
|
oklch(0.18 0.012 67)
|
|
|
DangerCottage Red
#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)
|
|
|
Cobblestone
#8b8b7a
oklch(0.63 0.025 107)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#8b8b7a
|
oklch(0.63 0.025 107)
|
|
|
|
| 95 |
#f2f2eb
|
oklch(0.96 0.010 107)
|
|
|
|
| 90 |
#e6e6dc
|
oklch(0.92 0.014 107)
|
|
|
|
| 80 |
#cacabd
|
oklch(0.84 0.018 107)
|
|
|
|
| 70 |
#afafa0
|
oklch(0.75 0.022 107)
|
|
|
|
| 60 |
#969685
|
oklch(0.67 0.025 107)
|
|
|
|
| 50 |
#767666
|
oklch(0.56 0.025 107)
|
|
|
|
| 40 |
#5a5a4a
|
oklch(0.46 0.025 107)
|
|
|
|
| 30 |
#474639
|
oklch(0.39 0.022 107)
|
|
|
|
| 20 |
#333328
|
oklch(0.32 0.018 107)
|
|
|
|
| 10 |
#1e1e17
|
oklch(0.23 0.014 107)
|
|
|
|
| 05 |
#13130e
|
oklch(0.18 0.010 107)
|
|
|
Newport Blue
#7b9db8
oklch(0.68 0.055 243)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#7b9db8
|
oklch(0.68 0.055 243)
|
|
|
|
| 95 |
#e6f4ff
|
oklch(0.96 0.022 243)
|
|
|
|
| 90 |
#d4e8f8
|
oklch(0.92 0.030 243)
|
|
|
|
| 80 |
#b2cde2
|
oklch(0.84 0.041 243)
|
|
|
|
| 70 |
#93b2cb
|
oklch(0.75 0.050 243)
|
|
|
|
| 60 |
#7799b4
|
oklch(0.67 0.055 243)
|
|
|
|
| 50 |
#587993
|
oklch(0.56 0.055 243)
|
|
|
|
| 40 |
#3d5c75
|
oklch(0.46 0.055 243)
|
|
|
|
| 30 |
#2d485e
|
oklch(0.39 0.050 243)
|
|
|
|
| 20 |
#1f3546
|
oklch(0.32 0.041 243)
|
|
|
|
| 10 |
#101f2b
|
oklch(0.23 0.030 243)
|
|
|
|
| 05 |
#09131b
|
oklch(0.18 0.022 243)
|
|
|
Hamilton Blue
#4a6b8a
oklch(0.52 0.062 248)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#4a6b8a
|
oklch(0.52 0.062 248)
|
|
|
|
| 95 |
#e7f3ff
|
oklch(0.96 0.021 248)
|
|
|
|
| 90 |
#d4e8fb
|
oklch(0.92 0.034 248)
|
|
|
|
| 80 |
#b1cce7
|
oklch(0.84 0.047 248)
|
|
|
|
| 70 |
#92b2d0
|
oklch(0.75 0.056 248)
|
|
|
|
| 60 |
#7699ba
|
oklch(0.67 0.062 248)
|
|
|
|
| 50 |
#577998
|
oklch(0.56 0.062 248)
|
|
|
|
| 40 |
#3b5c7a
|
oklch(0.46 0.062 248)
|
|
|
|
| 30 |
#2c4862
|
oklch(0.39 0.056 248)
|
|
|
|
| 20 |
#1e3549
|
oklch(0.32 0.047 248)
|
|
|
|
| 10 |
#101f2d
|
oklch(0.23 0.034 248)
|
|
|
|
| 05 |
#09131d
|
oklch(0.18 0.025 248)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls