Look Awesome

Brand

#ec81a2 oklch(0.73 0.135 1)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ec81a2` Copy	`oklch(0.73 0.135 1)` Copy	2.55:1 fail	8.23:1 AAA
95	`#ffedf2` Copy	`oklch(0.96 0.020 1)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdde5` Copy	`oklch(0.93 0.040 1)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb5c9` Copy	`oklch(0.85 0.090 1)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f391ae` Copy	`oklch(0.77 0.122 1)` Copy	2.21:1 fail	9.5:1 AAA
60	`#dd7495` Copy	`oklch(0.69 0.135 1)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b95475` Copy	`oklch(0.58 0.135 1)` Copy	4.59:1 AA	4.58:1 AA
40	`#983659` Copy	`oklch(0.48 0.135 1)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7b2646` Copy	`oklch(0.41 0.122 1)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5d1933` Copy	`oklch(0.33 0.102 1)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3b0c1e` Copy	`oklch(0.24 0.074 1)` Copy	16.7:1 AAA	1.26:1 fail
05	`#260712` Copy	`oklch(0.19 0.054 1)` Copy	18.7:1 AAA	1.12:1 fail

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

#a6aec2 oklch(0.75 0.030 268)

Step	Hex	OKLCH	vs White	vs Black
Base	`#a6aec2` Copy	`oklch(0.75 0.030 268)` Copy	2.22:1 fail	9.45:1 AAA
95	`#eef2fa` Copy	`oklch(0.96 0.012 268)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e1e5f1` Copy	`oklch(0.92 0.017 268)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c3c9d9` Copy	`oklch(0.84 0.023 268)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a7aec0` Copy	`oklch(0.75 0.027 268)` Copy	2.21:1 fail	9.5:1 AAA
60	`#8d95a8` Copy	`oklch(0.67 0.030 268)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#6e7588` Copy	`oklch(0.56 0.030 268)` Copy	4.59:1 AA	4.58:1 AA
40	`#52596b` Copy	`oklch(0.46 0.030 268)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#404655` Copy	`oklch(0.39 0.027 268)` Copy	9.5:1 AAA	2.21:1 fail
20	`#2e333f` Copy	`oklch(0.32 0.023 268)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1b1e26` Copy	`oklch(0.24 0.017 268)` Copy	16.7:1 AAA	1.26:1 fail
05	`#101218` Copy	`oklch(0.18 0.012 268)` Copy	18.7:1 AAA	1.12:1 fail

Success

#407f9e oklch(0.57 0.080 232)

Step	Hex	OKLCH	vs White	vs Black
Base	`#407f9e` Copy	`oklch(0.57 0.080 232)` Copy	4.42:1 AA-lg	4.75:1 AA
95	`#e2f5ff` Copy	`oklch(0.96 0.024 232)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c8eafd` Copy	`oklch(0.92 0.044 232)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a1d0e9` Copy	`oklch(0.83 0.060 232)` Copy	1.65:1 fail	12.7:1 AAA
70	`#7eb6d3` Copy	`oklch(0.75 0.072 232)` Copy	2.21:1 fail	9.5:1 AAA
60	`#5e9dbd` Copy	`oklch(0.66 0.080 232)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#3d7c9b` Copy	`oklch(0.56 0.080 232)` Copy	4.59:1 AA	4.58:1 AA
40	`#1d5f7d` Copy	`oklch(0.46 0.080 232)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#0e4b65` Copy	`oklch(0.39 0.072 232)` Copy	9.5:1 AAA	2.21:1 fail
20	`#06374b` Copy	`oklch(0.32 0.060 232)` Copy	12.7:1 AAA	1.65:1 fail
10	`#02212f` Copy	`oklch(0.23 0.044 232)` Copy	16.7:1 AAA	1.26:1 fail
05	`#02141e` Copy	`oklch(0.18 0.032 232)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#f2bbb6 oklch(0.84 0.064 24)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f2bbb6` Copy	`oklch(0.84 0.064 24)` Copy	1.67:1 fail	12.56:1 AAA
95	`#ffeeec` Copy	`oklch(0.96 0.019 24)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fededb` Copy	`oklch(0.93 0.035 24)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e9c0bc` Copy	`oklch(0.84 0.048 24)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d3a39e` Copy	`oklch(0.76 0.058 24)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bc8884` Copy	`oklch(0.68 0.064 24)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9a6965` Copy	`oklch(0.57 0.064 24)` Copy	4.59:1 AA	4.58:1 AA
40	`#7c4d49` Copy	`oklch(0.47 0.064 24)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#633b38` Copy	`oklch(0.40 0.058 24)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4a2a28` Copy	`oklch(0.32 0.048 24)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2e1816` Copy	`oklch(0.24 0.035 24)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1d0e0d` Copy	`oklch(0.19 0.026 24)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#d19099 oklch(0.72 0.080 10)

Step	Hex	OKLCH	vs White	vs Black
Base	`#d19099` Copy	`oklch(0.72 0.080 10)` Copy	2.57:1 fail	8.16:1 AAA
95	`#ffeef0` Copy	`oklch(0.96 0.019 10)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdde1` Copy	`oklch(0.93 0.038 10)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f0bcc3` Copy	`oklch(0.84 0.060 10)` Copy	1.65:1 fail	12.7:1 AAA
70	`#da9fa7` Copy	`oklch(0.76 0.072 10)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c4848d` Copy	`oklch(0.68 0.080 10)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#a1646d` Copy	`oklch(0.57 0.080 10)` Copy	4.59:1 AA	4.58:1 AA
40	`#824852` Copy	`oklch(0.47 0.080 10)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#69373f` Copy	`oklch(0.40 0.072 10)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4e272d` Copy	`oklch(0.33 0.060 10)` Copy	12.7:1 AAA	1.65:1 fail
10	`#31161a` Copy	`oklch(0.24 0.044 10)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1f0d10` Copy	`oklch(0.19 0.032 10)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#504660 oklch(0.41 0.044 302)

Step	Hex	OKLCH	vs White	vs Black
Base	`#504660` Copy	`oklch(0.41 0.044 302)` Copy	8.8:1 AAA	2.39:1 fail
95	`#f4f0fd` Copy	`oklch(0.96 0.018 302)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e9e3f4` Copy	`oklch(0.92 0.024 302)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cec6dd` Copy	`oklch(0.84 0.033 302)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b4aac5` Copy	`oklch(0.76 0.040 302)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9b90ad` Copy	`oklch(0.67 0.044 302)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7b718d` Copy	`oklch(0.57 0.044 302)` Copy	4.59:1 AA	4.58:1 AA
40	`#5f556f` Copy	`oklch(0.47 0.044 302)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4b4259` Copy	`oklch(0.40 0.040 302)` Copy	9.5:1 AAA	2.21:1 fail
20	`#373042` Copy	`oklch(0.32 0.033 302)` Copy	12.7:1 AAA	1.65:1 fail
10	`#201c28` Copy	`oklch(0.24 0.024 302)` Copy	16.7:1 AAA	1.26:1 fail
05	`#141119` Copy	`oklch(0.18 0.018 302)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#ba7c90 oklch(0.66 0.081 359)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ba7c90` Copy	`oklch(0.66 0.081 359)` Copy	3.29:1 AA-lg	6.37:1 AA
95	`#ffedf2` Copy	`oklch(0.96 0.020 359)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdde7` Copy	`oklch(0.93 0.040 359)` Copy	1.26:1 fail	16.7:1 AAA
80	`#eebccb` Copy	`oklch(0.84 0.061 359)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d99eb1` Copy	`oklch(0.76 0.073 359)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c28397` Copy	`oklch(0.68 0.081 359)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#a06478` Copy	`oklch(0.57 0.081 359)` Copy	4.59:1 AA	4.58:1 AA
40	`#81485b` Copy	`oklch(0.48 0.081 359)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#673648` Copy	`oklch(0.40 0.073 359)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4d2734` Copy	`oklch(0.33 0.061 359)` Copy	12.7:1 AAA	1.65:1 fail
10	`#30161f` Copy	`oklch(0.24 0.045 359)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1f0d13` Copy	`oklch(0.19 0.032 359)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Neutral

Success

Warning

Danger

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Neutral

Success

Warning

Danger

Progress & Controls

Notifications

← Key

Key →

Brand

Brand

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

Unassigned

Unassigned

Unassigned

Unassigned

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