Look Awesome

Brand

#f721a9 oklch(0.65 0.260 349)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f721a9` Copy	`oklch(0.65 0.260 349)` Copy	3.66:1 AA-lg	5.75:1 AA
95	`#ffedf5` Copy	`oklch(0.96 0.022 349)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdcec` Copy	`oklch(0.93 0.044 349)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb3d8` Copy	`oklch(0.85 0.099 349)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff86c6` Copy	`oklch(0.77 0.162 349)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff4eb5` Copy	`oklch(0.70 0.233 349)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#df0096` Copy	`oklch(0.60 0.250 349)` Copy	4.59:1 AA	4.58:1 AA
40	`#ac0073` Copy	`oklch(0.49 0.206 349)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#89005b` Copy	`oklch(0.42 0.174 349)` Copy	9.5:1 AAA	2.21:1 fail
20	`#670043` Copy	`oklch(0.34 0.142 349)` Copy	12.7:1 AAA	1.65:1 fail
10	`#410029` Copy	`oklch(0.25 0.104 349)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2c001a` Copy	`oklch(0.19 0.082 349)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#2af5e5 oklch(0.88 0.148 186)

Step	Hex	OKLCH	vs White	vs Black
Base	`#2af5e5` Copy	`oklch(0.88 0.148 186)` Copy	1.37:1 fail	15.29:1 AAA
95	`#c3fdf5` Copy	`oklch(0.95 0.059 186)` Copy	1.12:1 fail	18.7:1 AAA
90	`#a2f4ea` Copy	`oklch(0.91 0.081 186)` Copy	1.26:1 fail	16.7:1 AAA
80	`#62dcd0` Copy	`oklch(0.82 0.111 186)` Copy	1.65:1 fail	12.7:1 AAA
70	`#00c3b6` Copy	`oklch(0.74 0.129 186)` Copy	2.21:1 fail	9.5:1 AAA
60	`#00a79b` Copy	`oklch(0.66 0.115 186)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#00847b` Copy	`oklch(0.55 0.097 186)` Copy	4.59:1 AA	4.58:1 AA
40	`#00645d` Copy	`oklch(0.45 0.080 186)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004f49` Copy	`oklch(0.38 0.067 186)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003a35` Copy	`oklch(0.31 0.055 186)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002320` Copy	`oklch(0.23 0.040 186)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001614` Copy	`oklch(0.18 0.032 186)` Copy	18.7:1 AAA	1.12:1 fail

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

#faecdc oklch(0.95 0.026 71)

Step	Hex	OKLCH	vs White	vs Black
Base	`#faecdc` Copy	`oklch(0.95 0.026 71)` Copy	1.16:1 fail	18.1:1 AAA
95	`#f7f1eb` Copy	`oklch(0.96 0.010 71)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ece4db` Copy	`oklch(0.92 0.014 71)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d2c8bc` Copy	`oklch(0.84 0.020 71)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b9ad9f` Copy	`oklch(0.75 0.024 71)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a09384` Copy	`oklch(0.67 0.026 71)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#807465` Copy	`oklch(0.56 0.026 71)` Copy	4.59:1 AA	4.58:1 AA
40	`#63574a` Copy	`oklch(0.46 0.026 71)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4e4438` Copy	`oklch(0.39 0.024 71)` Copy	9.5:1 AAA	2.21:1 fail
20	`#393128` Copy	`oklch(0.32 0.020 71)` Copy	12.7:1 AAA	1.65:1 fail
10	`#221d17` Copy	`oklch(0.24 0.014 71)` Copy	16.7:1 AAA	1.26:1 fail
05	`#15120d` Copy	`oklch(0.18 0.010 71)` Copy	18.7:1 AAA	1.12:1 fail

Success

#6528b3 oklch(0.45 0.202 297)

Step	Hex	OKLCH	vs White	vs Black
Base	`#6528b3` Copy	`oklch(0.45 0.202 297)` Copy	8.37:1 AAA	2.51:1 fail
95	`#f4f0ff` Copy	`oklch(0.96 0.021 297)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e9e1ff` Copy	`oklch(0.93 0.041 297)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d2c0ff` Copy	`oklch(0.84 0.089 297)` Copy	1.65:1 fail	12.7:1 AAA
70	`#bc9eff` Copy	`oklch(0.76 0.139 297)` Copy	2.21:1 fail	9.5:1 AAA
60	`#aa7bff` Copy	`oklch(0.69 0.189 297)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8c57e2` Copy	`oklch(0.58 0.202 297)` Copy	4.59:1 AA	4.58:1 AA
40	`#7037c1` Copy	`oklch(0.49 0.202 297)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5a269f` Copy	`oklch(0.42 0.182 297)` Copy	9.5:1 AAA	2.21:1 fail
20	`#43197a` Copy	`oklch(0.34 0.151 297)` Copy	12.7:1 AAA	1.65:1 fail
10	`#290c4e` Copy	`oklch(0.25 0.111 297)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1a0733` Copy	`oklch(0.19 0.081 297)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#fd6439 oklch(0.69 0.196 36)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fd6439` Copy	`oklch(0.69 0.196 36)` Copy	2.98:1 fail	7.06:1 AAA
95	`#ffeeea` Copy	`oklch(0.96 0.020 36)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded5` Copy	`oklch(0.93 0.039 36)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb9a5` Copy	`oklch(0.84 0.087 36)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff9072` Copy	`oklch(0.77 0.141 36)` Copy	2.21:1 fail	9.5:1 AAA
60	`#fc6338` Copy	`oklch(0.69 0.196 36)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d63f08` Copy	`oklch(0.58 0.196 36)` Copy	4.59:1 AA	4.58:1 AA
40	`#a62d00` Copy	`oklch(0.48 0.164 36)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#842100` Copy	`oklch(0.41 0.139 36)` Copy	9.5:1 AAA	2.21:1 fail
20	`#631700` Copy	`oklch(0.33 0.114 36)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3f0b00` Copy	`oklch(0.24 0.084 36)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2b0500` Copy	`oklch(0.19 0.066 36)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#f3587a oklch(0.67 0.190 11)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f3587a` Copy	`oklch(0.67 0.190 11)` Copy	3.24:1 AA-lg	6.49:1 AA
95	`#ffeeef` Copy	`oklch(0.96 0.019 11)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdde1` Copy	`oklch(0.93 0.038 11)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb6bf` Copy	`oklch(0.85 0.086 11)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8c9f` Copy	`oklch(0.77 0.140 11)` Copy	2.21:1 fail	9.5:1 AAA
60	`#fa5f80` Copy	`oklch(0.69 0.190 11)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d43a61` Copy	`oklch(0.59 0.190 11)` Copy	4.59:1 AA	4.58:1 AA
40	`#b10b46` Copy	`oklch(0.49 0.190 11)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8e0035` Copy	`oklch(0.41 0.166 11)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6b0026` Copy	`oklch(0.34 0.135 11)` Copy	12.7:1 AAA	1.65:1 fail
10	`#440015` Copy	`oklch(0.25 0.099 11)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2e000c` Copy	`oklch(0.19 0.076 11)` 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.03 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

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