Remix this Look

Share URL

@davegandy

NASA

From the official Nasa brand guidelines. Success, warning, and danger colors taken from the most recent USWDS NASA theme.

Created about 2 months ago

BrandNASA Blue

#0033a5 oklch(0.38 0.188 263)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0033a5` Copy	`oklch(0.38 0.188 263)` Copy	10.41:1 AAA	2.02:1 fail
95	`#ebf2ff` Copy	`oklch(0.96 0.019 263)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d8e6ff` Copy	`oklch(0.92 0.037 263)` Copy	1.26:1 fail	16.7:1 AAA
80	`#aecaff` Copy	`oklch(0.84 0.081 263)` Copy	1.65:1 fail	12.7:1 AAA
70	`#84aeff` Copy	`oklch(0.75 0.126 263)` Copy	2.21:1 fail	9.5:1 AAA
60	`#5c92ff` Copy	`oklch(0.68 0.172 263)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#376fe5` Copy	`oklch(0.57 0.188 263)` Copy	4.59:1 AA	4.58:1 AA
40	`#1b50c3` Copy	`oklch(0.47 0.188 263)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#0f3da2` Copy	`oklch(0.40 0.170 263)` Copy	9.5:1 AAA	2.21:1 fail
20	`#072c7b` Copy	`oklch(0.33 0.141 263)` Copy	12.7:1 AAA	1.65:1 fail
10	`#03194f` Copy	`oklch(0.24 0.104 263)` Copy	16.7:1 AAA	1.26:1 fail
05	`#020f34` Copy	`oklch(0.19 0.075 263)` Copy	18.7:1 AAA	1.12:1 fail

AccentNASA Red

#e1002c oklch(0.57 0.232 24)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e1002c` Copy	`oklch(0.57 0.232 24)` Copy	4.96:1 AA	4.24:1 AA-lg
95	`#ffeeec` Copy	`oklch(0.96 0.019 24)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdedb` Copy	`oklch(0.93 0.038 24)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb7b2` Copy	`oklch(0.85 0.084 24)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8e89` Copy	`oklch(0.77 0.137 24)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff5e5e` Copy	`oklch(0.69 0.197 24)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#e81532` Copy	`oklch(0.59 0.232 24)` Copy	4.59:1 AA	4.58:1 AA
40	`#b60021` Copy	`oklch(0.49 0.198 24)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#910018` Copy	`oklch(0.41 0.167 24)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6d0010` Copy	`oklch(0.34 0.136 24)` Copy	12.7:1 AAA	1.65:1 fail
10	`#450006` Copy	`oklch(0.25 0.100 24)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2f0003` Copy	`oklch(0.19 0.078 24)` Copy	18.7:1 AAA	1.12:1 fail

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` Copy	`oklch(0.96 0.000 90)` Copy	1.13:1 fail	18.59:1 AAA
95	`#f2f2f2` Copy	`oklch(0.96 0.000 90)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e5e5e5` Copy	`oklch(0.92 0.000 90)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c9c9c9` Copy	`oklch(0.84 0.000 90)` Copy	1.65:1 fail	12.7:1 AAA
70	`#aeaeae` Copy	`oklch(0.75 0.000 90)` Copy	2.21:1 fail	9.5:1 AAA
60	`#959595` Copy	`oklch(0.67 0.000 90)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#757575` Copy	`oklch(0.56 0.000 90)` Copy	4.59:1 AA	4.58:1 AA
40	`#595959` Copy	`oklch(0.46 0.000 90)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#464646` Copy	`oklch(0.39 0.000 90)` Copy	9.5:1 AAA	2.21:1 fail
20	`#333333` Copy	`oklch(0.32 0.000 90)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1e1e1e` Copy	`oklch(0.23 0.000 90)` Copy	16.7:1 AAA	1.26:1 fail
05	`#121212` Copy	`oklch(0.18 0.000 90)` Copy	18.7:1 AAA	1.12:1 fail

Success

#2e8540 oklch(0.55 0.133 147)

Step	Hex	OKLCH	vs White	vs Black
Base	`#2e8540` Copy	`oklch(0.55 0.133 147)` Copy	4.62:1 AA	4.55:1 AA
95	`#d9fadc` Copy	`oklch(0.95 0.053 147)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c3f1c7` Copy	`oklch(0.91 0.073 147)` Copy	1.26:1 fail	16.7:1 AAA
80	`#9ad8a1` Copy	`oklch(0.82 0.100 147)` Copy	1.65:1 fail	12.7:1 AAA
70	`#74bf7e` Copy	`oklch(0.74 0.120 147)` Copy	2.21:1 fail	9.5:1 AAA
60	`#52a65f` Copy	`oklch(0.66 0.133 147)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#2f8641` Copy	`oklch(0.55 0.133 147)` Copy	4.59:1 AA	4.58:1 AA
40	`#006824` Copy	`oklch(0.45 0.133 147)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#00521a` Copy	`oklch(0.38 0.112 147)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003c11` Copy	`oklch(0.31 0.092 147)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002407` Copy	`oklch(0.23 0.067 147)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001703` Copy	`oklch(0.18 0.053 147)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#ff9d1e oklch(0.78 0.168 65)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ff9d1e` Copy	`oklch(0.78 0.168 65)` Copy	2.08:1 fail	10.09:1 AAA
95	`#ffefe0` Copy	`oklch(0.96 0.026 65)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe0c3` Copy	`oklch(0.92 0.052 65)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffbc79` Copy	`oklch(0.84 0.114 65)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f29b36` Copy	`oklch(0.76 0.151 65)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d78100` Copy	`oklch(0.68 0.152 65)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#aa6500` Copy	`oklch(0.57 0.128 65)` Copy	4.59:1 AA	4.58:1 AA
40	`#834c00` Copy	`oklch(0.47 0.106 65)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#673b00` Copy	`oklch(0.40 0.090 65)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4d2b00` Copy	`oklch(0.32 0.073 65)` Copy	12.7:1 AAA	1.65:1 fail
10	`#301800` Copy	`oklch(0.24 0.054 65)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1f0e00` Copy	`oklch(0.19 0.042 65)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#dd361c oklch(0.59 0.207 32)

Step	Hex	OKLCH	vs White	vs Black
Base	`#dd361c` Copy	`oklch(0.59 0.207 32)` Copy	4.55:1 AA	4.62:1 AA
95	`#ffeeeb` Copy	`oklch(0.96 0.019 32)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded7` Copy	`oklch(0.93 0.038 32)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8aa` Copy	`oklch(0.85 0.086 32)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff907b` Copy	`oklch(0.77 0.139 32)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff6046` Copy	`oklch(0.69 0.199 32)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#dc351b` Copy	`oklch(0.59 0.207 32)` Copy	4.59:1 AA	4.58:1 AA
40	`#b01a00` Copy	`oklch(0.49 0.186 32)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8c1200` Copy	`oklch(0.41 0.157 32)` Copy	9.5:1 AAA	2.21:1 fail
20	`#690b00` Copy	`oklch(0.34 0.128 32)` Copy	12.7:1 AAA	1.65:1 fail
10	`#430400` Copy	`oklch(0.24 0.095 32)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2e0200` Copy	`oklch(0.19 0.075 32)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

NASA Blue

NASA Red

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

NASA Blue

NASA Red

Progress & Controls

Notifications

← Key

Key →

← Key

Key →

Brand · NASA Blue

Brand

Accent · NASA Red

Accent

Neutral · 0.0 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

BrandNASA Blue

AccentNASA Red

Neutral `0.0` Caps OKLCH Chroma (Saturation). Lower = Grayer.