Look Awesome

Brand

#0aa7d9 oklch(0.68 0.132 229)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0aa7d9` Copy	`oklch(0.68 0.132 229)` Copy	2.78:1 fail	7.54:1 AAA
95	`#e0f5ff` Copy	`oklch(0.96 0.026 229)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c3ecff` Copy	`oklch(0.92 0.050 229)` Copy	1.26:1 fail	16.7:1 AAA
80	`#7ed4fb` Copy	`oklch(0.83 0.099 229)` Copy	1.65:1 fail	12.7:1 AAA
70	`#4bbae8` Copy	`oklch(0.74 0.119 229)` Copy	2.21:1 fail	9.5:1 AAA
60	`#00a1d1` Copy	`oklch(0.66 0.130 229)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#007fa6` Copy	`oklch(0.56 0.110 229)` Copy	4.59:1 AA	4.58:1 AA
40	`#00617f` Copy	`oklch(0.46 0.090 229)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004c65` Copy	`oklch(0.39 0.076 229)` Copy	9.5:1 AAA	2.21:1 fail
20	`#00374b` Copy	`oklch(0.32 0.062 229)` Copy	12.7:1 AAA	1.65:1 fail
10	`#00212e` Copy	`oklch(0.23 0.046 229)` Copy	16.7:1 AAA	1.26:1 fail
05	`#00151e` Copy	`oklch(0.18 0.036 229)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#949695 oklch(0.67 0.003 165)

Step	Hex	OKLCH	vs White	vs Black
Base	`#949695` Copy	`oklch(0.67 0.003 165)` Copy	2.98:1 fail	7.06:1 AAA
95	`#f1f2f1` Copy	`oklch(0.96 0.001 165)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e4e5e5` Copy	`oklch(0.92 0.002 165)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c8cac9` Copy	`oklch(0.84 0.002 165)` Copy	1.65:1 fail	12.7:1 AAA
70	`#adafae` Copy	`oklch(0.75 0.002 165)` Copy	2.21:1 fail	9.5:1 AAA
60	`#939594` Copy	`oklch(0.67 0.003 165)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#747675` Copy	`oklch(0.56 0.003 165)` Copy	4.59:1 AA	4.58:1 AA
40	`#585959` Copy	`oklch(0.46 0.003 165)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#444645` Copy	`oklch(0.39 0.002 165)` Copy	9.5:1 AAA	2.21:1 fail
20	`#323332` Copy	`oklch(0.32 0.002 165)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1d1e1e` Copy	`oklch(0.23 0.002 165)` Copy	16.7:1 AAA	1.26:1 fail
05	`#121212` Copy	`oklch(0.18 0.001 165)` Copy	18.7:1 AAA	1.12:1 fail

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

#494e4c oklch(0.42 0.007 170)

Step	Hex	OKLCH	vs White	vs Black
Base	`#494e4c` Copy	`oklch(0.42 0.007 170)` Copy	8.48:1 AAA	2.48:1 fail
95	`#f0f2f1` Copy	`oklch(0.96 0.003 170)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e3e6e5` Copy	`oklch(0.92 0.004 170)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c6cac8` Copy	`oklch(0.84 0.005 170)` Copy	1.65:1 fail	12.7:1 AAA
70	`#aab0ad` Copy	`oklch(0.75 0.006 170)` Copy	2.21:1 fail	9.5:1 AAA
60	`#919694` Copy	`oklch(0.67 0.007 170)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#717774` Copy	`oklch(0.56 0.007 170)` Copy	4.59:1 AA	4.58:1 AA
40	`#555a58` Copy	`oklch(0.46 0.007 170)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#424745` Copy	`oklch(0.39 0.006 170)` Copy	9.5:1 AAA	2.21:1 fail
20	`#303332` Copy	`oklch(0.32 0.005 170)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1c1e1d` Copy	`oklch(0.23 0.004 170)` Copy	16.7:1 AAA	1.26:1 fail
05	`#111312` Copy	`oklch(0.18 0.003 170)` Copy	18.7:1 AAA	1.12:1 fail

Success

#24c1c7 oklch(0.74 0.120 199)

Step	Hex	OKLCH	vs White	vs Black
Base	`#24c1c7` Copy	`oklch(0.74 0.120 199)` Copy	2.2:1 fail	9.53:1 AAA
95	`#ccfbfc` Copy	`oklch(0.96 0.048 199)` Copy	1.12:1 fail	18.7:1 AAA
90	`#aff1f3` Copy	`oklch(0.92 0.066 199)` Copy	1.26:1 fail	16.7:1 AAA
80	`#7ad8dc` Copy	`oklch(0.83 0.090 199)` Copy	1.65:1 fail	12.7:1 AAA
70	`#42bfc4` Copy	`oklch(0.74 0.108 199)` Copy	2.21:1 fail	9.5:1 AAA
60	`#00a5ab` 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	`#001517` Copy	`oklch(0.18 0.031 199)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#e7b646 oklch(0.80 0.138 85)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e7b646` Copy	`oklch(0.80 0.138 85)` Copy	1.88:1 fail	11.18:1 AAA
95	`#fff0d3` Copy	`oklch(0.96 0.042 85)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fde2ac` Copy	`oklch(0.92 0.076 85)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e9c579` Copy	`oklch(0.84 0.104 85)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d4a847` Copy	`oklch(0.75 0.124 85)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bd8d00` Copy	`oklch(0.67 0.138 85)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#966f00` Copy	`oklch(0.57 0.116 85)` Copy	4.59:1 AA	4.58:1 AA
40	`#725400` Copy	`oklch(0.47 0.096 85)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5a4200` Copy	`oklch(0.39 0.081 85)` Copy	9.5:1 AAA	2.21:1 fail
20	`#433000` Copy	`oklch(0.32 0.066 85)` Copy	12.7:1 AAA	1.65:1 fail
10	`#291c00` Copy	`oklch(0.24 0.049 85)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1a1100` Copy	`oklch(0.18 0.038 85)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#e86560 oklch(0.67 0.164 25)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e86560` Copy	`oklch(0.67 0.164 25)` Copy	3.25:1 AA-lg	6.46:1 AA
95	`#ffeeec` Copy	`oklch(0.96 0.019 25)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdeda` Copy	`oklch(0.93 0.038 25)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb7b1` Copy	`oklch(0.85 0.084 25)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8e87` Copy	`oklch(0.77 0.138 25)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ef6c66` Copy	`oklch(0.69 0.164 25)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ca4a47` Copy	`oklch(0.58 0.164 25)` Copy	4.59:1 AA	4.58:1 AA
40	`#a8282b` Copy	`oklch(0.48 0.164 25)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#89181d` Copy	`oklch(0.41 0.148 25)` Copy	9.5:1 AAA	2.21:1 fail
20	`#680d12` Copy	`oklch(0.34 0.123 25)` Copy	12.7:1 AAA	1.65:1 fail
10	`#420508` Copy	`oklch(0.24 0.090 25)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2b0405` Copy	`oklch(0.19 0.066 25)` 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 →

← Key

Key →

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

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