Look Awesome

BrandSteel Blue

#507aa2 oklch(0.57 0.078 248)

Step	Hex	OKLCH	vs White	vs Black
Base	`#507aa2` Copy	`oklch(0.57 0.078 248)` Copy	4.52:1 AA	4.65:1 AA
95	`#e7f3ff` Copy	`oklch(0.96 0.021 248)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d1e8ff` Copy	`oklch(0.92 0.040 248)` Copy	1.26:1 fail	16.7:1 AAA
80	`#accdee` Copy	`oklch(0.84 0.058 248)` Copy	1.65:1 fail	12.7:1 AAA
70	`#8bb2d9` Copy	`oklch(0.75 0.070 248)` Copy	2.21:1 fail	9.5:1 AAA
60	`#6e99c3` Copy	`oklch(0.67 0.078 248)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#4f79a1` Copy	`oklch(0.56 0.078 248)` Copy	4.59:1 AA	4.58:1 AA
40	`#335c82` Copy	`oklch(0.46 0.078 248)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#244869` Copy	`oklch(0.39 0.070 248)` Copy	9.5:1 AAA	2.21:1 fail
20	`#18354f` Copy	`oklch(0.32 0.058 248)` Copy	12.7:1 AAA	1.65:1 fail
10	`#0c1f31` Copy	`oklch(0.23 0.043 248)` Copy	16.7:1 AAA	1.26:1 fail
05	`#07131f` Copy	`oklch(0.18 0.031 248)` Copy	18.7:1 AAA	1.12:1 fail

AccentDeep Space Blue

#05253d oklch(0.26 0.058 246)

Step	Hex	OKLCH	vs White	vs Black
Base	`#05253d` Copy	`oklch(0.26 0.058 246)` Copy	15.69:1 AAA	1.34:1 fail
95	`#e7f3ff` Copy	`oklch(0.96 0.021 246)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d4e8fa` Copy	`oklch(0.92 0.032 246)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b2cce4` Copy	`oklch(0.84 0.044 246)` Copy	1.65:1 fail	12.7:1 AAA
70	`#93b2ce` Copy	`oklch(0.75 0.052 246)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7799b6` Copy	`oklch(0.67 0.058 246)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#587995` Copy	`oklch(0.56 0.058 246)` Copy	4.59:1 AA	4.58:1 AA
40	`#3d5c77` Copy	`oklch(0.46 0.058 246)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#2d4860` Copy	`oklch(0.39 0.052 246)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1f3547` Copy	`oklch(0.32 0.044 246)` Copy	12.7:1 AAA	1.65:1 fail
10	`#101f2c` Copy	`oklch(0.23 0.032 246)` Copy	16.7:1 AAA	1.26:1 fail
05	`#09131c` Copy	`oklch(0.18 0.023 246)` Copy	18.7:1 AAA	1.12:1 fail

NeutralVanilla Cream `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

#f4e9cd oklch(0.94 0.039 89)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f4e9cd` Copy	`oklch(0.94 0.039 89)` Copy	1.21:1 fail	17.38:1 AAA
95	`#f4f2ec` Copy	`oklch(0.96 0.008 89)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e8e5dd` Copy	`oklch(0.92 0.011 89)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cdc9bf` Copy	`oklch(0.84 0.015 89)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b3aea2` Copy	`oklch(0.75 0.018 89)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9a9587` Copy	`oklch(0.67 0.020 89)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7a7568` Copy	`oklch(0.56 0.020 89)` Copy	4.59:1 AA	4.58:1 AA
40	`#5e594d` Copy	`oklch(0.46 0.020 89)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#49453b` Copy	`oklch(0.39 0.018 89)` Copy	9.5:1 AAA	2.21:1 fail
20	`#36322a` Copy	`oklch(0.32 0.015 89)` Copy	12.7:1 AAA	1.65:1 fail
10	`#201e18` Copy	`oklch(0.23 0.011 89)` Copy	16.7:1 AAA	1.26:1 fail
05	`#14120e` Copy	`oklch(0.18 0.008 89)` Copy	18.7:1 AAA	1.12:1 fail

SuccessTurf Green

#04724d oklch(0.49 0.106 162)

Step	Hex	OKLCH	vs White	vs Black
Base	`#04724d` Copy	`oklch(0.49 0.106 162)` Copy	5.97:1 AA	3.52:1 AA-lg
95	`#d8fae7` Copy	`oklch(0.96 0.042 162)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c1f0d7` Copy	`oklch(0.92 0.058 162)` Copy	1.26:1 fail	16.7:1 AAA
80	`#97d7b7` Copy	`oklch(0.83 0.080 162)` Copy	1.65:1 fail	12.7:1 AAA
70	`#70be98` Copy	`oklch(0.74 0.095 162)` Copy	2.21:1 fail	9.5:1 AAA
60	`#4ca57d` Copy	`oklch(0.66 0.106 162)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#26855e` Copy	`oklch(0.55 0.106 162)` Copy	4.59:1 AA	4.58:1 AA
40	`#006644` Copy	`oklch(0.45 0.099 162)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#005035` Copy	`oklch(0.38 0.084 162)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003b26` Copy	`oklch(0.31 0.068 162)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002415` Copy	`oklch(0.23 0.050 162)` Copy	16.7:1 AAA	1.26:1 fail
05	`#00160c` Copy	`oklch(0.18 0.040 162)` Copy	18.7:1 AAA	1.12:1 fail

WarningCanary Yellow

#faf33e oklch(0.94 0.186 107)

Step	Hex	OKLCH	vs White	vs Black
Base	`#faf33e` Copy	`oklch(0.94 0.186 107)` Copy	1.17:1 fail	17.95:1 AAA
95	`#f6f5bb` Copy	`oklch(0.96 0.074 107)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ebe998` Copy	`oklch(0.92 0.102 107)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d2ce58` Copy	`oklch(0.83 0.140 107)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b9b300` Copy	`oklch(0.75 0.160 107)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9e9900` Copy	`oklch(0.66 0.143 107)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7d7800` Copy	`oklch(0.56 0.120 107)` Copy	4.59:1 AA	4.58:1 AA
40	`#5f5c00` Copy	`oklch(0.46 0.099 107)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4a4800` Copy	`oklch(0.39 0.084 107)` Copy	9.5:1 AAA	2.21:1 fail
20	`#363400` Copy	`oklch(0.32 0.068 107)` Copy	12.7:1 AAA	1.65:1 fail
10	`#201f00` Copy	`oklch(0.23 0.050 107)` Copy	16.7:1 AAA	1.26:1 fail
05	`#141300` Copy	`oklch(0.18 0.040 107)` Copy	18.7:1 AAA	1.12:1 fail

DangerPrimary Scarlet

#de1a1a oklch(0.57 0.224 28)

Step	Hex	OKLCH	vs White	vs Black
Base	`#de1a1a` Copy	`oklch(0.57 0.224 28)` Copy	4.92:1 AA	4.27:1 AA-lg
95	`#ffeeeb` Copy	`oklch(0.96 0.019 28)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded9` Copy	`oklch(0.93 0.038 28)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8ae` Copy	`oklch(0.85 0.085 28)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8f81` Copy	`oklch(0.77 0.138 28)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff5f51` Copy	`oklch(0.69 0.198 28)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#e42421` Copy	`oklch(0.59 0.224 28)` Copy	4.59:1 AA	4.58:1 AA
40	`#b60009` Copy	`oklch(0.49 0.200 28)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#910005` Copy	`oklch(0.41 0.169 28)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6d0003` Copy	`oklch(0.34 0.138 28)` Copy	12.7:1 AAA	1.65:1 fail
10	`#460001` Copy	`oklch(0.25 0.101 28)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2f0000` Copy	`oklch(0.19 0.079 28)` Copy	18.7:1 AAA	1.12:1 fail

Dusty Rose

#d87b83 oklch(0.69 0.116 15)

Step	Hex	OKLCH	vs White	vs Black
Base	`#d87b83` Copy	`oklch(0.69 0.116 15)` Copy	2.97:1 fail	7.08:1 AAA
95	`#ffeeee` Copy	`oklch(0.96 0.019 15)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdddf` Copy	`oklch(0.93 0.038 15)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb6bb` Copy	`oklch(0.85 0.085 15)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ed979d` Copy	`oklch(0.76 0.104 15)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d77a82` Copy	`oklch(0.68 0.116 15)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b35a63` Copy	`oklch(0.58 0.116 15)` Copy	4.59:1 AA	4.58:1 AA
40	`#933d48` Copy	`oklch(0.48 0.116 15)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#772d37` Copy	`oklch(0.41 0.104 15)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5a1f27` Copy	`oklch(0.33 0.087 15)` Copy	12.7:1 AAA	1.65:1 fail
10	`#381016` Copy	`oklch(0.24 0.064 15)` Copy	16.7:1 AAA	1.26:1 fail
05	`#24090d` Copy	`oklch(0.19 0.046 15)` Copy	18.7:1 AAA	1.12:1 fail

Smoky Rose

#8b635c oklch(0.54 0.054 30)

Step	Hex	OKLCH	vs White	vs Black
Base	`#8b635c` Copy	`oklch(0.54 0.054 30)` Copy	5.2:1 AA	4.04:1 AA-lg
95	`#ffeeeb` Copy	`oklch(0.96 0.019 30)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fae0db` Copy	`oklch(0.93 0.029 30)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e4c2bb` Copy	`oklch(0.84 0.040 30)` Copy	1.65:1 fail	12.7:1 AAA
70	`#cda59e` Copy	`oklch(0.76 0.048 30)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b68b83` Copy	`oklch(0.68 0.054 30)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#946c65` Copy	`oklch(0.57 0.054 30)` Copy	4.59:1 AA	4.58:1 AA
40	`#765049` Copy	`oklch(0.47 0.054 30)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5e3d38` Copy	`oklch(0.40 0.048 30)` Copy	9.5:1 AAA	2.21:1 fail
20	`#462c28` Copy	`oklch(0.32 0.040 30)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2b1916` Copy	`oklch(0.24 0.029 30)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1b0f0d` Copy	`oklch(0.19 0.021 30)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Dusty Rose

Steel Blue

Vanilla Cream

Turf Green

Canary Yellow

Primary Scarlet

Deep Space Blue

Smoky Rose

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Dusty Rose

Steel Blue

Vanilla Cream

Turf Green

Canary Yellow

Primary Scarlet

Deep Space Blue

Smoky Rose

Progress & Controls

Notifications

← Key

Key →

BrandSteel Blue

Brand

AccentDeep Space Blue

Accent

NeutralVanilla Cream `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

SuccessTurf Green

Success

WarningCanary Yellow

Warning

DangerPrimary Scarlet

Danger

Dusty Rose

Unassigned

Smoky Rose

Unassigned

Brand · Steel Blue

Brand

Accent · Deep Space Blue

Accent

Neutral · Vanilla Cream · 0.02 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success · Turf Green

Success

Warning · Canary Yellow

Warning

Danger · Primary Scarlet

Danger

Dusty Rose

Unassigned

Smoky Rose

Unassigned

BrandSteel Blue

AccentDeep Space Blue

NeutralVanilla Cream `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

SuccessTurf Green

WarningCanary Yellow

DangerPrimary Scarlet