Look Awesome

Brand

#ffd426 oklch(0.88 0.173 93)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ffd426` Copy	`oklch(0.88 0.173 93)` Copy	1.43:1 fail	14.7:1 AAA
95	`#fff2c4` Copy	`oklch(0.96 0.060 93)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fbe49b` Copy	`oklch(0.92 0.095 93)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e6c75d` Copy	`oklch(0.84 0.130 93)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d0ab00` Copy	`oklch(0.75 0.154 93)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b29200` Copy	`oklch(0.67 0.137 93)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8d7300` Copy	`oklch(0.56 0.116 93)` Copy	4.59:1 AA	4.58:1 AA
40	`#6b5700` Copy	`oklch(0.46 0.095 93)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#554400` Copy	`oklch(0.39 0.081 93)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3e3100` Copy	`oklch(0.32 0.066 93)` Copy	12.7:1 AAA	1.65:1 fail
10	`#261d00` Copy	`oklch(0.23 0.048 93)` Copy	16.7:1 AAA	1.26:1 fail
05	`#181200` Copy	`oklch(0.18 0.038 93)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#d1e64d oklch(0.88 0.174 117)

Step	Hex	OKLCH	vs White	vs Black
Base	`#d1e64d` Copy	`oklch(0.88 0.174 117)` Copy	1.39:1 fail	15.14:1 AAA
95	`#edf7c2` Copy	`oklch(0.96 0.070 117)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dfeca3` Copy	`oklch(0.92 0.096 117)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c1d26a` Copy	`oklch(0.83 0.130 117)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a6b82d` Copy	`oklch(0.74 0.157 117)` Copy	2.21:1 fail	9.5:1 AAA
60	`#8d9e00` Copy	`oklch(0.66 0.152 117)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#6f7c00` Copy	`oklch(0.56 0.128 117)` Copy	4.59:1 AA	4.58:1 AA
40	`#545f00` Copy	`oklch(0.46 0.106 117)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#424a00` Copy	`oklch(0.39 0.090 117)` Copy	9.5:1 AAA	2.21:1 fail
20	`#303600` Copy	`oklch(0.32 0.073 117)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1c2000` Copy	`oklch(0.23 0.054 117)` Copy	16.7:1 AAA	1.26:1 fail
05	`#111400` Copy	`oklch(0.18 0.042 117)` Copy	18.7:1 AAA	1.12:1 fail

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

#d2cebf oklch(0.85 0.021 95)

Step	Hex	OKLCH	vs White	vs Black
Base	`#d2cebf` Copy	`oklch(0.85 0.021 95)` Copy	1.58:1 fail	13.32:1 AAA
95	`#f3f2ec` Copy	`oklch(0.96 0.008 95)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e7e5dd` Copy	`oklch(0.92 0.011 95)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ccc9bf` Copy	`oklch(0.84 0.015 95)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b2aea2` Copy	`oklch(0.75 0.018 95)` Copy	2.21:1 fail	9.5:1 AAA
60	`#999587` Copy	`oklch(0.67 0.020 95)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#797568` Copy	`oklch(0.56 0.020 95)` Copy	4.59:1 AA	4.58:1 AA
40	`#5d594d` Copy	`oklch(0.46 0.020 95)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#49463b` Copy	`oklch(0.39 0.018 95)` Copy	9.5:1 AAA	2.21:1 fail
20	`#35332a` Copy	`oklch(0.32 0.015 95)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1f1e18` Copy	`oklch(0.23 0.011 95)` Copy	16.7:1 AAA	1.26:1 fail
05	`#13120e` Copy	`oklch(0.18 0.008 95)` Copy	18.7:1 AAA	1.12:1 fail

Success

#759d61 oklch(0.65 0.096 136)

Step	Hex	OKLCH	vs White	vs Black
Base	`#759d61` Copy	`oklch(0.65 0.096 136)` Copy	3.11:1 AA-lg	6.75:1 AA
95	`#e5f7dd` Copy	`oklch(0.96 0.038 136)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d5ecca` Copy	`oklch(0.92 0.053 136)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b3d2a4` Copy	`oklch(0.83 0.072 136)` Copy	1.65:1 fail	12.7:1 AAA
70	`#94b982` Copy	`oklch(0.74 0.086 136)` Copy	2.21:1 fail	9.5:1 AAA
60	`#78a064` Copy	`oklch(0.66 0.096 136)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#598045` Copy	`oklch(0.56 0.096 136)` Copy	4.59:1 AA	4.58:1 AA
40	`#3d6329` Copy	`oklch(0.46 0.096 136)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#2e4e1b` Copy	`oklch(0.38 0.086 136)` Copy	9.5:1 AAA	2.21:1 fail
20	`#203911` Copy	`oklch(0.31 0.072 136)` Copy	12.7:1 AAA	1.65:1 fail
10	`#112207` Copy	`oklch(0.23 0.053 136)` Copy	16.7:1 AAA	1.26:1 fail
05	`#091504` Copy	`oklch(0.18 0.038 136)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#dbaf70 oklch(0.78 0.096 76)

Step	Hex	OKLCH	vs White	vs Black
Base	`#dbaf70` Copy	`oklch(0.78 0.096 76)` Copy	2.02:1 fail	10.38:1 AAA
95	`#fff0db` Copy	`oklch(0.96 0.032 76)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fbe2c0` Copy	`oklch(0.92 0.052 76)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e6c496` Copy	`oklch(0.84 0.072 76)` Copy	1.65:1 fail	12.7:1 AAA
70	`#cfa870` Copy	`oklch(0.76 0.086 76)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b88e4f` Copy	`oklch(0.67 0.096 76)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#976e2e` Copy	`oklch(0.57 0.096 76)` Copy	4.59:1 AA	4.58:1 AA
40	`#795107` Copy	`oklch(0.47 0.096 76)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#603f00` Copy	`oklch(0.40 0.084 76)` Copy	9.5:1 AAA	2.21:1 fail
20	`#472e00` Copy	`oklch(0.32 0.068 76)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2c1a00` Copy	`oklch(0.24 0.050 76)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1c1000` Copy	`oklch(0.18 0.038 76)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#b67355 oklch(0.62 0.095 45)

Step	Hex	OKLCH	vs White	vs Black
Base	`#b67355` Copy	`oklch(0.62 0.095 45)` Copy	3.77:1 AA-lg	5.57:1 AA
95	`#ffefe7` Copy	`oklch(0.96 0.021 45)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfd1` Copy	`oklch(0.93 0.041 45)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f4bda5` Copy	`oklch(0.84 0.072 45)` Copy	1.65:1 fail	12.7:1 AAA
70	`#e0a084` Copy	`oklch(0.76 0.086 45)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c98466` Copy	`oklch(0.68 0.095 45)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#a76547` Copy	`oklch(0.57 0.095 45)` Copy	4.59:1 AA	4.58:1 AA
40	`#87482b` Copy	`oklch(0.47 0.095 45)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#6d371d` Copy	`oklch(0.40 0.086 45)` Copy	9.5:1 AAA	2.21:1 fail
20	`#522712` Copy	`oklch(0.33 0.072 45)` Copy	12.7:1 AAA	1.65:1 fail
10	`#331608` Copy	`oklch(0.24 0.052 45)` Copy	16.7:1 AAA	1.26:1 fail
05	`#210d05` Copy	`oklch(0.19 0.038 45)` 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.