Look Awesome

Brand

#fff043 oklch(0.94 0.180 104)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fff043` Copy	`oklch(0.94 0.180 104)` Copy	1.18:1 fail	17.8:1 AAA
95	`#f8f4bc` Copy	`oklch(0.96 0.072 104)` Copy	1.12:1 fail	18.7:1 AAA
90	`#efe89a` Copy	`oklch(0.92 0.099 104)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d6cc5b` Copy	`oklch(0.83 0.135 104)` Copy	1.65:1 fail	12.7:1 AAA
70	`#beb100` Copy	`oklch(0.75 0.158 104)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a39700` Copy	`oklch(0.67 0.141 104)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#807700` Copy	`oklch(0.56 0.119 104)` Copy	4.59:1 AA	4.58:1 AA
40	`#625b00` Copy	`oklch(0.46 0.098 104)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4d4700` Copy	`oklch(0.39 0.083 104)` Copy	9.5:1 AAA	2.21:1 fail
20	`#383400` Copy	`oklch(0.32 0.068 104)` Copy	12.7:1 AAA	1.65:1 fail
10	`#221f00` Copy	`oklch(0.23 0.050 104)` Copy	16.7:1 AAA	1.26:1 fail
05	`#151300` Copy	`oklch(0.18 0.039 104)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#5c337f oklch(0.41 0.127 307)

Step	Hex	OKLCH	vs White	vs Black
Base	`#5c337f` Copy	`oklch(0.41 0.127 307)` Copy	9.4:1 AAA	2.24:1 fail
95	`#f6efff` Copy	`oklch(0.96 0.023 307)` Copy	1.12:1 fail	18.7:1 AAA
90	`#eee0ff` Copy	`oklch(0.93 0.045 307)` Copy	1.26:1 fail	16.7:1 AAA
80	`#dcbcfe` Copy	`oklch(0.84 0.095 307)` Copy	1.65:1 fail	12.7:1 AAA
70	`#c49feb` Copy	`oklch(0.76 0.114 307)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ad83d6` Copy	`oklch(0.68 0.126 307)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8d63b4` Copy	`oklch(0.58 0.126 307)` Copy	4.59:1 AA	4.58:1 AA
40	`#6f4794` Copy	`oklch(0.48 0.126 307)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#593579` Copy	`oklch(0.40 0.114 307)` Copy	9.5:1 AAA	2.21:1 fail
20	`#42255b` Copy	`oklch(0.33 0.095 307)` Copy	12.7:1 AAA	1.65:1 fail
10	`#281539` Copy	`oklch(0.24 0.070 307)` Copy	16.7:1 AAA	1.26:1 fail
05	`#190c25` Copy	`oklch(0.19 0.051 307)` Copy	18.7:1 AAA	1.12:1 fail

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

#cfcfc0 oklch(0.85 0.020 107)

Step	Hex	OKLCH	vs White	vs Black
Base	`#cfcfc0` Copy	`oklch(0.85 0.020 107)` Copy	1.57:1 fail	13.34:1 AAA
95	`#f2f2ec` Copy	`oklch(0.96 0.008 107)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e6e6de` Copy	`oklch(0.92 0.011 107)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cacabf` Copy	`oklch(0.84 0.015 107)` Copy	1.65:1 fail	12.7:1 AAA
70	`#afafa2` Copy	`oklch(0.75 0.018 107)` Copy	2.21:1 fail	9.5:1 AAA
60	`#969688` Copy	`oklch(0.67 0.020 107)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#767669` Copy	`oklch(0.56 0.020 107)` Copy	4.59:1 AA	4.58:1 AA
40	`#5a5a4d` Copy	`oklch(0.46 0.020 107)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#46463b` Copy	`oklch(0.39 0.018 107)` Copy	9.5:1 AAA	2.21:1 fail
20	`#33332a` Copy	`oklch(0.32 0.015 107)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1e1e18` Copy	`oklch(0.23 0.011 107)` Copy	16.7:1 AAA	1.26:1 fail
05	`#13120e` Copy	`oklch(0.18 0.008 107)` Copy	18.7:1 AAA	1.12:1 fail

Success

#5bb53a oklch(0.69 0.181 139)

Step	Hex	OKLCH	vs White	vs Black
Base	`#5bb53a` Copy	`oklch(0.69 0.181 139)` Copy	2.59:1 fail	8.12:1 AAA
95	`#d8fccd` Copy	`oklch(0.95 0.072 139)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c1f3b2` Copy	`oklch(0.91 0.099 139)` Copy	1.26:1 fail	16.7:1 AAA
80	`#97da83` Copy	`oklch(0.82 0.136 139)` Copy	1.65:1 fail	12.7:1 AAA
70	`#71c157` Copy	`oklch(0.74 0.163 139)` Copy	2.21:1 fail	9.5:1 AAA
60	`#4fa82b` Copy	`oklch(0.65 0.181 139)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#328700` Copy	`oklch(0.55 0.171 139)` Copy	4.59:1 AA	4.58:1 AA
40	`#246700` Copy	`oklch(0.45 0.141 139)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#1a5100` Copy	`oklch(0.38 0.120 139)` Copy	9.5:1 AAA	2.21:1 fail
20	`#113b00` Copy	`oklch(0.31 0.098 139)` Copy	12.7:1 AAA	1.65:1 fail
10	`#072400` Copy	`oklch(0.23 0.072 139)` Copy	16.7:1 AAA	1.26:1 fail
05	`#031700` Copy	`oklch(0.18 0.057 139)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#ffb400 oklch(0.82 0.171 78)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ffb400` Copy	`oklch(0.82 0.171 78)` Copy	1.78:1 fail	11.78:1 AAA
95	`#fff0d9` Copy	`oklch(0.96 0.035 78)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe1b3` Copy	`oklch(0.92 0.068 78)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f8c062` Copy	`oklch(0.84 0.128 78)` Copy	1.65:1 fail	12.7:1 AAA
70	`#e4a216` Copy	`oklch(0.76 0.154 78)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c58a00` Copy	`oklch(0.67 0.140 78)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9c6d00` Copy	`oklch(0.57 0.118 78)` Copy	4.59:1 AA	4.58:1 AA
40	`#775200` Copy	`oklch(0.47 0.097 78)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5e4000` Copy	`oklch(0.40 0.082 78)` Copy	9.5:1 AAA	2.21:1 fail
20	`#462e00` Copy	`oklch(0.32 0.067 78)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2b1b00` Copy	`oklch(0.24 0.050 78)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1c1000` Copy	`oklch(0.18 0.039 78)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#e75562 oklch(0.65 0.181 19)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e75562` Copy	`oklch(0.65 0.181 19)` Copy	3.58:1 AA-lg	5.87:1 AA
95	`#ffeeee` Copy	`oklch(0.96 0.019 19)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdedd` Copy	`oklch(0.93 0.037 19)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb7b7` Copy	`oklch(0.85 0.084 19)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8d91` Copy	`oklch(0.77 0.138 19)` Copy	2.21:1 fail	9.5:1 AAA
60	`#f7646f` Copy	`oklch(0.69 0.181 19)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d14051` Copy	`oklch(0.59 0.181 19)` Copy	4.59:1 AA	4.58:1 AA
40	`#ae1935` Copy	`oklch(0.49 0.181 19)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8f0526` Copy	`oklch(0.41 0.162 19)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6c001a` Copy	`oklch(0.34 0.135 19)` Copy	12.7:1 AAA	1.65:1 fail
10	`#45000d` Copy	`oklch(0.25 0.099 19)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2d0207` Copy	`oklch(0.19 0.072 19)` 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.