Look Awesome

Brand

#4990c6 oklch(0.63 0.109 244)

Step	Hex	OKLCH	vs White	vs Black
Base	`#4990c6` Copy	`oklch(0.63 0.109 244)` Copy	3.45:1 AA-lg	6.09:1 AA
95	`#e6f4ff` Copy	`oklch(0.96 0.021 244)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cee9ff` Copy	`oklch(0.92 0.042 244)` Copy	1.26:1 fail	16.7:1 AAA
80	`#9bcffa` Copy	`oklch(0.83 0.081 244)` Copy	1.65:1 fail	12.7:1 AAA
70	`#76b5e7` Copy	`oklch(0.75 0.098 244)` Copy	2.21:1 fail	9.5:1 AAA
60	`#549bd2` Copy	`oklch(0.67 0.108 244)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#337baf` Copy	`oklch(0.56 0.108 244)` Copy	4.59:1 AA	4.58:1 AA
40	`#0c5d90` Copy	`oklch(0.46 0.108 244)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004974` Copy	`oklch(0.39 0.096 244)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003557` Copy	`oklch(0.32 0.078 244)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002036` Copy	`oklch(0.23 0.058 244)` Copy	16.7:1 AAA	1.26:1 fail
05	`#011424` Copy	`oklch(0.18 0.043 244)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#808b7c oklch(0.62 0.026 137)

Step	Hex	OKLCH	vs White	vs Black
Base	`#808b7c` Copy	`oklch(0.62 0.026 137)` Copy	3.56:1 AA-lg	5.9:1 AA
95	`#eef3ec` Copy	`oklch(0.96 0.010 137)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e1e7de` Copy	`oklch(0.92 0.014 137)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c3ccc0` Copy	`oklch(0.83 0.019 137)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a7b1a3` Copy	`oklch(0.75 0.023 137)` Copy	2.21:1 fail	9.5:1 AAA
60	`#8d9889` Copy	`oklch(0.67 0.026 137)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#6e796a` Copy	`oklch(0.56 0.026 137)` Copy	4.59:1 AA	4.58:1 AA
40	`#525c4e` Copy	`oklch(0.46 0.026 137)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#3f483c` Copy	`oklch(0.39 0.023 137)` Copy	9.5:1 AAA	2.21:1 fail
20	`#2e352b` Copy	`oklch(0.32 0.019 137)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1a1f19` Copy	`oklch(0.23 0.014 137)` Copy	16.7:1 AAA	1.26:1 fail
05	`#10130f` Copy	`oklch(0.18 0.010 137)` Copy	18.7:1 AAA	1.12:1 fail

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

#eaebcc oklch(0.93 0.041 109)

Step	Hex	OKLCH	vs White	vs Black
Base	`#eaebcc` Copy	`oklch(0.93 0.041 109)` Copy	1.22:1 fail	17.25:1 AAA
95	`#f2f3e6` Copy	`oklch(0.96 0.016 109)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e6e6d6` Copy	`oklch(0.92 0.022 109)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cacbb4` Copy	`oklch(0.84 0.031 109)` Copy	1.65:1 fail	12.7:1 AAA
70	`#afb096` Copy	`oklch(0.75 0.037 109)` Copy	2.21:1 fail	9.5:1 AAA
60	`#96977a` Copy	`oklch(0.67 0.041 109)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#77775b` Copy	`oklch(0.56 0.041 109)` Copy	4.59:1 AA	4.58:1 AA
40	`#5a5b40` Copy	`oklch(0.46 0.041 109)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#474730` Copy	`oklch(0.39 0.037 109)` Copy	9.5:1 AAA	2.21:1 fail
20	`#343421` Copy	`oklch(0.32 0.031 109)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1e1f12` Copy	`oklch(0.23 0.022 109)` Copy	16.7:1 AAA	1.26:1 fail
05	`#13130a` Copy	`oklch(0.18 0.016 109)` Copy	18.7:1 AAA	1.12:1 fail

Success

#54aa84 oklch(0.67 0.102 163)

Step	Hex	OKLCH	vs White	vs Black
Base	`#54aa84` Copy	`oklch(0.67 0.102 163)` Copy	2.81:1 fail	7.46:1 AAA
95	`#d9f9e8` Copy	`oklch(0.96 0.041 163)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c2efd8` Copy	`oklch(0.92 0.056 163)` Copy	1.26:1 fail	16.7:1 AAA
80	`#99d6b8` Copy	`oklch(0.83 0.076 163)` Copy	1.65:1 fail	12.7:1 AAA
70	`#72bd9a` Copy	`oklch(0.74 0.092 163)` Copy	2.21:1 fail	9.5:1 AAA
60	`#4fa57f` Copy	`oklch(0.66 0.102 163)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#2a8460` Copy	`oklch(0.55 0.102 163)` Copy	4.59:1 AA	4.58:1 AA
40	`#006646` Copy	`oklch(0.45 0.098 163)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#005036` Copy	`oklch(0.38 0.083 163)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003b26` Copy	`oklch(0.31 0.068 163)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002316` Copy	`oklch(0.23 0.050 163)` Copy	16.7:1 AAA	1.26:1 fail
05	`#00160c` Copy	`oklch(0.18 0.039 163)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#f79031 oklch(0.75 0.161 58)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f79031` Copy	`oklch(0.75 0.161 58)` Copy	2.34:1 fail	8.99:1 AAA
95	`#ffefe3` Copy	`oklch(0.96 0.024 58)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe0c8` Copy	`oklch(0.93 0.047 58)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffbb87` Copy	`oklch(0.84 0.104 58)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f5984a` Copy	`oklch(0.76 0.145 58)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e07b0a` Copy	`oklch(0.68 0.161 58)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b36000` Copy	`oklch(0.57 0.137 58)` Copy	4.59:1 AA	4.58:1 AA
40	`#894800` Copy	`oklch(0.47 0.113 58)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#6d3800` Copy	`oklch(0.40 0.096 58)` Copy	9.5:1 AAA	2.21:1 fail
20	`#512800` Copy	`oklch(0.33 0.078 58)` Copy	12.7:1 AAA	1.65:1 fail
10	`#321700` Copy	`oklch(0.24 0.058 58)` Copy	16.7:1 AAA	1.26:1 fail
05	`#220d00` Copy	`oklch(0.19 0.045 58)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#e15f61 oklch(0.65 0.163 22)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e15f61` Copy	`oklch(0.65 0.163 22)` Copy	3.49:1 AA-lg	6.01:1 AA
95	`#ffeeed` Copy	`oklch(0.96 0.019 22)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdedc` Copy	`oklch(0.93 0.037 22)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb7b4` Copy	`oklch(0.85 0.084 22)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8e8c` Copy	`oklch(0.77 0.137 22)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ef6b6c` Copy	`oklch(0.69 0.163 22)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ca4a4e` Copy	`oklch(0.58 0.163 22)` Copy	4.59:1 AA	4.58:1 AA
40	`#a72832` Copy	`oklch(0.48 0.163 22)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#891824` Copy	`oklch(0.41 0.146 22)` Copy	9.5:1 AAA	2.21:1 fail
20	`#670d18` Copy	`oklch(0.34 0.122 22)` Copy	12.7:1 AAA	1.65:1 fail
10	`#42050b` Copy	`oklch(0.24 0.090 22)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2b0406` Copy	`oklch(0.19 0.065 22)` 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.041 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

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