Look Awesome

Brand

#50cbd9 oklch(0.78 0.109 206)

Step	Hex	OKLCH	vs White	vs Black
Base	`#50cbd9` Copy	`oklch(0.78 0.109 206)` Copy	1.93:1 fail	10.89:1 AAA
95	`#cff9ff` Copy	`oklch(0.96 0.044 206)` Copy	1.12:1 fail	18.7:1 AAA
90	`#b5eff7` Copy	`oklch(0.92 0.060 206)` Copy	1.26:1 fail	16.7:1 AAA
80	`#83d6e0` Copy	`oklch(0.83 0.082 206)` Copy	1.65:1 fail	12.7:1 AAA
70	`#53bdc9` Copy	`oklch(0.74 0.098 206)` Copy	2.21:1 fail	9.5:1 AAA
60	`#16a4b2` Copy	`oklch(0.66 0.109 206)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#00828e` Copy	`oklch(0.55 0.095 206)` Copy	4.59:1 AA	4.58:1 AA
40	`#00636c` Copy	`oklch(0.46 0.078 206)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004e55` Copy	`oklch(0.39 0.066 206)` Copy	9.5:1 AAA	2.21:1 fail
20	`#00393f` Copy	`oklch(0.31 0.054 206)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002226` Copy	`oklch(0.23 0.040 206)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001518` Copy	`oklch(0.18 0.031 206)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#fb83c2 oklch(0.76 0.162 349)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fb83c2` Copy	`oklch(0.76 0.162 349)` Copy	2.3:1 fail	9.13:1 AAA
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	`#f88cc3` Copy	`oklch(0.77 0.146 349)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e26dab` Copy	`oklch(0.69 0.162 349)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#be4c8b` Copy	`oklch(0.58 0.162 349)` Copy	4.59:1 AA	4.58:1 AA
40	`#9c2c6e` Copy	`oklch(0.49 0.162 349)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7f1c57` Copy	`oklch(0.41 0.146 349)` Copy	9.5:1 AAA	2.21:1 fail
20	`#601141` Copy	`oklch(0.34 0.121 349)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3d0727` Copy	`oklch(0.25 0.089 349)` Copy	16.7:1 AAA	1.26:1 fail
05	`#270519` Copy	`oklch(0.19 0.065 349)` Copy	18.7:1 AAA	1.12:1 fail

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

#3d2d78 oklch(0.36 0.122 289)

Step	Hex	OKLCH	vs White	vs Black
Base	`#3d2d78` Copy	`oklch(0.36 0.122 289)` Copy	11.38:1 AAA	1.84:1 fail
95	`#f1f0ff` Copy	`oklch(0.96 0.020 289)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e4e3ff` Copy	`oklch(0.92 0.039 289)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c8c3ff` Copy	`oklch(0.84 0.084 289)` Copy	1.65:1 fail	12.7:1 AAA
70	`#aea5f3` Copy	`oklch(0.76 0.110 289)` Copy	2.21:1 fail	9.5:1 AAA
60	`#958adf` Copy	`oklch(0.68 0.122 289)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#766bbc` Copy	`oklch(0.57 0.122 289)` Copy	4.59:1 AA	4.58:1 AA
40	`#5b4e9c` Copy	`oklch(0.47 0.122 289)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#473b7f` Copy	`oklch(0.40 0.110 289)` Copy	9.5:1 AAA	2.21:1 fail
20	`#342a60` Copy	`oklch(0.33 0.092 289)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1f183d` Copy	`oklch(0.24 0.067 289)` Copy	16.7:1 AAA	1.26:1 fail
05	`#130f27` Copy	`oklch(0.19 0.049 289)` Copy	18.7:1 AAA	1.12:1 fail

Success

#8ce2ed oklch(0.86 0.084 206)

Step	Hex	OKLCH	vs White	vs Black
Base	`#8ce2ed` Copy	`oklch(0.86 0.084 206)` Copy	1.48:1 fail	14.22:1 AAA
95	`#d8f8fc` Copy	`oklch(0.96 0.034 206)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c1edf3` Copy	`oklch(0.92 0.046 206)` Copy	1.26:1 fail	16.7:1 AAA
80	`#96d4dc` Copy	`oklch(0.83 0.063 206)` Copy	1.65:1 fail	12.7:1 AAA
70	`#6fbac4` Copy	`oklch(0.74 0.076 206)` Copy	2.21:1 fail	9.5:1 AAA
60	`#4aa1ac` Copy	`oklch(0.66 0.084 206)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#24818b` Copy	`oklch(0.56 0.084 206)` Copy	4.59:1 AA	4.58:1 AA
40	`#00636c` Copy	`oklch(0.46 0.078 206)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004e55` Copy	`oklch(0.39 0.066 206)` Copy	9.5:1 AAA	2.21:1 fail
20	`#00393f` Copy	`oklch(0.31 0.054 206)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002226` Copy	`oklch(0.23 0.040 206)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001518` Copy	`oklch(0.18 0.031 206)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#fea6a4 oklch(0.81 0.105 21)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fea6a4` Copy	`oklch(0.81 0.105 21)` Copy	1.87:1 fail	11.2:1 AAA
95	`#ffeeed` Copy	`oklch(0.96 0.019 21)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdedc` Copy	`oklch(0.93 0.037 21)` Copy	1.26:1 fail	16.7:1 AAA
80	`#fcb8b6` Copy	`oklch(0.85 0.078 21)` Copy	1.65:1 fail	12.7:1 AAA
70	`#e89a98` Copy	`oklch(0.76 0.094 21)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d27e7d` Copy	`oklch(0.68 0.105 21)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#af5e5e` Copy	`oklch(0.58 0.105 21)` Copy	4.59:1 AA	4.58:1 AA
40	`#8e4142` Copy	`oklch(0.48 0.105 21)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#733132` Copy	`oklch(0.40 0.094 21)` Copy	9.5:1 AAA	2.21:1 fail
20	`#572223` Copy	`oklch(0.33 0.078 21)` Copy	12.7:1 AAA	1.65:1 fail
10	`#361213` Copy	`oklch(0.24 0.058 21)` Copy	16.7:1 AAA	1.26:1 fail
05	`#230b0b` Copy	`oklch(0.19 0.042 21)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#fd57b3 oklch(0.71 0.219 350)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fd57b3` Copy	`oklch(0.71 0.219 350)` Copy	2.92:1 fail	7.19:1 AAA
95	`#ffedf5` Copy	`oklch(0.96 0.022 350)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdceb` Copy	`oklch(0.93 0.044 350)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb3d7` Copy	`oklch(0.85 0.098 350)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff87c4` Copy	`oklch(0.77 0.160 350)` Copy	2.21:1 fail	9.5:1 AAA
60	`#fa55b1` Copy	`oklch(0.70 0.219 350)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d42c90` Copy	`oklch(0.59 0.219 350)` Copy	4.59:1 AA	4.58:1 AA
40	`#ac0071` Copy	`oklch(0.49 0.205 350)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#890059` Copy	`oklch(0.42 0.174 350)` Copy	9.5:1 AAA	2.21:1 fail
20	`#670042` Copy	`oklch(0.34 0.142 350)` Copy	12.7:1 AAA	1.65:1 fail
10	`#410028` Copy	`oklch(0.25 0.104 350)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2c001a` Copy	`oklch(0.19 0.082 350)` Copy	18.7:1 AAA	1.12:1 fail

Bright Purple

#6235e8 oklch(0.51 0.247 285)

Step	Hex	OKLCH	vs White	vs Black
Base	`#6235e8` Copy	`oklch(0.51 0.247 285)` Copy	6.58:1 AA	3.19:1 AA-lg
95	`#f0f1ff` Copy	`oklch(0.96 0.020 285)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e3e3ff` Copy	`oklch(0.92 0.038 285)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c5c4ff` Copy	`oklch(0.84 0.082 285)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a9a5ff` Copy	`oklch(0.76 0.128 285)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9085ff` Copy	`oklch(0.68 0.175 285)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7657ff` Copy	`oklch(0.59 0.237 285)` Copy	4.59:1 AA	4.58:1 AA
40	`#5f2fe3` Copy	`oklch(0.49 0.247 285)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4c1cbd` Copy	`oklch(0.42 0.222 285)` Copy	9.5:1 AAA	2.21:1 fail
20	`#381091` Copy	`oklch(0.34 0.185 285)` Copy	12.7:1 AAA	1.65:1 fail
10	`#21075e` Copy	`oklch(0.25 0.136 285)` Copy	16.7:1 AAA	1.26:1 fail
05	`#14053e` Copy	`oklch(0.20 0.099 285)` Copy	18.7:1 AAA	1.12:1 fail

Bright Pink

#f31faa oklch(0.65 0.259 348)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f31faa` Copy	`oklch(0.65 0.259 348)` Copy	3.76:1 AA-lg	5.59:1 AA
95	`#ffedf6` Copy	`oklch(0.96 0.022 348)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdced` Copy	`oklch(0.93 0.045 348)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb3da` Copy	`oklch(0.85 0.101 348)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff86c8` Copy	`oklch(0.77 0.164 348)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff4db9` Copy	`oklch(0.70 0.236 348)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#de009a` Copy	`oklch(0.60 0.251 348)` Copy	4.59:1 AA	4.58:1 AA
40	`#ab0076` Copy	`oklch(0.49 0.207 348)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#88005d` Copy	`oklch(0.42 0.175 348)` Copy	9.5:1 AAA	2.21:1 fail
20	`#660045` Copy	`oklch(0.34 0.143 348)` Copy	12.7:1 AAA	1.65:1 fail
10	`#41002a` Copy	`oklch(0.25 0.105 348)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2c001b` Copy	`oklch(0.19 0.082 348)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Bright Purple

Bright Pink

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Bright Purple

Bright Pink

Progress & Controls

Notifications

← Key

Key →

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

Bright Purple

Unassigned

Bright Pink

Unassigned

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

Bright Purple

Unassigned

Bright Pink

Unassigned

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