Look Awesome

BrandDark Blue

#03214f oklch(0.26 0.092 259)

Step	Hex	OKLCH	vs White	vs Black
Base	`#03214f` Copy	`oklch(0.26 0.092 259)` Copy	15.74:1 AAA	1.33:1 fail
95	`#eaf2ff` Copy	`oklch(0.96 0.019 259)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d6e7ff` Copy	`oklch(0.92 0.038 259)` Copy	1.26:1 fail	16.7:1 AAA
80	`#afcbf7` Copy	`oklch(0.84 0.069 259)` Copy	1.65:1 fail	12.7:1 AAA
70	`#8fb0e3` Copy	`oklch(0.75 0.083 259)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7396ce` Copy	`oklch(0.67 0.092 259)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#5476ac` Copy	`oklch(0.56 0.092 259)` Copy	4.59:1 AA	4.58:1 AA
40	`#395a8d` Copy	`oklch(0.46 0.092 259)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#294672` Copy	`oklch(0.39 0.083 259)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1c3356` Copy	`oklch(0.32 0.069 259)` Copy	12.7:1 AAA	1.65:1 fail
10	`#0f1e36` Copy	`oklch(0.24 0.051 259)` Copy	16.7:1 AAA	1.26:1 fail
05	`#081223` Copy	`oklch(0.18 0.037 259)` Copy	18.7:1 AAA	1.12:1 fail

AccentLight Nougat

#f29c6a oklch(0.77 0.122 50)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f29c6a` Copy	`oklch(0.77 0.122 50)` Copy	2.16:1 fail	9.74:1 AAA
95	`#ffefe6` Copy	`oklch(0.96 0.022 50)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfce` Copy	`oklch(0.93 0.043 50)` Copy	1.26:1 fail	16.7:1 AAA
80	`#fdbb96` Copy	`oklch(0.84 0.092 50)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ea9c70` Copy	`oklch(0.76 0.110 50)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d4804f` Copy	`oklch(0.68 0.122 50)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b1602d` Copy	`oklch(0.57 0.122 50)` Copy	4.59:1 AA	4.58:1 AA
40	`#904306` Copy	`oklch(0.48 0.122 50)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#733300` Copy	`oklch(0.40 0.106 50)` Copy	9.5:1 AAA	2.21:1 fail
20	`#562400` Copy	`oklch(0.33 0.086 50)` Copy	12.7:1 AAA	1.65:1 fail
10	`#361400` Copy	`oklch(0.24 0.064 50)` Copy	16.7:1 AAA	1.26:1 fail
05	`#240b00` Copy	`oklch(0.19 0.049 50)` Copy	18.7:1 AAA	1.12:1 fail

NeutralLight Bluish Gray `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

#efeeee oklch(0.95 0.001 17)

Step	Hex	OKLCH	vs White	vs Black
Base	`#efeeee` Copy	`oklch(0.95 0.001 17)` Copy	1.16:1 fail	18.13:1 AAA
95	`#f2f2f2` Copy	`oklch(0.96 0.000 17)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e6e5e5` Copy	`oklch(0.92 0.001 17)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cac9c9` Copy	`oklch(0.84 0.001 17)` Copy	1.65:1 fail	12.7:1 AAA
70	`#afaeae` Copy	`oklch(0.75 0.001 17)` Copy	2.21:1 fail	9.5:1 AAA
60	`#969595` Copy	`oklch(0.67 0.001 17)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#767575` Copy	`oklch(0.56 0.001 17)` Copy	4.59:1 AA	4.58:1 AA
40	`#5a5959` Copy	`oklch(0.46 0.001 17)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#464545` Copy	`oklch(0.39 0.001 17)` Copy	9.5:1 AAA	2.21:1 fail
20	`#333333` Copy	`oklch(0.32 0.001 17)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1e1e1e` Copy	`oklch(0.23 0.001 17)` Copy	16.7:1 AAA	1.26:1 fail
05	`#121212` Copy	`oklch(0.18 0.000 17)` Copy	18.7:1 AAA	1.12:1 fail

SuccessBlue

#0088c9 oklch(0.60 0.138 240)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0088c9` Copy	`oklch(0.60 0.138 240)` Copy	3.91:1 AA-lg	5.37:1 AA
95	`#e5f4ff` Copy	`oklch(0.96 0.022 240)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cce9ff` Copy	`oklch(0.92 0.043 240)` Copy	1.26:1 fail	16.7:1 AAA
80	`#8fd1ff` Copy	`oklch(0.83 0.093 240)` Copy	1.65:1 fail	12.7:1 AAA
70	`#5bb7f4` Copy	`oklch(0.75 0.124 240)` Copy	2.21:1 fail	9.5:1 AAA
60	`#2d9ddf` Copy	`oklch(0.66 0.138 240)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#007cb8` Copy	`oklch(0.56 0.129 240)` Copy	4.59:1 AA	4.58:1 AA
40	`#005e8d` Copy	`oklch(0.46 0.106 240)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004a70` Copy	`oklch(0.39 0.090 240)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003654` Copy	`oklch(0.32 0.073 240)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002034` Copy	`oklch(0.23 0.054 240)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001423` Copy	`oklch(0.18 0.043 240)` Copy	18.7:1 AAA	1.12:1 fail

WarningDark Tan

#b78b63 oklch(0.67 0.077 63)

Step	Hex	OKLCH	vs White	vs Black
Base	`#b78b63` Copy	`oklch(0.67 0.077 63)` Copy	3.05:1 AA-lg	6.89:1 AA
95	`#ffefe1` Copy	`oklch(0.96 0.025 63)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fbe1ca` Copy	`oklch(0.92 0.042 63)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e6c3a4` Copy	`oklch(0.84 0.058 63)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d0a782` Copy	`oklch(0.76 0.069 63)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b88c64` Copy	`oklch(0.67 0.077 63)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#976d46` Copy	`oklch(0.57 0.077 63)` Copy	4.59:1 AA	4.58:1 AA
40	`#795029` Copy	`oklch(0.47 0.077 63)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#613e1b` Copy	`oklch(0.40 0.069 63)` Copy	9.5:1 AAA	2.21:1 fail
20	`#482d11` Copy	`oklch(0.32 0.058 63)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2c1a07` Copy	`oklch(0.24 0.042 63)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1c0f04` Copy	`oklch(0.18 0.031 63)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ca612e oklch(0.61 0.148 44)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ca612e` Copy	`oklch(0.61 0.148 44)` Copy	3.99:1 AA-lg	5.26:1 AA
95	`#ffefe7` Copy	`oklch(0.96 0.020 44)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfd1` Copy	`oklch(0.93 0.041 44)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb99b` Copy	`oklch(0.84 0.091 44)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f89569` Copy	`oklch(0.76 0.133 44)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e37746` Copy	`oklch(0.68 0.148 44)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#bf5722` Copy	`oklch(0.58 0.148 44)` Copy	4.59:1 AA	4.58:1 AA
40	`#993c00` Copy	`oklch(0.48 0.139 44)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7a2e00` Copy	`oklch(0.40 0.117 44)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5b2000` Copy	`oklch(0.33 0.096 44)` Copy	12.7:1 AAA	1.65:1 fail
10	`#391100` Copy	`oklch(0.24 0.071 44)` Copy	16.7:1 AAA	1.26:1 fail
05	`#270900` Copy	`oklch(0.19 0.056 44)` Copy	18.7:1 AAA	1.12:1 fail

Tan

#ffd393 oklch(0.89 0.095 76)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ffd393` Copy	`oklch(0.89 0.095 76)` Copy	1.4:1 fail	14.99:1 AAA
95	`#fff0da` Copy	`oklch(0.96 0.033 76)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fae2c0` Copy	`oklch(0.92 0.052 76)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e5c496` Copy	`oklch(0.84 0.071 76)` Copy	1.65:1 fail	12.7:1 AAA
70	`#cea871` Copy	`oklch(0.75 0.085 76)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b78e4f` Copy	`oklch(0.67 0.095 76)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#966e2f` Copy	`oklch(0.57 0.095 76)` Copy	4.59:1 AA	4.58:1 AA
40	`#785208` Copy	`oklch(0.47 0.095 76)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#603f00` Copy	`oklch(0.40 0.083 76)` Copy	9.5:1 AAA	2.21:1 fail
20	`#472e00` Copy	`oklch(0.32 0.068 76)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2c1b00` Copy	`oklch(0.24 0.050 76)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1c1000` Copy	`oklch(0.18 0.038 76)` Copy	18.7:1 AAA	1.12:1 fail

Bright Light Blue

#04abec oklch(0.70 0.148 235)

Step	Hex	OKLCH	vs White	vs Black
Base	`#04abec` Copy	`oklch(0.70 0.148 235)` Copy	2.61:1 fail	8.04:1 AAA
95	`#e3f4ff` Copy	`oklch(0.96 0.024 235)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c8eaff` Copy	`oklch(0.92 0.046 235)` Copy	1.26:1 fail	16.7:1 AAA
80	`#84d2ff` Copy	`oklch(0.83 0.100 235)` Copy	1.65:1 fail	12.7:1 AAA
70	`#45b9f4` Copy	`oklch(0.75 0.133 235)` Copy	2.21:1 fail	9.5:1 AAA
60	`#009fdc` Copy	`oklch(0.66 0.141 235)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#007eaf` Copy	`oklch(0.56 0.118 235)` Copy	4.59:1 AA	4.58:1 AA
40	`#005f86` Copy	`oklch(0.46 0.098 235)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004b6a` Copy	`oklch(0.39 0.082 235)` Copy	9.5:1 AAA	2.21:1 fail
20	`#00374f` Copy	`oklch(0.32 0.067 235)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002131` Copy	`oklch(0.23 0.050 235)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001420` Copy	`oklch(0.18 0.039 235)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Dark Blue

Bright Light Blue

Light Bluish Gray

Blue

Dark Tan

Light Nougat

Tan

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Dark Blue

Bright Light Blue

Light Bluish Gray

Blue

Dark Tan

Light Nougat

Tan

Progress & Controls

Notifications

← Key

Key →

BrandDark Blue

Brand

AccentLight Nougat

Accent

NeutralLight Bluish Gray `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

SuccessBlue

Success

WarningDark Tan

Warning

Danger

Danger

Tan

Unassigned

Bright Light Blue

Unassigned

Brand · Dark Blue

Brand

Accent · Light Nougat

Accent

Neutral · Light Bluish Gray · 0.02 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success · Blue

Success

Warning · Dark Tan

Warning

Danger

Danger

Tan

Unassigned

Bright Light Blue

Unassigned

BrandDark Blue

AccentLight Nougat

NeutralLight Bluish Gray `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

SuccessBlue

WarningDark Tan