Look Awesome

BrandFlamingo

#df7253 oklch(0.67 0.144 37)

Step	Hex	OKLCH	vs White	vs Black
Base	`#df7253` Copy	`oklch(0.67 0.144 37)` Copy	3.15:1 AA-lg	6.67:1 AA
95	`#ffeee9` Copy	`oklch(0.96 0.020 37)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded5` Copy	`oklch(0.93 0.039 37)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb9a4` Copy	`oklch(0.84 0.087 37)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f99477` Copy	`oklch(0.76 0.129 37)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e37657` Copy	`oklch(0.68 0.144 37)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#bf5537` Copy	`oklch(0.58 0.144 37)` Copy	4.59:1 AA	4.58:1 AA
40	`#9e3717` Copy	`oklch(0.48 0.144 37)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#802609` Copy	`oklch(0.41 0.129 37)` Copy	9.5:1 AAA	2.21:1 fail
20	`#611a03` Copy	`oklch(0.33 0.108 37)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3d0d01` Copy	`oklch(0.24 0.079 37)` Copy	16.7:1 AAA	1.26:1 fail
05	`#280702` Copy	`oklch(0.19 0.057 37)` Copy	18.7:1 AAA	1.12:1 fail

AccentMarina

#5086c3 oklch(0.61 0.110 253)

Step	Hex	OKLCH	vs White	vs Black
Base	`#5086c3` Copy	`oklch(0.61 0.110 253)` Copy	3.79:1 AA-lg	5.54:1 AA
95	`#e9f3ff` Copy	`oklch(0.96 0.020 253)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d3e7ff` Copy	`oklch(0.92 0.039 253)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a3cdfe` Copy	`oklch(0.84 0.082 253)` Copy	1.65:1 fail	12.7:1 AAA
70	`#80b2eb` Copy	`oklch(0.75 0.099 253)` Copy	2.21:1 fail	9.5:1 AAA
60	`#6298d7` Copy	`oklch(0.67 0.110 253)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#4278b4` Copy	`oklch(0.56 0.110 253)` Copy	4.59:1 AA	4.58:1 AA
40	`#255b94` Copy	`oklch(0.46 0.110 253)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#174779` Copy	`oklch(0.39 0.099 253)` Copy	9.5:1 AAA	2.21:1 fail
20	`#0d345b` Copy	`oklch(0.32 0.082 253)` Copy	12.7:1 AAA	1.65:1 fail
10	`#051e39` Copy	`oklch(0.24 0.060 253)` Copy	16.7:1 AAA	1.26:1 fail
05	`#041325` Copy	`oklch(0.18 0.044 253)` Copy	18.7:1 AAA	1.12:1 fail

NeutralSilver Lining `0.05` Caps OKLCH Chroma (Saturation). Lower = Grayer.

#bdb6ab oklch(0.78 0.017 79)

Step	Hex	OKLCH	vs White	vs Black
Base	`#bdb6ab` Copy	`oklch(0.78 0.017 79)` Copy	2.01:1 fail	10.44:1 AAA
95	`#f4f1ed` Copy	`oklch(0.96 0.007 79)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e9e5de` Copy	`oklch(0.92 0.010 79)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cec9c0` Copy	`oklch(0.84 0.013 79)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b4aea4` Copy	`oklch(0.75 0.016 79)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9b948a` Copy	`oklch(0.67 0.017 79)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7b756a` Copy	`oklch(0.56 0.017 79)` Copy	4.59:1 AA	4.58:1 AA
40	`#5f584f` Copy	`oklch(0.46 0.017 79)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4a453d` Copy	`oklch(0.39 0.016 79)` Copy	9.5:1 AAA	2.21:1 fail
20	`#36322c` Copy	`oklch(0.32 0.013 79)` Copy	12.7:1 AAA	1.65:1 fail
10	`#201e19` Copy	`oklch(0.24 0.010 79)` Copy	16.7:1 AAA	1.26:1 fail
05	`#14120f` Copy	`oklch(0.18 0.007 79)` Copy	18.7:1 AAA	1.12:1 fail

SuccessDusty Turquoise

#649a9f oklch(0.65 0.058 203)

Step	Hex	OKLCH	vs White	vs Black
Base	`#649a9f` Copy	`oklch(0.65 0.058 203)` Copy	3.15:1 AA-lg	6.66:1 AA
95	`#e0f6f8` Copy	`oklch(0.96 0.023 203)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cdebee` Copy	`oklch(0.92 0.032 203)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a8d1d4` Copy	`oklch(0.83 0.043 203)` Copy	1.65:1 fail	12.7:1 AAA
70	`#86b7bb` Copy	`oklch(0.75 0.052 203)` Copy	2.21:1 fail	9.5:1 AAA
60	`#689ea3` Copy	`oklch(0.66 0.058 203)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#487e83` Copy	`oklch(0.56 0.058 203)` Copy	4.59:1 AA	4.58:1 AA
40	`#2b6166` Copy	`oklch(0.46 0.058 203)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#1c4c51` Copy	`oklch(0.39 0.052 203)` Copy	9.5:1 AAA	2.21:1 fail
20	`#11383b` Copy	`oklch(0.32 0.043 203)` Copy	12.7:1 AAA	1.65:1 fail
10	`#082124` Copy	`oklch(0.23 0.032 203)` Copy	16.7:1 AAA	1.26:1 fail
05	`#051516` Copy	`oklch(0.18 0.023 203)` Copy	18.7:1 AAA	1.12:1 fail

WarningCurry

#bd9e6f oklch(0.72 0.073 78)

Step	Hex	OKLCH	vs White	vs Black
Base	`#bd9e6f` Copy	`oklch(0.72 0.073 78)` Copy	2.53:1 fail	8.28:1 AAA
95	`#fdf0dd` Copy	`oklch(0.96 0.029 78)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f5e3c9` Copy	`oklch(0.92 0.040 78)` Copy	1.26:1 fail	16.7:1 AAA
80	`#dec6a2` Copy	`oklch(0.84 0.055 78)` Copy	1.65:1 fail	12.7:1 AAA
70	`#c6aa80` Copy	`oklch(0.75 0.066 78)` Copy	2.21:1 fail	9.5:1 AAA
60	`#af9062` Copy	`oklch(0.67 0.073 78)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8e7143` Copy	`oklch(0.57 0.073 78)` Copy	4.59:1 AA	4.58:1 AA
40	`#705426` Copy	`oklch(0.47 0.073 78)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5a4119` Copy	`oklch(0.40 0.066 78)` Copy	9.5:1 AAA	2.21:1 fail
20	`#432f0f` Copy	`oklch(0.32 0.055 78)` Copy	12.7:1 AAA	1.65:1 fail
10	`#291c06` Copy	`oklch(0.24 0.040 78)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1a1104` Copy	`oklch(0.18 0.029 78)` Copy	18.7:1 AAA	1.12:1 fail

DangerOrange Ochre

#dc793a oklch(0.68 0.145 50)

Step	Hex	OKLCH	vs White	vs Black
Base	`#dc793a` Copy	`oklch(0.68 0.145 50)` Copy	3.07:1 AA-lg	6.84:1 AA
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	`#ffba93` Copy	`oklch(0.84 0.096 50)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f49862` Copy	`oklch(0.76 0.130 50)` Copy	2.21:1 fail	9.5:1 AAA
60	`#de7b3c` Copy	`oklch(0.68 0.145 50)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ba5a12` Copy	`oklch(0.58 0.145 50)` Copy	4.59:1 AA	4.58:1 AA
40	`#924200` Copy	`oklch(0.48 0.125 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.050 50)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Flamingo

Marina

Silver Lining

Dusty Turquoise

Curry

Orange Ochre

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Flamingo

Marina

Silver Lining

Dusty Turquoise

Curry

Orange Ochre

Progress & Controls

Notifications

← Key

Key →

← Key

Key →

Brand · Flamingo

Brand

Accent · Marina

Accent

Neutral · Silver Lining · 0.05 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success · Dusty Turquoise

Success

Warning · Curry

Warning

Danger · Orange Ochre

Danger

BrandFlamingo

AccentMarina

NeutralSilver Lining `0.05` Caps OKLCH Chroma (Saturation). Lower = Grayer.

SuccessDusty Turquoise

WarningCurry

DangerOrange Ochre