Look Awesome

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

#a19d8a oklch(0.69 0.027 97)

Step	Hex	OKLCH	vs White	vs Black
Base	`#a19d8a` Copy	`oklch(0.69 0.027 97)` Copy	2.73:1 fail	7.71:1 AAA
95	`#f3f2ec` Copy	`oklch(0.96 0.008 97)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e7e5dd` Copy	`oklch(0.92 0.011 97)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ccc9bf` Copy	`oklch(0.84 0.015 97)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b1afa2` Copy	`oklch(0.75 0.018 97)` Copy	2.21:1 fail	9.5:1 AAA
60	`#989587` Copy	`oklch(0.67 0.020 97)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#787668` Copy	`oklch(0.56 0.020 97)` Copy	4.59:1 AA	4.58:1 AA
40	`#5c594d` Copy	`oklch(0.46 0.020 97)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#48463b` Copy	`oklch(0.39 0.018 97)` Copy	9.5:1 AAA	2.21:1 fail
20	`#35332a` Copy	`oklch(0.32 0.015 97)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1f1e18` Copy	`oklch(0.23 0.011 97)` Copy	16.7:1 AAA	1.26:1 fail
05	`#13120e` Copy	`oklch(0.18 0.008 97)` Copy	18.7:1 AAA	1.12:1 fail

China Country

#cc9994 oklch(0.73 0.062 25)

Step	Hex	OKLCH	vs White	vs Black
Base	`#cc9994` Copy	`oklch(0.73 0.062 25)` Copy	2.46:1 fail	8.55:1 AAA
95	`#ffeeec` Copy	`oklch(0.96 0.019 25)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fddedb` Copy	`oklch(0.93 0.034 25)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e8c0bc` Copy	`oklch(0.84 0.046 25)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d2a39f` Copy	`oklch(0.76 0.056 25)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bb8984` Copy	`oklch(0.68 0.062 25)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#996965` Copy	`oklch(0.57 0.062 25)` Copy	4.59:1 AA	4.58:1 AA
40	`#7a4d49` Copy	`oklch(0.47 0.062 25)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#623b38` Copy	`oklch(0.40 0.056 25)` Copy	9.5:1 AAA	2.21:1 fail
20	`#492a28` Copy	`oklch(0.32 0.046 25)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2d1817` Copy	`oklch(0.24 0.034 25)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1d0e0d` Copy	`oklch(0.19 0.025 25)` Copy	18.7:1 AAA	1.12:1 fail

Quadling

#cc6248 oklch(0.62 0.141 35)

Step	Hex	OKLCH	vs White	vs Black
Base	`#cc6248` Copy	`oklch(0.62 0.141 35)` Copy	3.88:1 AA-lg	5.41:1 AA
95	`#ffeeea` Copy	`oklch(0.96 0.019 35)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded6` Copy	`oklch(0.93 0.038 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	`#f8947b` Copy	`oklch(0.76 0.127 35)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e2765b` Copy	`oklch(0.68 0.141 35)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#be563c` Copy	`oklch(0.58 0.141 35)` Copy	4.59:1 AA	4.58:1 AA
40	`#9d371e` Copy	`oklch(0.48 0.141 35)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#802710` Copy	`oklch(0.41 0.127 35)` Copy	9.5:1 AAA	2.21:1 fail
20	`#611a08` Copy	`oklch(0.33 0.106 35)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3d0d03` Copy	`oklch(0.24 0.078 35)` Copy	16.7:1 AAA	1.26:1 fail
05	`#280802` Copy	`oklch(0.19 0.056 35)` Copy	18.7:1 AAA	1.12:1 fail

Winkie

#d0a057 oklch(0.74 0.107 76)

Step	Hex	OKLCH	vs White	vs Black
Base	`#d0a057` Copy	`oklch(0.74 0.107 76)` Copy	2.37:1 fail	8.85:1 AAA
95	`#fff0da` Copy	`oklch(0.96 0.033 76)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fde1bb` Copy	`oklch(0.92 0.059 76)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e8c48f` Copy	`oklch(0.84 0.080 76)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d3a767` Copy	`oklch(0.76 0.096 76)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bc8d43` Copy	`oklch(0.67 0.107 76)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9a6d1e` Copy	`oklch(0.57 0.107 76)` Copy	4.59:1 AA	4.58:1 AA
40	`#795100` Copy	`oklch(0.47 0.098 76)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#603f00` Copy	`oklch(0.40 0.083 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.039 76)` Copy	18.7:1 AAA	1.12:1 fail

Yellow Brick Road

#c7c168 oklch(0.80 0.112 105)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c7c168` Copy	`oklch(0.80 0.112 105)` Copy	1.87:1 fail	11.26:1 AAA
95	`#f5f4d1` Copy	`oklch(0.96 0.045 105)` Copy	1.12:1 fail	18.7:1 AAA
90	`#eae8b9` Copy	`oklch(0.92 0.062 105)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d0cc8c` Copy	`oklch(0.83 0.084 105)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b7b163` Copy	`oklch(0.75 0.101 105)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9e983e` Copy	`oklch(0.67 0.112 105)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7f7816` Copy	`oklch(0.56 0.112 105)` Copy	4.59:1 AA	4.58:1 AA
40	`#615b00` Copy	`oklch(0.46 0.098 105)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4c4700` Copy	`oklch(0.39 0.083 105)` Copy	9.5:1 AAA	2.21:1 fail
20	`#383400` Copy	`oklch(0.32 0.068 105)` Copy	12.7:1 AAA	1.65:1 fail
10	`#211f00` Copy	`oklch(0.23 0.050 105)` Copy	16.7:1 AAA	1.26:1 fail
05	`#151300` Copy	`oklch(0.18 0.039 105)` Copy	18.7:1 AAA	1.12:1 fail

Emerald City

#9fae62 oklch(0.72 0.102 118)

Step	Hex	OKLCH	vs White	vs Black
Base	`#9fae62` Copy	`oklch(0.72 0.102 118)` Copy	2.41:1 fail	8.7:1 AAA
95	`#eef5d7` Copy	`oklch(0.96 0.041 118)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e0eac0` Copy	`oklch(0.92 0.056 118)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c3cf97` Copy	`oklch(0.83 0.076 118)` Copy	1.65:1 fail	12.7:1 AAA
70	`#a7b571` Copy	`oklch(0.75 0.092 118)` Copy	2.21:1 fail	9.5:1 AAA
60	`#8d9c50` Copy	`oklch(0.66 0.102 118)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#6e7c30` Copy	`oklch(0.56 0.102 118)` Copy	4.59:1 AA	4.58:1 AA
40	`#535f0b` Copy	`oklch(0.46 0.102 118)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#404a00` Copy	`oklch(0.39 0.091 118)` Copy	9.5:1 AAA	2.21:1 fail
20	`#2f3600` Copy	`oklch(0.32 0.074 118)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1b2000` Copy	`oklch(0.23 0.054 118)` Copy	16.7:1 AAA	1.26:1 fail
05	`#101400` Copy	`oklch(0.18 0.041 118)` Copy	18.7:1 AAA	1.12:1 fail

Munchkin

#a5bbb3 oklch(0.77 0.027 172)

Step	Hex	OKLCH	vs White	vs Black
Base	`#a5bbb3` Copy	`oklch(0.77 0.027 172)` Copy	2.03:1 fail	10.36:1 AAA
95	`#ebf4f0` Copy	`oklch(0.96 0.011 172)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dce8e3` Copy	`oklch(0.92 0.015 172)` Copy	1.26:1 fail	16.7:1 AAA
80	`#bccdc7` Copy	`oklch(0.83 0.020 172)` Copy	1.65:1 fail	12.7:1 AAA
70	`#9fb3ac` Copy	`oklch(0.75 0.024 172)` Copy	2.21:1 fail	9.5:1 AAA
60	`#849a92` Copy	`oklch(0.67 0.027 172)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#657a73` Copy	`oklch(0.56 0.027 172)` Copy	4.59:1 AA	4.58:1 AA
40	`#4a5d56` Copy	`oklch(0.46 0.027 172)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#384943` Copy	`oklch(0.39 0.024 172)` Copy	9.5:1 AAA	2.21:1 fail
20	`#283631` Copy	`oklch(0.32 0.020 172)` Copy	12.7:1 AAA	1.65:1 fail
10	`#17201d` Copy	`oklch(0.23 0.015 172)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0d1411` Copy	`oklch(0.18 0.011 172)` Copy	18.7:1 AAA	1.12:1 fail

Stork and Straw

#0e1555 oklch(0.24 0.114 270)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0e1555` Copy	`oklch(0.24 0.114 270)` Copy	16.7:1 AAA	1.26:1 fail
95	`#edf2ff` Copy	`oklch(0.96 0.019 270)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dce5ff` Copy	`oklch(0.92 0.037 270)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b5c8ff` Copy	`oklch(0.84 0.080 270)` Copy	1.65:1 fail	12.7:1 AAA
70	`#96acf1` Copy	`oklch(0.76 0.103 270)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7b92dd` Copy	`oklch(0.67 0.114 270)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#5d72ba` Copy	`oklch(0.57 0.114 270)` Copy	4.59:1 AA	4.58:1 AA
40	`#42559a` Copy	`oklch(0.47 0.114 270)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#32427e` Copy	`oklch(0.40 0.103 270)` Copy	9.5:1 AAA	2.21:1 fail
20	`#23305f` Copy	`oklch(0.32 0.086 270)` Copy	12.7:1 AAA	1.65:1 fail
10	`#131c3c` Copy	`oklch(0.24 0.063 270)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0b1127` Copy	`oklch(0.18 0.046 270)` Copy	18.7:1 AAA	1.12:1 fail

Gillikin

#c9b8ca oklch(0.80 0.031 324)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c9b8ca` Copy	`oklch(0.80 0.031 324)` Copy	1.88:1 fail	11.19:1 AAA
95	`#f7f0f7` Copy	`oklch(0.96 0.012 324)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ece2ed` Copy	`oklch(0.92 0.017 324)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d2c5d3` Copy	`oklch(0.84 0.023 324)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b9aaba` Copy	`oklch(0.76 0.028 324)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a090a1` Copy	`oklch(0.67 0.031 324)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#807181` Copy	`oklch(0.57 0.031 324)` Copy	4.59:1 AA	4.58:1 AA
40	`#635464` Copy	`oklch(0.47 0.031 324)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4e424f` Copy	`oklch(0.40 0.028 324)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3a2f3a` Copy	`oklch(0.32 0.023 324)` Copy	12.7:1 AAA	1.65:1 fail
10	`#231c23` Copy	`oklch(0.24 0.017 324)` Copy	16.7:1 AAA	1.26:1 fail
05	`#151116` Copy	`oklch(0.18 0.012 324)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Neutral

Named Buttons

Kansas

Emerald City

Stork and Straw

Quadling

Munchkin

Yellow Brick Road

Winkie

China Country

Gillikin

Badges

Neutral

Named Badges

Kansas

Emerald City

Stork and Straw

Quadling

Munchkin

Yellow Brick Road

Winkie

China Country

Gillikin

← Key

Key →

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

Neutral

China Country

Unassigned

Quadling

Unassigned

Winkie

Unassigned

Yellow Brick Road

Unassigned

Emerald City

Unassigned

Munchkin

Unassigned

Stork and Straw

Unassigned

Gillikin

Unassigned

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

Neutral

China Country

Unassigned

Quadling

Unassigned

Winkie

Unassigned

Yellow Brick Road

Unassigned

Emerald City

Unassigned

Munchkin

Unassigned

Stork and Straw

Unassigned

Gillikin

Unassigned

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