Look Awesome

Brand

#ff0dff oklch(0.70 0.320 328)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ff0dff` Copy	`oklch(0.70 0.320 328)` Copy	3.11:1 AA-lg	6.75:1 AA
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.061 328)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffaefb` Copy	`oklch(0.85 0.136 328)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff7bfc` Copy	`oklch(0.78 0.219 328)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff28ff` Copy	`oklch(0.71 0.310 328)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d000d0` Copy	`oklch(0.60 0.276 328)` Copy	4.59:1 AA	4.58:1 AA
40	`#a000a0` Copy	`oklch(0.50 0.228 328)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7f007f` Copy	`oklch(0.42 0.193 328)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5f005f` Copy	`oklch(0.34 0.157 328)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3c003c` Copy	`oklch(0.25 0.115 328)` Copy	16.7:1 AAA	1.26:1 fail
05	`#280028` Copy	`oklch(0.20 0.090 328)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#fef006 oklch(0.94 0.198 105)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fef006` Copy	`oklch(0.94 0.198 105)` Copy	1.19:1 fail	17.68:1 AAA
95	`#f8f5b7` Copy	`oklch(0.96 0.079 105)` Copy	1.12:1 fail	18.7:1 AAA
90	`#eee991` Copy	`oklch(0.92 0.109 105)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d6cd4a` Copy	`oklch(0.83 0.149 105)` Copy	1.65:1 fail	12.7:1 AAA
70	`#bcb200` Copy	`oklch(0.75 0.159 105)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a19800` Copy	`oklch(0.67 0.142 105)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7f7800` Copy	`oklch(0.56 0.119 105)` Copy	4.59:1 AA	4.58:1 AA
40	`#615b00` Copy	`oklch(0.46 0.098 105)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4c4700` Copy	`oklch(0.39 0.083 105)` Copy	9.5:1 AAA	2.21:1 fail
20	`#383400` Copy	`oklch(0.32 0.068 105)` Copy	12.7:1 AAA	1.65:1 fail
10	`#211f00` Copy	`oklch(0.23 0.050 105)` Copy	16.7:1 AAA	1.26:1 fail
05	`#151300` Copy	`oklch(0.18 0.039 105)` Copy	18.7:1 AAA	1.12:1 fail

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

#2e0072 oklch(0.28 0.162 289)

Step	Hex	OKLCH	vs White	vs Black
Base	`#2e0072` Copy	`oklch(0.28 0.162 289)` Copy	15.45:1 AAA	1.36: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	`#afa3ff` Copy	`oklch(0.76 0.131 289)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9785f5` Copy	`oklch(0.68 0.160 289)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7865d1` Copy	`oklch(0.58 0.160 289)` Copy	4.59:1 AA	4.58:1 AA
40	`#5d47b0` Copy	`oklch(0.48 0.160 289)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4a3591` Copy	`oklch(0.41 0.144 289)` Copy	9.5:1 AAA	2.21:1 fail
20	`#36256e` Copy	`oklch(0.33 0.120 289)` Copy	12.7:1 AAA	1.65:1 fail
10	`#201546` Copy	`oklch(0.24 0.088 289)` Copy	16.7:1 AAA	1.26:1 fail
05	`#140c2e` Copy	`oklch(0.19 0.064 289)` Copy	18.7:1 AAA	1.12:1 fail

Success

#03fffc oklch(0.90 0.155 193)

Step	Hex	OKLCH	vs White	vs Black
Base	`#03fffc` Copy	`oklch(0.90 0.155 193)` Copy	1.26:1 fail	16.71:1 AAA
95	`#bffdfb` Copy	`oklch(0.95 0.062 193)` Copy	1.12:1 fail	18.7:1 AAA
90	`#9cf5f2` Copy	`oklch(0.91 0.085 193)` Copy	1.26:1 fail	16.7:1 AAA
80	`#56ddda` Copy	`oklch(0.82 0.116 193)` Copy	1.65:1 fail	12.7:1 AAA
70	`#00c2c0` Copy	`oklch(0.74 0.126 193)` Copy	2.21:1 fail	9.5:1 AAA
60	`#00a6a4` Copy	`oklch(0.66 0.112 193)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#008382` Copy	`oklch(0.55 0.095 193)` Copy	4.59:1 AA	4.58:1 AA
40	`#006463` Copy	`oklch(0.46 0.078 193)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004e4d` Copy	`oklch(0.38 0.066 193)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003939` Copy	`oklch(0.31 0.054 193)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002222` Copy	`oklch(0.23 0.040 193)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001615` Copy	`oklch(0.18 0.031 193)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#ff7151 oklch(0.72 0.180 34)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ff7151` Copy	`oklch(0.72 0.180 34)` Copy	2.72:1 fail	7.73:1 AAA
95	`#ffeeea` Copy	`oklch(0.96 0.019 34)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded6` Copy	`oklch(0.93 0.038 34)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8a7` Copy	`oklch(0.84 0.086 34)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff9076` Copy	`oklch(0.77 0.140 34)` Copy	2.21:1 fail	9.5:1 AAA
60	`#f66849` Copy	`oklch(0.69 0.180 34)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d04626` Copy	`oklch(0.58 0.180 34)` Copy	4.59:1 AA	4.58:1 AA
40	`#ab2600` Copy	`oklch(0.48 0.174 34)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#881c00` Copy	`oklch(0.41 0.147 34)` Copy	9.5:1 AAA	2.21:1 fail
20	`#661200` Copy	`oklch(0.33 0.120 34)` Copy	12.7:1 AAA	1.65:1 fail
10	`#410800` Copy	`oklch(0.24 0.088 34)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2c0400` Copy	`oklch(0.19 0.070 34)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ff096b oklch(0.64 0.254 9)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ff096b` Copy	`oklch(0.64 0.254 9)` Copy	3.82:1 AA-lg	5.5:1 AA
95	`#ffeef0` Copy	`oklch(0.96 0.019 9)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdde1` Copy	`oklch(0.93 0.038 9)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb6c1` Copy	`oklch(0.85 0.086 9)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8ca1` Copy	`oklch(0.77 0.141 9)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff5982` Copy	`oklch(0.70 0.202 9)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#e70060` Copy	`oklch(0.59 0.238 9)` Copy	4.59:1 AA	4.58:1 AA
40	`#b30048` Copy	`oklch(0.49 0.196 9)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8e0038` Copy	`oklch(0.41 0.166 9)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6b0028` Copy	`oklch(0.34 0.135 9)` Copy	12.7:1 AAA	1.65:1 fail
10	`#440017` Copy	`oklch(0.25 0.099 9)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2e000d` Copy	`oklch(0.19 0.078 9)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#e4116f oklch(0.60 0.234 4)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e4116f` Copy	`oklch(0.60 0.234 4)` Copy	4.56:1 AA	4.61:1 AA
95	`#ffeef1` Copy	`oklch(0.96 0.020 4)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdde4` Copy	`oklch(0.93 0.039 4)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb5c6` Copy	`oklch(0.85 0.088 4)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8baa` Copy	`oklch(0.77 0.144 4)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff578f` Copy	`oklch(0.70 0.208 4)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#e3106f` Copy	`oklch(0.59 0.234 4)` Copy	4.59:1 AA	4.58:1 AA
40	`#b10054` Copy	`oklch(0.49 0.197 4)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8d0041` Copy	`oklch(0.41 0.167 4)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6a002f` Copy	`oklch(0.34 0.136 4)` Copy	12.7:1 AAA	1.65:1 fail
10	`#43001b` Copy	`oklch(0.25 0.100 4)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2e0010` Copy	`oklch(0.19 0.078 4)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#851ecf oklch(0.50 0.242 305)

Step	Hex	OKLCH	vs White	vs Black
Base	`#851ecf` Copy	`oklch(0.50 0.242 305)` Copy	6.81:1 AA	3.08:1 AA-lg
95	`#f6efff` Copy	`oklch(0.96 0.023 305)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ede0ff` Copy	`oklch(0.93 0.044 305)` Copy	1.26:1 fail	16.7:1 AAA
80	`#dabdff` Copy	`oklch(0.84 0.096 305)` Copy	1.65:1 fail	12.7:1 AAA
70	`#c999ff` Copy	`oklch(0.77 0.149 305)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b974ff` Copy	`oklch(0.69 0.203 305)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#a045ee` Copy	`oklch(0.59 0.242 305)` Copy	4.59:1 AA	4.58:1 AA
40	`#831acd` Copy	`oklch(0.50 0.242 305)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#6a03aa` Copy	`oklch(0.42 0.218 305)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4f0081` Copy	`oklch(0.34 0.179 305)` Copy	12.7:1 AAA	1.65:1 fail
10	`#310053` Copy	`oklch(0.25 0.132 305)` Copy	16.7:1 AAA	1.26:1 fail
05	`#200237` Copy	`oklch(0.20 0.097 305)` 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.16 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

Unassigned

Unassigned

Unassigned

Unassigned

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