Look Awesome

Brand

#f37f87 oklch(0.73 0.142 17)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f37f87` Copy	`oklch(0.73 0.142 17)` Copy	2.56:1 fail	8.2:1 AAA
95	`#ffeeee` Copy	`oklch(0.96 0.019 17)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffddde` Copy	`oklch(0.93 0.038 17)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb7b9` Copy	`oklch(0.85 0.085 17)` Copy	1.65:1 fail	12.7:1 AAA
70	`#fa9096` Copy	`oklch(0.77 0.128 17)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e4727b` Copy	`oklch(0.69 0.142 17)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#c0515c` Copy	`oklch(0.58 0.142 17)` Copy	4.59:1 AA	4.58:1 AA
40	`#9e3340` Copy	`oklch(0.48 0.142 17)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#812330` Copy	`oklch(0.41 0.128 17)` Copy	9.5:1 AAA	2.21:1 fail
20	`#611622` Copy	`oklch(0.33 0.107 17)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3e0b12` Copy	`oklch(0.24 0.078 17)` Copy	16.7:1 AAA	1.26:1 fail
05	`#28060a` Copy	`oklch(0.19 0.057 17)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#b895cc oklch(0.72 0.087 313)

Step	Hex	OKLCH	vs White	vs Black
Base	`#b895cc` Copy	`oklch(0.72 0.087 313)` Copy	2.56:1 fail	8.21:1 AAA
95	`#f9eeff` Copy	`oklch(0.96 0.025 313)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f2defe` Copy	`oklch(0.93 0.048 313)` Copy	1.26:1 fail	16.7:1 AAA
80	`#dbc0ea` Copy	`oklch(0.84 0.065 313)` Copy	1.65:1 fail	12.7:1 AAA
70	`#c3a3d5` Copy	`oklch(0.76 0.078 313)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ab88be` Copy	`oklch(0.68 0.087 313)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8a699d` Copy	`oklch(0.57 0.087 313)` Copy	4.59:1 AA	4.58:1 AA
40	`#6d4c7f` Copy	`oklch(0.47 0.087 313)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#573b66` Copy	`oklch(0.40 0.078 313)` Copy	9.5:1 AAA	2.21:1 fail
20	`#402a4c` Copy	`oklch(0.33 0.065 313)` Copy	12.7:1 AAA	1.65:1 fail
10	`#27182f` Copy	`oklch(0.24 0.048 313)` Copy	16.7:1 AAA	1.26:1 fail
05	`#180e1e` Copy	`oklch(0.19 0.035 313)` Copy	18.7:1 AAA	1.12:1 fail

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

#e9d0b1 oklch(0.87 0.050 73)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e9d0b1` Copy	`oklch(0.87 0.050 73)` Copy	1.49:1 fail	14.12:1 AAA
95	`#fbf0e4` Copy	`oklch(0.96 0.020 73)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f1e3d2` Copy	`oklch(0.92 0.027 73)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d9c7b0` Copy	`oklch(0.84 0.037 73)` Copy	1.65:1 fail	12.7:1 AAA
70	`#c1ab90` Copy	`oklch(0.75 0.045 73)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a99174` Copy	`oklch(0.67 0.050 73)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#887255` Copy	`oklch(0.56 0.050 73)` Copy	4.59:1 AA	4.58:1 AA
40	`#6b553a` Copy	`oklch(0.47 0.050 73)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#55422b` Copy	`oklch(0.39 0.045 73)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3f301d` Copy	`oklch(0.32 0.037 73)` Copy	12.7:1 AAA	1.65:1 fail
10	`#261c0f` Copy	`oklch(0.24 0.027 73)` Copy	16.7:1 AAA	1.26:1 fail
05	`#181108` Copy	`oklch(0.18 0.020 73)` Copy	18.7:1 AAA	1.12:1 fail

Success

#9b9085 oklch(0.66 0.021 67)

Step	Hex	OKLCH	vs White	vs Black
Base	`#9b9085` Copy	`oklch(0.66 0.021 67)` Copy	3.12:1 AA-lg	6.72:1 AA
95	`#f6f1ec` Copy	`oklch(0.96 0.008 67)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ebe4de` Copy	`oklch(0.92 0.011 67)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d1c8bf` Copy	`oklch(0.84 0.016 67)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b7ada3` Copy	`oklch(0.75 0.019 67)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9e9388` Copy	`oklch(0.67 0.021 67)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7e7469` Copy	`oklch(0.56 0.021 67)` Copy	4.59:1 AA	4.58:1 AA
40	`#62574d` Copy	`oklch(0.46 0.021 67)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4d443b` Copy	`oklch(0.39 0.019 67)` Copy	9.5:1 AAA	2.21:1 fail
20	`#38322b` Copy	`oklch(0.32 0.016 67)` Copy	12.7:1 AAA	1.65:1 fail
10	`#221d18` Copy	`oklch(0.24 0.011 67)` Copy	16.7:1 AAA	1.26:1 fail
05	`#15120f` Copy	`oklch(0.18 0.008 67)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#f77a63 oklch(0.72 0.158 32)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f77a63` Copy	`oklch(0.72 0.158 32)` Copy	2.65:1 fail	7.92:1 AAA
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	`#ff907a` Copy	`oklch(0.77 0.139 32)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ec7059` Copy	`oklch(0.69 0.158 32)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#c74e3a` Copy	`oklch(0.58 0.158 32)` Copy	4.59:1 AA	4.58:1 AA
40	`#a52e1b` Copy	`oklch(0.48 0.158 32)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#861e0d` Copy	`oklch(0.41 0.142 32)` Copy	9.5:1 AAA	2.21:1 fail
20	`#661205` Copy	`oklch(0.33 0.118 32)` Copy	12.7:1 AAA	1.65:1 fail
10	`#410802` Copy	`oklch(0.24 0.087 32)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2a0502` Copy	`oklch(0.19 0.063 32)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ec7fac oklch(0.73 0.142 355)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ec7fac` Copy	`oklch(0.73 0.142 355)` Copy	2.56:1 fail	8.2:1 AAA
95	`#ffedf3` Copy	`oklch(0.96 0.021 355)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdce8` Copy	`oklch(0.93 0.042 355)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb4d0` Copy	`oklch(0.85 0.094 355)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f390b8` Copy	`oklch(0.77 0.128 355)` Copy	2.21:1 fail	9.5:1 AAA
60	`#de729f` Copy	`oklch(0.69 0.142 355)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b9527f` Copy	`oklch(0.58 0.142 355)` Copy	4.59:1 AA	4.58:1 AA
40	`#983362` Copy	`oklch(0.48 0.142 355)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7c244e` Copy	`oklch(0.41 0.128 355)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5d1739` Copy	`oklch(0.33 0.107 355)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3b0b22` Copy	`oklch(0.24 0.078 355)` Copy	16.7:1 AAA	1.26:1 fail
05	`#260715` Copy	`oklch(0.19 0.057 355)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Progress & Controls

Notifications

← Key

Key →

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

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