Look Awesome

Brand

#e64484 oklch(0.64 0.204 1)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e64484` Copy	`oklch(0.64 0.204 1)` Copy	3.8:1 AA-lg	5.52:1 AA
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	`#ffb5ca` Copy	`oklch(0.85 0.090 1)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8aaf` Copy	`oklch(0.77 0.147 1)` Copy	2.21:1 fail	9.5:1 AAA
60	`#fc5996` Copy	`oklch(0.70 0.204 1)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d63377` Copy	`oklch(0.59 0.204 1)` Copy	4.59:1 AA	4.58:1 AA
40	`#b0005a` Copy	`oklch(0.49 0.198 1)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8c0046` Copy	`oklch(0.42 0.168 1)` Copy	9.5:1 AAA	2.21:1 fail
20	`#690033` Copy	`oklch(0.34 0.137 1)` Copy	12.7:1 AAA	1.65:1 fail
10	`#43001e` Copy	`oklch(0.25 0.101 1)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2e0012` Copy	`oklch(0.19 0.079 1)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#d77f39 oklch(0.68 0.137 56)

Step	Hex	OKLCH	vs White	vs Black
Base	`#d77f39` Copy	`oklch(0.68 0.137 56)` Copy	3.01:1 AA-lg	6.98:1 AA
95	`#ffefe4` Copy	`oklch(0.96 0.023 56)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfca` Copy	`oklch(0.93 0.045 56)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffbb8b` Copy	`oklch(0.84 0.101 56)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ed9c60` Copy	`oklch(0.76 0.123 56)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d77f39` Copy	`oklch(0.68 0.137 56)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b45f0c` Copy	`oklch(0.58 0.137 56)` Copy	4.59:1 AA	4.58:1 AA
40	`#8b4700` Copy	`oklch(0.47 0.116 56)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#6e3700` Copy	`oklch(0.40 0.098 56)` Copy	9.5:1 AAA	2.21:1 fail
20	`#522700` Copy	`oklch(0.33 0.080 56)` Copy	12.7:1 AAA	1.65:1 fail
10	`#331600` Copy	`oklch(0.24 0.059 56)` Copy	16.7:1 AAA	1.26:1 fail
05	`#220c00` Copy	`oklch(0.19 0.047 56)` Copy	18.7:1 AAA	1.12:1 fail

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

#345258 oklch(0.42 0.037 212)

Step	Hex	OKLCH	vs White	vs Black
Base	`#345258` Copy	`oklch(0.42 0.037 212)` Copy	8.42:1 AAA	2.49:1 fail
95	`#ecf3f5` Copy	`oklch(0.96 0.008 212)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dde7e9` Copy	`oklch(0.92 0.011 212)` Copy	1.26:1 fail	16.7:1 AAA
80	`#beccce` Copy	`oklch(0.84 0.015 212)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a2b1b4` Copy	`oklch(0.75 0.018 212)` Copy	2.21:1 fail	9.5:1 AAA
60	`#87989c` Copy	`oklch(0.67 0.020 212)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#68787c` Copy	`oklch(0.56 0.020 212)` Copy	4.59:1 AA	4.58:1 AA
40	`#4c5c5f` Copy	`oklch(0.46 0.020 212)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#3a484b` Copy	`oklch(0.39 0.018 212)` Copy	9.5:1 AAA	2.21:1 fail
20	`#2a3537` Copy	`oklch(0.32 0.015 212)` Copy	12.7:1 AAA	1.65:1 fail
10	`#181f21` Copy	`oklch(0.23 0.011 212)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0e1314` Copy	`oklch(0.18 0.008 212)` Copy	18.7:1 AAA	1.12:1 fail

Success

#5fe7ec oklch(0.86 0.117 199)

Step	Hex	OKLCH	vs White	vs Black
Base	`#5fe7ec` Copy	`oklch(0.86 0.117 199)` Copy	1.49:1 fail	14.13:1 AAA
95	`#ccfafc` Copy	`oklch(0.96 0.047 199)` Copy	1.12:1 fail	18.7:1 AAA
90	`#b0f1f3` Copy	`oklch(0.92 0.065 199)` Copy	1.26:1 fail	16.7:1 AAA
80	`#7cd8db` Copy	`oklch(0.83 0.088 199)` Copy	1.65:1 fail	12.7:1 AAA
70	`#46bfc3` Copy	`oklch(0.74 0.106 199)` Copy	2.21:1 fail	9.5:1 AAA
60	`#00a5aa` Copy	`oklch(0.66 0.112 199)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#008387` Copy	`oklch(0.55 0.094 199)` Copy	4.59:1 AA	4.58:1 AA
40	`#006467` Copy	`oklch(0.46 0.078 199)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004e51` Copy	`oklch(0.38 0.066 199)` Copy	9.5:1 AAA	2.21:1 fail
20	`#00393b` Copy	`oklch(0.31 0.054 199)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002224` Copy	`oklch(0.23 0.039 199)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001617` Copy	`oklch(0.18 0.031 199)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#efc066 oklch(0.83 0.121 82)

Step	Hex	OKLCH	vs White	vs Black
Base	`#efc066` Copy	`oklch(0.83 0.121 82)` Copy	1.69:1 fail	12.4:1 AAA
95	`#fff0d5` Copy	`oklch(0.96 0.039 82)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fce2b4` Copy	`oklch(0.92 0.066 82)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e7c585` Copy	`oklch(0.84 0.091 82)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d2a859` Copy	`oklch(0.75 0.109 82)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bb8e2f` Copy	`oklch(0.67 0.121 82)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#986e00` Copy	`oklch(0.57 0.117 82)` Copy	4.59:1 AA	4.58:1 AA
40	`#745300` Copy	`oklch(0.47 0.096 82)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5c4100` Copy	`oklch(0.40 0.082 82)` Copy	9.5:1 AAA	2.21:1 fail
20	`#442f00` Copy	`oklch(0.32 0.066 82)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2a1b00` Copy	`oklch(0.24 0.049 82)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1b1000` Copy	`oklch(0.18 0.039 82)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ea5da1 oklch(0.68 0.187 353)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ea5da1` Copy	`oklch(0.68 0.187 353)` Copy	3.19:1 AA-lg	6.58:1 AA
95	`#ffedf4` Copy	`oklch(0.96 0.021 353)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdce9` Copy	`oklch(0.93 0.042 353)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb4d2` Copy	`oklch(0.85 0.095 353)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff88bd` Copy	`oklch(0.77 0.156 353)` Copy	2.21:1 fail	9.5:1 AAA
60	`#f062a6` Copy	`oklch(0.69 0.187 353)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ca3f86` Copy	`oklch(0.59 0.187 353)` Copy	4.59:1 AA	4.58:1 AA
40	`#a81969` Copy	`oklch(0.49 0.187 353)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#890553` Copy	`oklch(0.42 0.168 353)` Copy	9.5:1 AAA	2.21:1 fail
20	`#68003d` Copy	`oklch(0.34 0.140 353)` Copy	12.7:1 AAA	1.65:1 fail
10	`#420025` Copy	`oklch(0.25 0.103 353)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2b0217` Copy	`oklch(0.19 0.075 353)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#b83061 oklch(0.53 0.175 4)

Step	Hex	OKLCH	vs White	vs Black
Base	`#b83061` Copy	`oklch(0.53 0.175 4)` Copy	5.78:1 AA	3.63:1 AA-lg
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	`#ffb5c7` 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	`#f16590` Copy	`oklch(0.69 0.175 4)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#cb4371` Copy	`oklch(0.59 0.175 4)` Copy	4.59:1 AA	4.58:1 AA
40	`#a91f55` Copy	`oklch(0.49 0.175 4)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8a0d42` Copy	`oklch(0.41 0.158 4)` Copy	9.5:1 AAA	2.21:1 fail
20	`#680430` Copy	`oklch(0.34 0.131 4)` Copy	12.7:1 AAA	1.65:1 fail
10	`#42021c` Copy	`oklch(0.25 0.096 4)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2b0211` Copy	`oklch(0.19 0.070 4)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#3b87c9 oklch(0.61 0.125 248)

Step	Hex	OKLCH	vs White	vs Black
Base	`#3b87c9` Copy	`oklch(0.61 0.125 248)` Copy	3.82:1 AA-lg	5.49:1 AA
95	`#e7f3ff` Copy	`oklch(0.96 0.021 248)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d1e8ff` Copy	`oklch(0.92 0.040 248)` Copy	1.26:1 fail	16.7:1 AAA
80	`#9bceff` Copy	`oklch(0.83 0.087 248)` Copy	1.65:1 fail	12.7:1 AAA
70	`#71b4f2` Copy	`oklch(0.75 0.113 248)` Copy	2.21:1 fail	9.5:1 AAA
60	`#4f9add` Copy	`oklch(0.67 0.125 248)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#2c79bb` Copy	`oklch(0.56 0.125 248)` Copy	4.59:1 AA	4.58:1 AA
40	`#005c9a` Copy	`oklch(0.46 0.124 248)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#00487a` Copy	`oklch(0.39 0.105 248)` Copy	9.5:1 AAA	2.21:1 fail
20	`#00355c` Copy	`oklch(0.32 0.086 248)` Copy	12.7:1 AAA	1.65:1 fail
10	`#001f3a` Copy	`oklch(0.23 0.063 248)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001327` Copy	`oklch(0.18 0.050 248)` 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.02 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

Unassigned

Unassigned

Unassigned

Unassigned

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