Look Awesome

Brand

#fa51fb oklch(0.73 0.271 328)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fa51fb` Copy	`oklch(0.73 0.271 328)` Copy	2.75:1 fail	7.63:1 AAA
95	`#ffecfe` Copy	`oklch(0.96 0.031 328)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdafd` Copy	`oklch(0.93 0.062 328)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffaefd` Copy	`oklch(0.85 0.138 328)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff7bfe` Copy	`oklch(0.78 0.222 328)` Copy	2.21:1 fail	9.5:1 AAA
60	`#f248f3` Copy	`oklch(0.70 0.271 328)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#cd10d0` Copy	`oklch(0.60 0.271 328)` Copy	4.59:1 AA	4.58:1 AA
40	`#9f00a1` Copy	`oklch(0.50 0.228 328)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7f0080` Copy	`oklch(0.42 0.193 328)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5f0060` Copy	`oklch(0.34 0.158 328)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3c003d` Copy	`oklch(0.25 0.116 328)` Copy	16.7:1 AAA	1.26:1 fail
05	`#280029` Copy	`oklch(0.20 0.091 328)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#f95f94 oklch(0.70 0.193 2)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f95f94` Copy	`oklch(0.70 0.193 2)` Copy	2.96:1 fail	7.09:1 AAA
95	`#ffeef1` Copy	`oklch(0.96 0.020 2)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdde5` Copy	`oklch(0.93 0.040 2)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb5c8` Copy	`oklch(0.85 0.089 2)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8aad` Copy	`oklch(0.77 0.146 2)` Copy	2.21:1 fail	9.5:1 AAA
60	`#f85e93` Copy	`oklch(0.70 0.193 2)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d23974` Copy	`oklch(0.59 0.193 2)` Copy	4.59:1 AA	4.58:1 AA
40	`#af0a57` Copy	`oklch(0.49 0.193 2)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8d0044` Copy	`oklch(0.42 0.168 2)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6a0032` Copy	`oklch(0.34 0.136 2)` Copy	12.7:1 AAA	1.65:1 fail
10	`#43001d` Copy	`oklch(0.25 0.100 2)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2d0012` Copy	`oklch(0.19 0.077 2)` Copy	18.7:1 AAA	1.12:1 fail

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

#403e61 oklch(0.38 0.059 286)

Step	Hex	OKLCH	vs White	vs Black
Base	`#403e61` Copy	`oklch(0.38 0.059 286)` Copy	10.1:1 AAA	2.08:1 fail
95	`#f1f1ff` Copy	`oklch(0.96 0.020 286)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e3e3fb` Copy	`oklch(0.92 0.032 286)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c7c7e6` Copy	`oklch(0.84 0.044 286)` Copy	1.65:1 fail	12.7:1 AAA
70	`#acabd0` Copy	`oklch(0.76 0.053 286)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9291b9` Copy	`oklch(0.67 0.059 286)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#737298` Copy	`oklch(0.57 0.059 286)` Copy	4.59:1 AA	4.58:1 AA
40	`#57557a` Copy	`oklch(0.47 0.059 286)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#444262` Copy	`oklch(0.40 0.053 286)` Copy	9.5:1 AAA	2.21:1 fail
20	`#313049` Copy	`oklch(0.32 0.044 286)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1d1c2d` Copy	`oklch(0.24 0.032 286)` Copy	16.7:1 AAA	1.26:1 fail
05	`#12111d` Copy	`oklch(0.18 0.024 286)` Copy	18.7:1 AAA	1.12:1 fail

Success

#1bf7d5 oklch(0.87 0.159 178)

Step	Hex	OKLCH	vs White	vs Black
Base	`#1bf7d5` Copy	`oklch(0.87 0.159 178)` Copy	1.37:1 fail	15.31:1 AAA
95	`#c2feef` Copy	`oklch(0.95 0.063 178)` Copy	1.12:1 fail	18.7:1 AAA
90	`#a0f5e1` Copy	`oklch(0.91 0.087 178)` Copy	1.26:1 fail	16.7:1 AAA
80	`#5fdec4` Copy	`oklch(0.82 0.119 178)` Copy	1.65:1 fail	12.7:1 AAA
70	`#00c4a9` Copy	`oklch(0.74 0.136 178)` Copy	2.21:1 fail	9.5:1 AAA
60	`#00a890` Copy	`oklch(0.65 0.121 178)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#008571` Copy	`oklch(0.55 0.102 178)` Copy	4.59:1 AA	4.58:1 AA
40	`#006556` Copy	`oklch(0.45 0.084 178)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004f43` Copy	`oklch(0.38 0.071 178)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003a31` Copy	`oklch(0.31 0.058 178)` Copy	12.7:1 AAA	1.65:1 fail
10	`#00231c` Copy	`oklch(0.23 0.042 178)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001611` Copy	`oklch(0.18 0.034 178)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#f8df8f oklch(0.91 0.103 93)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f8df8f` Copy	`oklch(0.91 0.103 93)` Copy	1.32:1 fail	15.94:1 AAA
95	`#fbf2d3` Copy	`oklch(0.96 0.041 93)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f2e5bb` Copy	`oklch(0.92 0.057 93)` Copy	1.26:1 fail	16.7:1 AAA
80	`#dbc88f` Copy	`oklch(0.84 0.077 93)` Copy	1.65:1 fail	12.7:1 AAA
70	`#c3ad68` Copy	`oklch(0.75 0.093 93)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ab9344` Copy	`oklch(0.67 0.103 93)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8b731f` Copy	`oklch(0.56 0.103 93)` Copy	4.59:1 AA	4.58:1 AA
40	`#6c5700` Copy	`oklch(0.46 0.095 93)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#554400` Copy	`oklch(0.39 0.081 93)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3e3100` Copy	`oklch(0.32 0.066 93)` Copy	12.7:1 AAA	1.65:1 fail
10	`#261d00` Copy	`oklch(0.23 0.048 93)` Copy	16.7:1 AAA	1.26:1 fail
05	`#181200` Copy	`oklch(0.18 0.038 93)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#fb7b6a oklch(0.73 0.160 29)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fb7b6a` Copy	`oklch(0.73 0.160 29)` Copy	2.58:1 fail	8.14:1 AAA
95	`#ffeeeb` Copy	`oklch(0.96 0.019 29)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded8` Copy	`oklch(0.93 0.038 29)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8ac` Copy	`oklch(0.85 0.085 29)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8f7f` Copy	`oklch(0.77 0.138 29)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ed6e5e` Copy	`oklch(0.69 0.160 29)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#c84d3f` Copy	`oklch(0.58 0.160 29)` Copy	4.59:1 AA	4.58:1 AA
40	`#a62c21` Copy	`oklch(0.48 0.160 29)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#871c14` Copy	`oklch(0.41 0.144 29)` Copy	9.5:1 AAA	2.21:1 fail
20	`#66110b` Copy	`oklch(0.33 0.120 29)` Copy	12.7:1 AAA	1.65:1 fail
10	`#410704` Copy	`oklch(0.24 0.088 29)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2a0503` Copy	`oklch(0.19 0.064 29)` 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.06 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

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