Look Awesome

Brand

#0e8080 oklch(0.54 0.090 195)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0e8080` Copy	`oklch(0.54 0.090 195)` Copy	4.75:1 AA	4.42:1 AA-lg
95	`#d6f9f8` Copy	`oklch(0.96 0.036 195)` Copy	1.12:1 fail	18.7:1 AAA
90	`#beeeed` Copy	`oklch(0.92 0.050 195)` Copy	1.26:1 fail	16.7:1 AAA
80	`#92d5d4` Copy	`oklch(0.83 0.068 195)` Copy	1.65:1 fail	12.7:1 AAA
70	`#69bcbb` Copy	`oklch(0.74 0.081 195)` Copy	2.21:1 fail	9.5:1 AAA
60	`#41a3a3` Copy	`oklch(0.66 0.090 195)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#148383` Copy	`oklch(0.55 0.090 195)` Copy	4.59:1 AA	4.58:1 AA
40	`#006464` Copy	`oklch(0.46 0.078 195)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004e4e` Copy	`oklch(0.38 0.066 195)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003939` Copy	`oklch(0.31 0.054 195)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002222` Copy	`oklch(0.23 0.040 195)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001616` Copy	`oklch(0.18 0.031 195)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#5b6da5 oklch(0.54 0.090 270)

Step	Hex	OKLCH	vs White	vs Black
Base	`#5b6da5` Copy	`oklch(0.54 0.090 270)` Copy	5.03:1 AA	4.18:1 AA-lg
95	`#edf2ff` Copy	`oklch(0.96 0.019 270)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dce5ff` Copy	`oklch(0.92 0.037 270)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b8c9f7` Copy	`oklch(0.84 0.068 270)` Copy	1.65:1 fail	12.7:1 AAA
70	`#9bade4` Copy	`oklch(0.75 0.082 270)` Copy	2.21:1 fail	9.5:1 AAA
60	`#8093ce` Copy	`oklch(0.67 0.090 270)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#6173ac` Copy	`oklch(0.57 0.090 270)` Copy	4.59:1 AA	4.58:1 AA
40	`#46578d` Copy	`oklch(0.47 0.090 270)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#354372` Copy	`oklch(0.40 0.082 270)` Copy	9.5:1 AAA	2.21:1 fail
20	`#263156` Copy	`oklch(0.32 0.068 270)` Copy	12.7:1 AAA	1.65:1 fail
10	`#151d36` Copy	`oklch(0.24 0.050 270)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0c1123` Copy	`oklch(0.18 0.036 270)` Copy	18.7:1 AAA	1.12:1 fail

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

#c0d2d2 oklch(0.85 0.019 197)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c0d2d2` Copy	`oklch(0.85 0.019 197)` Copy	1.57:1 fail	13.39:1 AAA
95	`#ecf3f3` Copy	`oklch(0.96 0.008 197)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dde7e7` Copy	`oklch(0.92 0.011 197)` Copy	1.26:1 fail	16.7:1 AAA
80	`#bfcccc` Copy	`oklch(0.84 0.015 197)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a2b2b2` Copy	`oklch(0.75 0.018 197)` Copy	2.21:1 fail	9.5:1 AAA
60	`#879898` Copy	`oklch(0.67 0.020 197)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#687979` Copy	`oklch(0.56 0.020 197)` Copy	4.59:1 AA	4.58:1 AA
40	`#4c5c5c` Copy	`oklch(0.46 0.020 197)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#3b4848` Copy	`oklch(0.39 0.018 197)` Copy	9.5:1 AAA	2.21:1 fail
20	`#2a3535` Copy	`oklch(0.32 0.015 197)` Copy	12.7:1 AAA	1.65:1 fail
10	`#181f1f` Copy	`oklch(0.23 0.011 197)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0e1313` Copy	`oklch(0.18 0.008 197)` Copy	18.7:1 AAA	1.12:1 fail

Success

#619f7f oklch(0.65 0.081 161)

Step	Hex	OKLCH	vs White	vs Black
Base	`#619f7f` Copy	`oklch(0.65 0.081 161)` Copy	3.1:1 AA-lg	6.77:1 AA
95	`#dff8e9` Copy	`oklch(0.96 0.032 161)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cbedda` Copy	`oklch(0.92 0.044 161)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a5d4ba` Copy	`oklch(0.83 0.061 161)` Copy	1.65:1 fail	12.7:1 AAA
70	`#83ba9c` Copy	`oklch(0.74 0.073 161)` Copy	2.21:1 fail	9.5:1 AAA
60	`#64a282` Copy	`oklch(0.66 0.081 161)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#448163` Copy	`oklch(0.55 0.081 161)` Copy	4.59:1 AA	4.58:1 AA
40	`#256447` Copy	`oklch(0.45 0.081 161)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#174f36` Copy	`oklch(0.38 0.073 161)` Copy	9.5:1 AAA	2.21:1 fail
20	`#0d3a26` Copy	`oklch(0.31 0.061 161)` Copy	12.7:1 AAA	1.65:1 fail
10	`#052316` Copy	`oklch(0.23 0.044 161)` Copy	16.7:1 AAA	1.26:1 fail
05	`#04160d` Copy	`oklch(0.18 0.032 161)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#e1af36 oklch(0.78 0.143 85)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e1af36` Copy	`oklch(0.78 0.143 85)` Copy	2.02:1 fail	10.39:1 AAA
95	`#fff0d2` Copy	`oklch(0.96 0.042 85)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fee2aa` Copy	`oklch(0.92 0.079 85)` Copy	1.26:1 fail	16.7:1 AAA
80	`#eac575` Copy	`oklch(0.84 0.107 85)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d4a842` Copy	`oklch(0.75 0.128 85)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bd8e00` Copy	`oklch(0.67 0.138 85)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#957000` 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	`#423000` 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

#af775d oklch(0.62 0.080 46)

Step	Hex	OKLCH	vs White	vs Black
Base	`#af775d` Copy	`oklch(0.62 0.080 46)` Copy	3.74:1 AA-lg	5.62:1 AA
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	`#edc0ab` Copy	`oklch(0.84 0.060 46)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d8a38a` Copy	`oklch(0.76 0.072 46)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c1886d` Copy	`oklch(0.68 0.080 46)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9f684f` Copy	`oklch(0.57 0.080 46)` Copy	4.59:1 AA	4.58:1 AA
40	`#804c33` Copy	`oklch(0.47 0.080 46)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#673a24` Copy	`oklch(0.40 0.072 46)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4d2918` Copy	`oklch(0.32 0.060 46)` Copy	12.7:1 AAA	1.65:1 fail
10	`#30180c` Copy	`oklch(0.24 0.044 46)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1f0e07` Copy	`oklch(0.19 0.032 46)` 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

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