Look Awesome

Brand

#0099fa oklch(0.67 0.178 248)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0099fa` Copy	`oklch(0.67 0.178 248)` Copy	3.03:1 AA-lg	6.94: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	`#60b4ff` Copy	`oklch(0.75 0.136 248)` Copy	2.21:1 fail	9.5:1 AAA
60	`#039afb` Copy	`oklch(0.67 0.178 248)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#0079c8` Copy	`oklch(0.56 0.150 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	`#00355b` 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

Accent

#ff7c34 oklch(0.73 0.179 46)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ff7c34` Copy	`oklch(0.73 0.179 46)` Copy	2.57:1 fail	8.18:1 AAA
95	`#ffefe7` Copy	`oklch(0.96 0.021 46)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfd0` Copy	`oklch(0.93 0.041 46)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffba99` Copy	`oklch(0.84 0.092 46)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff925c` Copy	`oklch(0.77 0.149 46)` Copy	2.21:1 fail	9.5:1 AAA
60	`#f06f22` Copy	`oklch(0.69 0.179 46)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#c45300` Copy	`oklch(0.58 0.163 46)` Copy	4.59:1 AA	4.58:1 AA
40	`#973e00` Copy	`oklch(0.48 0.134 46)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#782f00` Copy	`oklch(0.40 0.114 46)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5a2100` Copy	`oklch(0.33 0.093 46)` Copy	12.7:1 AAA	1.65:1 fail
10	`#381200` Copy	`oklch(0.24 0.068 46)` Copy	16.7:1 AAA	1.26:1 fail
05	`#260900` Copy	`oklch(0.19 0.054 46)` Copy	18.7:1 AAA	1.12:1 fail

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

#8f969e oklch(0.67 0.014 252)

Step	Hex	OKLCH	vs White	vs Black
Base	`#8f969e` Copy	`oklch(0.67 0.014 252)` Copy	2.99:1 fail	7.02:1 AAA
95	`#eff2f6` Copy	`oklch(0.96 0.006 252)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e2e6ea` Copy	`oklch(0.92 0.008 252)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c4cad0` Copy	`oklch(0.84 0.011 252)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a9afb7` Copy	`oklch(0.75 0.013 252)` Copy	2.21:1 fail	9.5:1 AAA
60	`#8f969e` Copy	`oklch(0.67 0.014 252)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#6f767e` Copy	`oklch(0.56 0.014 252)` Copy	4.59:1 AA	4.58:1 AA
40	`#535a61` Copy	`oklch(0.46 0.014 252)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#41464d` Copy	`oklch(0.39 0.013 252)` Copy	9.5:1 AAA	2.21:1 fail
20	`#2f3338` Copy	`oklch(0.32 0.011 252)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1b1e22` Copy	`oklch(0.23 0.008 252)` Copy	16.7:1 AAA	1.26:1 fail
05	`#101215` Copy	`oklch(0.18 0.006 252)` Copy	18.7:1 AAA	1.12:1 fail

Success

#00b575 oklch(0.68 0.156 159)

Step	Hex	OKLCH	vs White	vs Black
Base	`#00b575` Copy	`oklch(0.68 0.156 159)` Copy	2.67:1 fail	7.87:1 AAA
95	`#ccfde1` Copy	`oklch(0.95 0.062 159)` Copy	1.12:1 fail	18.7:1 AAA
90	`#b0f4ce` Copy	`oklch(0.91 0.086 159)` Copy	1.26:1 fail	16.7:1 AAA
80	`#7cdcaa` Copy	`oklch(0.82 0.117 159)` Copy	1.65:1 fail	12.7:1 AAA
70	`#47c489` Copy	`oklch(0.74 0.140 159)` Copy	2.21:1 fail	9.5:1 AAA
60	`#00aa6e` Copy	`oklch(0.65 0.149 159)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#008756` Copy	`oklch(0.55 0.126 159)` Copy	4.59:1 AA	4.58:1 AA
40	`#006740` Copy	`oklch(0.45 0.104 159)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#005132` Copy	`oklch(0.38 0.088 159)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003b23` Copy	`oklch(0.31 0.071 159)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002413` Copy	`oklch(0.23 0.053 159)` Copy	16.7:1 AAA	1.26:1 fail
05	`#00160a` Copy	`oklch(0.18 0.041 159)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#ffbe38 oklch(0.84 0.158 81)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ffbe38` Copy	`oklch(0.84 0.158 81)` Copy	1.66:1 fail	12.67:1 AAA
95	`#fff0d7` Copy	`oklch(0.96 0.037 81)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe2af` Copy	`oklch(0.92 0.073 81)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f2c26b` Copy	`oklch(0.84 0.118 81)` Copy	1.65:1 fail	12.7:1 AAA
70	`#dea52f` Copy	`oklch(0.76 0.142 81)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c28b00` Copy	`oklch(0.67 0.139 81)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9a6e00` Copy	`oklch(0.57 0.117 81)` Copy	4.59:1 AA	4.58:1 AA
40	`#765300` Copy	`oklch(0.47 0.097 81)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5d4100` Copy	`oklch(0.40 0.082 81)` Copy	9.5:1 AAA	2.21:1 fail
20	`#452f00` Copy	`oklch(0.32 0.067 81)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2a1b00` Copy	`oklch(0.24 0.049 81)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1b1000` Copy	`oklch(0.18 0.039 81)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ff584e oklch(0.68 0.204 27)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ff584e` Copy	`oklch(0.68 0.204 27)` Copy	3.11:1 AA-lg	6.76:1 AA
95	`#ffeeec` Copy	`oklch(0.96 0.019 27)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded9` Copy	`oklch(0.93 0.038 27)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8ae` Copy	`oklch(0.85 0.085 27)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8f83` Copy	`oklch(0.77 0.138 27)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff5f54` Copy	`oklch(0.69 0.198 27)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#dc3430` Copy	`oklch(0.59 0.204 27)` Copy	4.59:1 AA	4.58:1 AA
40	`#b60010` Copy	`oklch(0.49 0.199 27)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#91000a` Copy	`oklch(0.41 0.169 27)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6d0005` Copy	`oklch(0.34 0.137 27)` Copy	12.7:1 AAA	1.65:1 fail
10	`#450002` Copy	`oklch(0.25 0.101 27)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2f0001` Copy	`oklch(0.19 0.079 27)` 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.014 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

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