Look Awesome

Brand

#f4a261 oklch(0.78 0.127 58)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f4a261` Copy	`oklch(0.78 0.127 58)` Copy	2.06:1 fail	10.19:1 AAA
95	`#ffefe3` Copy	`oklch(0.96 0.024 58)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfc9` Copy	`oklch(0.93 0.047 58)` Copy	1.26:1 fail	16.7:1 AAA
80	`#fbbc8d` Copy	`oklch(0.84 0.095 58)` Copy	1.65:1 fail	12.7:1 AAA
70	`#e79e65` Copy	`oklch(0.76 0.114 58)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d18240` Copy	`oklch(0.68 0.127 58)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#af621a` Copy	`oklch(0.57 0.127 58)` Copy	4.59:1 AA	4.58:1 AA
40	`#894800` Copy	`oklch(0.47 0.114 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	`#331700` Copy	`oklch(0.24 0.058 58)` Copy	16.7:1 AAA	1.26:1 fail
05	`#220d00` Copy	`oklch(0.19 0.046 58)` Copy	18.7:1 AAA	1.12:1 fail

#264653 oklch(0.38 0.044 226)

Step	Hex	OKLCH	vs White	vs Black
Base	`#264653` Copy	`oklch(0.38 0.044 226)` Copy	10.08:1 AAA	2.08:1 fail
95	`#e6f4fb` Copy	`oklch(0.96 0.018 226)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d5e9f1` Copy	`oklch(0.92 0.024 226)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b3cdd9` Copy	`oklch(0.83 0.033 226)` Copy	1.65:1 fail	12.7:1 AAA
70	`#94b3c1` Copy	`oklch(0.75 0.039 226)` Copy	2.21:1 fail	9.5:1 AAA
60	`#789aa9` Copy	`oklch(0.67 0.044 226)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#597a88` Copy	`oklch(0.56 0.044 226)` Copy	4.59:1 AA	4.58:1 AA
40	`#3d5e6b` Copy	`oklch(0.46 0.044 226)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#2d4955` Copy	`oklch(0.39 0.039 226)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1f363f` Copy	`oklch(0.32 0.033 226)` Copy	12.7:1 AAA	1.65:1 fail
10	`#112026` Copy	`oklch(0.23 0.024 226)` Copy	16.7:1 AAA	1.26:1 fail
05	`#091418` Copy	`oklch(0.18 0.018 226)` Copy	18.7:1 AAA	1.12:1 fail

#2a9d8f oklch(0.63 0.101 183)

Step	Hex	OKLCH	vs White	vs Black
Base	`#2a9d8f` Copy	`oklch(0.63 0.101 183)` Copy	3.32:1 AA-lg	6.32:1 AA
95	`#d3faf3` Copy	`oklch(0.96 0.040 183)` Copy	1.12:1 fail	18.7:1 AAA
90	`#bbf0e6` Copy	`oklch(0.92 0.056 183)` Copy	1.26:1 fail	16.7:1 AAA
80	`#8dd7cb` Copy	`oklch(0.83 0.076 183)` Copy	1.65:1 fail	12.7:1 AAA
70	`#61beb0` Copy	`oklch(0.74 0.091 183)` Copy	2.21:1 fail	9.5:1 AAA
60	`#35a597` Copy	`oklch(0.66 0.101 183)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#008477` Copy	`oklch(0.55 0.098 183)` Copy	4.59:1 AA	4.58:1 AA
40	`#00655b` Copy	`oklch(0.45 0.081 183)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004f47` Copy	`oklch(0.38 0.068 183)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003a34` Copy	`oklch(0.31 0.056 183)` Copy	12.7:1 AAA	1.65:1 fail
10	`#00231e` Copy	`oklch(0.23 0.041 183)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001613` Copy	`oklch(0.18 0.032 183)` Copy	18.7:1 AAA	1.12:1 fail

#e9c46a oklch(0.83 0.117 87)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e9c46a` Copy	`oklch(0.83 0.117 87)` Copy	1.67:1 fail	12.57:1 AAA
95	`#fff1cf` Copy	`oklch(0.96 0.047 87)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f8e4b5` Copy	`oklch(0.92 0.064 87)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e2c786` Copy	`oklch(0.84 0.088 87)` Copy	1.65:1 fail	12.7:1 AAA
70	`#cbab5c` Copy	`oklch(0.75 0.105 87)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b49033` Copy	`oklch(0.67 0.117 87)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#937100` Copy	`oklch(0.56 0.116 87)` Copy	4.59:1 AA	4.58:1 AA
40	`#705500` Copy	`oklch(0.47 0.095 87)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#584300` Copy	`oklch(0.39 0.081 87)` Copy	9.5:1 AAA	2.21:1 fail
20	`#413000` Copy	`oklch(0.32 0.066 87)` Copy	12.7:1 AAA	1.65:1 fail
10	`#281c00` Copy	`oklch(0.24 0.048 87)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1a1100` Copy	`oklch(0.18 0.038 87)` Copy	18.7:1 AAA	1.12:1 fail

#e76f51 oklch(0.68 0.156 35)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e76f51` Copy	`oklch(0.68 0.156 35)` Copy	3.09:1 AA-lg	6.79:1 AA
95	`#ffeeea` Copy	`oklch(0.96 0.020 35)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded6` Copy	`oklch(0.93 0.039 35)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8a6` Copy	`oklch(0.84 0.087 35)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff9074` Copy	`oklch(0.77 0.140 35)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ea7153` Copy	`oklch(0.69 0.156 35)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#c55033` Copy	`oklch(0.58 0.156 35)` Copy	4.59:1 AA	4.58:1 AA
40	`#a33011` Copy	`oklch(0.48 0.156 35)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#852002` Copy	`oklch(0.41 0.140 35)` Copy	9.5:1 AAA	2.21:1 fail
20	`#651500` Copy	`oklch(0.33 0.117 35)` Copy	12.7:1 AAA	1.65:1 fail
10	`#400900` Copy	`oklch(0.24 0.086 35)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2a0601` Copy	`oklch(0.19 0.062 35)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Neutral

Success

Warning

Danger

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Neutral

Success

Warning

Danger

Progress & Controls

Notifications

← Key

Key →