BrandNASA Blue
#0033a5
oklch(0.38 0.188 263)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#0033a5
|
oklch(0.38 0.188 263)
|
|
|
|
| 95 |
#ebf2ff
|
oklch(0.96 0.019 263)
|
|
|
|
| 90 |
#d8e6ff
|
oklch(0.92 0.037 263)
|
|
|
|
| 80 |
#aecaff
|
oklch(0.84 0.081 263)
|
|
|
|
| 70 |
#84aeff
|
oklch(0.75 0.126 263)
|
|
|
|
| 60 |
#5c92ff
|
oklch(0.68 0.172 263)
|
|
|
|
| 50 |
#376fe5
|
oklch(0.57 0.188 263)
|
|
|
|
| 40 |
#1b50c3
|
oklch(0.47 0.188 263)
|
|
|
|
| 30 |
#0f3da2
|
oklch(0.40 0.170 263)
|
|
|
|
| 20 |
#072c7b
|
oklch(0.33 0.141 263)
|
|
|
|
| 10 |
#03194f
|
oklch(0.24 0.104 263)
|
|
|
|
| 05 |
#020f34
|
oklch(0.19 0.075 263)
|
|
|
AccentNASA Red
#e1002c
oklch(0.57 0.232 24)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#e1002c
|
oklch(0.57 0.232 24)
|
|
|
|
| 95 |
#ffeeec
|
oklch(0.96 0.019 24)
|
|
|
|
| 90 |
#ffdedb
|
oklch(0.93 0.038 24)
|
|
|
|
| 80 |
#ffb7b2
|
oklch(0.85 0.084 24)
|
|
|
|
| 70 |
#ff8e89
|
oklch(0.77 0.137 24)
|
|
|
|
| 60 |
#ff5e5e
|
oklch(0.69 0.197 24)
|
|
|
|
| 50 |
#e81532
|
oklch(0.59 0.232 24)
|
|
|
|
| 40 |
#b60021
|
oklch(0.49 0.198 24)
|
|
|
|
| 30 |
#910018
|
oklch(0.41 0.167 24)
|
|
|
|
| 20 |
#6d0010
|
oklch(0.34 0.136 24)
|
|
|
|
| 10 |
#450006
|
oklch(0.25 0.100 24)
|
|
|
|
| 05 |
#2f0003
|
oklch(0.19 0.078 24)
|
|
|
Neutral
0.0
Caps OKLCH Chroma (Saturation). Lower = Grayer.
#f1f1f1
oklch(0.96 0.000 90)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#f1f1f1
|
oklch(0.96 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
#2e8540
oklch(0.55 0.133 147)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#2e8540
|
oklch(0.55 0.133 147)
|
|
|
|
| 95 |
#d9fadc
|
oklch(0.95 0.053 147)
|
|
|
|
| 90 |
#c3f1c7
|
oklch(0.91 0.073 147)
|
|
|
|
| 80 |
#9ad8a1
|
oklch(0.82 0.100 147)
|
|
|
|
| 70 |
#74bf7e
|
oklch(0.74 0.120 147)
|
|
|
|
| 60 |
#52a65f
|
oklch(0.66 0.133 147)
|
|
|
|
| 50 |
#2f8641
|
oklch(0.55 0.133 147)
|
|
|
|
| 40 |
#006824
|
oklch(0.45 0.133 147)
|
|
|
|
| 30 |
#00521a
|
oklch(0.38 0.112 147)
|
|
|
|
| 20 |
#003c11
|
oklch(0.31 0.092 147)
|
|
|
|
| 10 |
#002407
|
oklch(0.23 0.067 147)
|
|
|
|
| 05 |
#001703
|
oklch(0.18 0.053 147)
|
|
|
Warning
#ff9d1e
oklch(0.78 0.168 65)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#ff9d1e
|
oklch(0.78 0.168 65)
|
|
|
|
| 95 |
#ffefe0
|
oklch(0.96 0.026 65)
|
|
|
|
| 90 |
#ffe0c3
|
oklch(0.92 0.052 65)
|
|
|
|
| 80 |
#ffbc79
|
oklch(0.84 0.114 65)
|
|
|
|
| 70 |
#f29b36
|
oklch(0.76 0.151 65)
|
|
|
|
| 60 |
#d78100
|
oklch(0.68 0.152 65)
|
|
|
|
| 50 |
#aa6500
|
oklch(0.57 0.128 65)
|
|
|
|
| 40 |
#834c00
|
oklch(0.47 0.106 65)
|
|
|
|
| 30 |
#673b00
|
oklch(0.40 0.090 65)
|
|
|
|
| 20 |
#4d2b00
|
oklch(0.32 0.073 65)
|
|
|
|
| 10 |
#301800
|
oklch(0.24 0.054 65)
|
|
|
|
| 05 |
#1f0e00
|
oklch(0.19 0.042 65)
|
|
|
Danger
#dd361c
oklch(0.59 0.207 32)
| Step | Hex | OKLCH | vs White | vs Black | |
|---|---|---|---|---|---|
| Base |
#dd361c
|
oklch(0.59 0.207 32)
|
|
|
|
| 95 |
#ffeeeb
|
oklch(0.96 0.019 32)
|
|
|
|
| 90 |
#ffded7
|
oklch(0.93 0.038 32)
|
|
|
|
| 80 |
#ffb8aa
|
oklch(0.85 0.086 32)
|
|
|
|
| 70 |
#ff907b
|
oklch(0.77 0.139 32)
|
|
|
|
| 60 |
#ff6046
|
oklch(0.69 0.199 32)
|
|
|
|
| 50 |
#dc351b
|
oklch(0.59 0.207 32)
|
|
|
|
| 40 |
#b01a00
|
oklch(0.49 0.186 32)
|
|
|
|
| 30 |
#8c1200
|
oklch(0.41 0.157 32)
|
|
|
|
| 20 |
#690b00
|
oklch(0.34 0.128 32)
|
|
|
|
| 10 |
#430400
|
oklch(0.24 0.095 32)
|
|
|
|
| 05 |
#2e0200
|
oklch(0.19 0.075 32)
|
|
|
Component Preview
Buttons
Named Buttons
Callouts
Badges
Named Badges
Progress & Controls