Look Awesome

BrandMelange

#fc550c oklch(0.67 0.214 38)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fc550c` Copy	`oklch(0.67 0.214 38)` Copy	3.26:1 AA-lg	6.44:1 AA
95	`#ffeee9` Copy	`oklch(0.96 0.020 38)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded4` Copy	`oklch(0.93 0.039 38)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb9a2` Copy	`oklch(0.84 0.088 38)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff916d` Copy	`oklch(0.77 0.143 38)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff6128` Copy	`oklch(0.69 0.204 38)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d34300` Copy	`oklch(0.58 0.190 38)` Copy	4.59:1 AA	4.58:1 AA
40	`#a33200` Copy	`oklch(0.48 0.156 38)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#812600` Copy	`oklch(0.41 0.132 38)` Copy	9.5:1 AAA	2.21:1 fail
20	`#611a00` Copy	`oklch(0.33 0.108 38)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3d0d00` Copy	`oklch(0.24 0.080 38)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2a0600` Copy	`oklch(0.19 0.063 38)` Copy	18.7:1 AAA	1.12:1 fail

AccentTurmeric

#f67300 oklch(0.70 0.186 50)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f67300` Copy	`oklch(0.70 0.186 50)` Copy	2.85:1 fail	7.37:1 AAA
95	`#ffefe6` Copy	`oklch(0.96 0.022 50)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfce` Copy	`oklch(0.93 0.042 50)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffba94` Copy	`oklch(0.84 0.095 50)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff9251` Copy	`oklch(0.77 0.154 50)` Copy	2.21:1 fail	9.5:1 AAA
60	`#f07000` Copy	`oklch(0.69 0.183 50)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#bf5700` Copy	`oklch(0.58 0.154 50)` Copy	4.59:1 AA	4.58:1 AA
40	`#924200` Copy	`oklch(0.48 0.127 50)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#743300` Copy	`oklch(0.40 0.107 50)` Copy	9.5:1 AAA	2.21:1 fail
20	`#572400` Copy	`oklch(0.33 0.088 50)` Copy	12.7:1 AAA	1.65:1 fail
10	`#361400` Copy	`oklch(0.24 0.064 50)` Copy	16.7:1 AAA	1.26:1 fail
05	`#240b00` Copy	`oklch(0.19 0.051 50)` Copy	18.7:1 AAA	1.12:1 fail

NeutralSand `0.08` Caps OKLCH Chroma (Saturation). Lower = Grayer.

#e6cc93 oklch(0.85 0.079 86)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e6cc93` Copy	`oklch(0.85 0.079 86)` Copy	1.56:1 fail	13.42:1 AAA
95	`#fbf1da` Copy	`oklch(0.96 0.032 86)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f2e4c5` Copy	`oklch(0.92 0.044 86)` Copy	1.26:1 fail	16.7:1 AAA
80	`#dbc79e` Copy	`oklch(0.84 0.059 86)` Copy	1.65:1 fail	12.7:1 AAA
70	`#c3ac7a` Copy	`oklch(0.75 0.071 86)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ab925b` Copy	`oklch(0.67 0.079 86)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8a723c` Copy	`oklch(0.56 0.079 86)` Copy	4.59:1 AA	4.58:1 AA
40	`#6d561e` Copy	`oklch(0.46 0.079 86)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#574310` Copy	`oklch(0.39 0.071 86)` Copy	9.5:1 AAA	2.21:1 fail
20	`#403007` Copy	`oklch(0.32 0.059 86)` Copy	12.7:1 AAA	1.65:1 fail
10	`#271c03` Copy	`oklch(0.24 0.044 86)` Copy	16.7:1 AAA	1.26:1 fail
05	`#191102` Copy	`oklch(0.18 0.032 86)` Copy	18.7:1 AAA	1.12:1 fail

SuccessSky

#70a4d2 oklch(0.70 0.088 246)

Step	Hex	OKLCH	vs White	vs Black
Base	`#70a4d2` Copy	`oklch(0.70 0.088 246)` Copy	2.65:1 fail	7.93:1 AAA
95	`#e7f3ff` Copy	`oklch(0.96 0.021 246)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d0e8ff` Copy	`oklch(0.92 0.041 246)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a6cef2` Copy	`oklch(0.83 0.066 246)` Copy	1.65:1 fail	12.7:1 AAA
70	`#84b3dd` Copy	`oklch(0.75 0.079 246)` Copy	2.21:1 fail	9.5:1 AAA
60	`#669ac7` Copy	`oklch(0.67 0.088 246)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#477aa5` Copy	`oklch(0.56 0.088 246)` Copy	4.59:1 AA	4.58:1 AA
40	`#2a5d87` Copy	`oklch(0.46 0.088 246)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#1c496d` Copy	`oklch(0.39 0.079 246)` Copy	9.5:1 AAA	2.21:1 fail
20	`#113552` Copy	`oklch(0.32 0.066 246)` Copy	12.7:1 AAA	1.65:1 fail
10	`#071f33` Copy	`oklch(0.23 0.048 246)` Copy	16.7:1 AAA	1.26:1 fail
05	`#041321` Copy	`oklch(0.18 0.035 246)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#f8c230 oklch(0.84 0.160 86)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f8c230` Copy	`oklch(0.84 0.160 86)` Copy	1.65:1 fail	12.75:1 AAA
95	`#fff1d0` Copy	`oklch(0.96 0.045 86)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe2a2` Copy	`oklch(0.92 0.087 86)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ecc468` Copy	`oklch(0.84 0.120 86)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d7a827` Copy	`oklch(0.75 0.144 86)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bb8e00` Copy	`oklch(0.67 0.138 86)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#947000` Copy	`oklch(0.57 0.116 86)` Copy	4.59:1 AA	4.58:1 AA
40	`#715500` Copy	`oklch(0.47 0.095 86)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#594200` Copy	`oklch(0.39 0.081 86)` Copy	9.5:1 AAA	2.21:1 fail
20	`#423000` Copy	`oklch(0.32 0.066 86)` Copy	12.7:1 AAA	1.65:1 fail
10	`#281c00` Copy	`oklch(0.24 0.048 86)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1a1100` Copy	`oklch(0.18 0.038 86)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#f0572c oklch(0.66 0.196 36)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f0572c` Copy	`oklch(0.66 0.196 36)` Copy	3.44:1 AA-lg	6.1:1 AA
95	`#ffeeea` Copy	`oklch(0.96 0.020 36)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded5` Copy	`oklch(0.93 0.039 36)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb9a5` Copy	`oklch(0.84 0.087 36)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff9072` Copy	`oklch(0.77 0.141 36)` Copy	2.21:1 fail	9.5:1 AAA
60	`#fd6339` Copy	`oklch(0.69 0.196 36)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d73e0a` Copy	`oklch(0.59 0.196 36)` Copy	4.59:1 AA	4.58:1 AA
40	`#a72c00` Copy	`oklch(0.48 0.166 36)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#852100` Copy	`oklch(0.41 0.140 36)` Copy	9.5:1 AAA	2.21:1 fail
20	`#641600` Copy	`oklch(0.33 0.114 36)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3f0a00` Copy	`oklch(0.24 0.084 36)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2b0500` Copy	`oklch(0.19 0.066 36)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Melange

Sky

Sand

Turmeric

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Melange

Sky

Sand

Turmeric

Progress & Controls

Notifications

← Key

Key →

Brand · Melange

Brand

Accent · Turmeric

Accent

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

Neutral

Success · Sky

Success

Warning

Warning

Danger

Danger

BrandMelange

AccentTurmeric

NeutralSand `0.08` Caps OKLCH Chroma (Saturation). Lower = Grayer.

SuccessSky