Look Awesome

BrandPrimary

#f08020 oklch(0.71 0.168 54)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f08020` Copy	`oklch(0.71 0.168 54)` Copy	2.69:1 fail	7.81:1 AAA
95	`#ffefe5` Copy	`oklch(0.96 0.022 54)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfcb` Copy	`oklch(0.93 0.045 54)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffba8d` Copy	`oklch(0.84 0.100 54)` Copy	1.65:1 fail	12.7:1 AAA
70	`#fb954a` Copy	`oklch(0.76 0.151 54)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e6770c` Copy	`oklch(0.68 0.168 54)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b85c00` Copy	`oklch(0.58 0.144 54)` Copy	4.59:1 AA	4.58:1 AA
40	`#8d4600` Copy	`oklch(0.47 0.119 54)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#703600` Copy	`oklch(0.40 0.100 54)` Copy	9.5:1 AAA	2.21:1 fail
20	`#532600` Copy	`oklch(0.33 0.082 54)` Copy	12.7:1 AAA	1.65:1 fail
10	`#341500` Copy	`oklch(0.24 0.060 54)` Copy	16.7:1 AAA	1.26:1 fail
05	`#230c00` Copy	`oklch(0.19 0.048 54)` Copy	18.7:1 AAA	1.12:1 fail

AccentSecondary

#5797ff oklch(0.68 0.168 260)

Step	Hex	OKLCH	vs White	vs Black
Base	`#5797ff` Copy	`oklch(0.68 0.168 260)` Copy	2.89:1 fail	7.28:1 AAA
95	`#eaf2ff` Copy	`oklch(0.96 0.019 260)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d7e6ff` Copy	`oklch(0.92 0.038 260)` Copy	1.26:1 fail	16.7:1 AAA
80	`#aacbff` Copy	`oklch(0.84 0.082 260)` Copy	1.65:1 fail	12.7:1 AAA
70	`#7eafff` Copy	`oklch(0.75 0.127 260)` Copy	2.21:1 fail	9.5:1 AAA
60	`#5494fc` Copy	`oklch(0.67 0.168 260)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#3573d7` Copy	`oklch(0.57 0.168 260)` Copy	4.59:1 AA	4.58:1 AA
40	`#1555b7` Copy	`oklch(0.47 0.168 260)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#074196` Copy	`oklch(0.40 0.151 260)` Copy	9.5:1 AAA	2.21:1 fail
20	`#022f73` Copy	`oklch(0.32 0.126 260)` Copy	12.7:1 AAA	1.65:1 fail
10	`#011b49` Copy	`oklch(0.24 0.092 260)` Copy	16.7:1 AAA	1.26:1 fail
05	`#011130` Copy	`oklch(0.19 0.067 260)` Copy	18.7:1 AAA	1.12:1 fail

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

#d9cbc2 oklch(0.85 0.020 55)

Step	Hex	OKLCH	vs White	vs Black
Base	`#d9cbc2` Copy	`oklch(0.85 0.020 55)` Copy	1.58:1 fail	13.27:1 AAA
95	`#f6f1ed` Copy	`oklch(0.96 0.008 55)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ece4df` Copy	`oklch(0.92 0.011 55)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d2c7c1` Copy	`oklch(0.84 0.015 55)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b8aca4` Copy	`oklch(0.75 0.018 55)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a0938a` Copy	`oklch(0.67 0.020 55)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#80736b` Copy	`oklch(0.56 0.020 55)` Copy	4.59:1 AA	4.58:1 AA
40	`#63574f` Copy	`oklch(0.46 0.020 55)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4e443d` Copy	`oklch(0.39 0.018 55)` Copy	9.5:1 AAA	2.21:1 fail
20	`#39312c` Copy	`oklch(0.32 0.015 55)` Copy	12.7:1 AAA	1.65:1 fail
10	`#221d19` Copy	`oklch(0.24 0.011 55)` Copy	16.7:1 AAA	1.26:1 fail
05	`#15120f` Copy	`oklch(0.18 0.008 55)` Copy	18.7:1 AAA	1.12:1 fail

Success

#71b842 oklch(0.71 0.168 135)

Step	Hex	OKLCH	vs White	vs Black
Base	`#71b842` Copy	`oklch(0.71 0.168 135)` Copy	2.43:1 fail	8.64:1 AAA
95	`#ddfbce` Copy	`oklch(0.95 0.067 135)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c8f1b3` Copy	`oklch(0.91 0.092 135)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a2d884` Copy	`oklch(0.82 0.126 135)` Copy	1.65:1 fail	12.7:1 AAA
70	`#7fbf58` Copy	`oklch(0.74 0.151 135)` Copy	2.21:1 fail	9.5:1 AAA
60	`#60a62e` Copy	`oklch(0.66 0.168 135)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#438500` Copy	`oklch(0.55 0.161 135)` Copy	4.59:1 AA	4.58:1 AA
40	`#326500` Copy	`oklch(0.45 0.133 135)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#264f00` Copy	`oklch(0.38 0.112 135)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1a3a00` Copy	`oklch(0.31 0.092 135)` Copy	12.7:1 AAA	1.65:1 fail
10	`#0d2300` Copy	`oklch(0.23 0.068 135)` Copy	16.7:1 AAA	1.26:1 fail
05	`#061600` Copy	`oklch(0.18 0.053 135)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#fe9e1b oklch(0.78 0.168 66)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fe9e1b` Copy	`oklch(0.78 0.168 66)` Copy	2.07:1 fail	10.12:1 AAA
95	`#ffefe0` Copy	`oklch(0.96 0.027 66)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe0c2` Copy	`oklch(0.92 0.053 66)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffbc76` Copy	`oklch(0.84 0.116 66)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f19b34` Copy	`oklch(0.76 0.151 66)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d58200` Copy	`oklch(0.68 0.151 66)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#a96600` Copy	`oklch(0.57 0.127 66)` Copy	4.59:1 AA	4.58:1 AA
40	`#824d00` Copy	`oklch(0.47 0.105 66)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#673c00` Copy	`oklch(0.40 0.089 66)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4c2b00` Copy	`oklch(0.32 0.072 66)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2f1900` Copy	`oklch(0.24 0.053 66)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1f0e00` Copy	`oklch(0.19 0.042 66)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ca4c29 oklch(0.58 0.168 36)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ca4c29` Copy	`oklch(0.58 0.168 36)` Copy	4.59:1 AA	4.58: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	`#ef6e4b` Copy	`oklch(0.69 0.168 36)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ca4c29` Copy	`oklch(0.58 0.168 36)` Copy	4.59:1 AA	4.58:1 AA
40	`#a72c00` Copy	`oklch(0.48 0.165 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

Primary

Secondary

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Primary

Secondary

Progress & Controls

Notifications

← Key

Key →

Brand · Primary

Brand

Accent · Secondary

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

BrandPrimary

AccentSecondary

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