Look Awesome

Brand

#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

Accent

#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

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.