Look Awesome

Brand

#5c2616 oklch(0.34 0.084 37)

Step	Hex	OKLCH	vs White	vs Black
Base	`#5c2616` Copy	`oklch(0.34 0.084 37)` Copy	12.04:1 AAA	1.74:1 fail
95	`#ffeee9` Copy	`oklch(0.96 0.020 37)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded5` Copy	`oklch(0.93 0.039 37)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f1beaf` Copy	`oklch(0.84 0.063 37)` Copy	1.65:1 fail	12.7:1 AAA
70	`#dca18f` Copy	`oklch(0.76 0.076 37)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c58573` Copy	`oklch(0.68 0.084 37)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#a36654` Copy	`oklch(0.57 0.084 37)` Copy	4.59:1 AA	4.58:1 AA
40	`#844a39` Copy	`oklch(0.47 0.084 37)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#6a3829` Copy	`oklch(0.40 0.076 37)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4f281c` Copy	`oklch(0.33 0.063 37)` Copy	12.7:1 AAA	1.65:1 fail
10	`#31160f` Copy	`oklch(0.24 0.046 37)` Copy	16.7:1 AAA	1.26:1 fail
05	`#200d08` Copy	`oklch(0.19 0.034 37)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#5193cd oklch(0.64 0.111 247)

Step	Hex	OKLCH	vs White	vs Black
Base	`#5193cd` Copy	`oklch(0.64 0.111 247)` Copy	3.28:1 AA-lg	6.4:1 AA
95	`#e7f3ff` Copy	`oklch(0.96 0.021 247)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d0e8ff` Copy	`oklch(0.92 0.041 247)` Copy	1.26:1 fail	16.7:1 AAA
80	`#9dcefc` Copy	`oklch(0.83 0.083 247)` Copy	1.65:1 fail	12.7:1 AAA
70	`#79b4ea` Copy	`oklch(0.75 0.100 247)` Copy	2.21:1 fail	9.5:1 AAA
60	`#589ad5` Copy	`oklch(0.67 0.111 247)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#377ab2` Copy	`oklch(0.56 0.111 247)` Copy	4.59:1 AA	4.58:1 AA
40	`#155c93` Copy	`oklch(0.46 0.111 247)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#064877` Copy	`oklch(0.39 0.100 247)` Copy	9.5:1 AAA	2.21:1 fail
20	`#01355a` Copy	`oklch(0.32 0.083 247)` Copy	12.7:1 AAA	1.65:1 fail
10	`#001f39` Copy	`oklch(0.23 0.061 247)` Copy	16.7:1 AAA	1.26:1 fail
05	`#011324` Copy	`oklch(0.18 0.044 247)` Copy	18.7:1 AAA	1.12:1 fail

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

#24252b oklch(0.27 0.011 278)

Step	Hex	OKLCH	vs White	vs Black
Base	`#24252b` Copy	`oklch(0.27 0.011 278)` Copy	15.28:1 AAA	1.37:1 fail
95	`#f1f2f5` Copy	`oklch(0.96 0.004 278)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e4e5ea` Copy	`oklch(0.92 0.006 278)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c8c9cf` Copy	`oklch(0.84 0.008 278)` Copy	1.65:1 fail	12.7:1 AAA
70	`#adaeb5` Copy	`oklch(0.75 0.010 278)` Copy	2.21:1 fail	9.5:1 AAA
60	`#93959c` Copy	`oklch(0.67 0.011 278)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#74757c` Copy	`oklch(0.56 0.011 278)` Copy	4.59:1 AA	4.58:1 AA
40	`#585960` Copy	`oklch(0.46 0.011 278)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#44454b` Copy	`oklch(0.39 0.010 278)` Copy	9.5:1 AAA	2.21:1 fail
20	`#323237` Copy	`oklch(0.32 0.008 278)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1d1e21` Copy	`oklch(0.24 0.006 278)` Copy	16.7:1 AAA	1.26:1 fail
05	`#121214` Copy	`oklch(0.18 0.004 278)` Copy	18.7:1 AAA	1.12:1 fail

Success

#605329 oklch(0.45 0.062 93)

Step	Hex	OKLCH	vs White	vs Black
Base	`#605329` Copy	`oklch(0.45 0.062 93)` Copy	7.59:1 AAA	2.77:1 fail
95	`#f7f2df` Copy	`oklch(0.96 0.025 93)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ede5cc` Copy	`oklch(0.92 0.034 93)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d4c9a7` Copy	`oklch(0.84 0.047 93)` Copy	1.65:1 fail	12.7:1 AAA
70	`#bbae86` Copy	`oklch(0.75 0.056 93)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a29469` Copy	`oklch(0.67 0.062 93)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#82754a` Copy	`oklch(0.56 0.062 93)` Copy	4.59:1 AA	4.58:1 AA
40	`#65582e` Copy	`oklch(0.46 0.062 93)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#504520` Copy	`oklch(0.39 0.056 93)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3b3215` Copy	`oklch(0.32 0.047 93)` Copy	12.7:1 AAA	1.65:1 fail
10	`#241d0a` Copy	`oklch(0.23 0.034 93)` Copy	16.7:1 AAA	1.26:1 fail
05	`#161205` Copy	`oklch(0.18 0.025 93)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#b28b74 oklch(0.67 0.058 52)

Step	Hex	OKLCH	vs White	vs Black
Base	`#b28b74` Copy	`oklch(0.67 0.058 52)` Copy	3.07:1 AA-lg	6.84:1 AA
95	`#ffefe5` Copy	`oklch(0.96 0.022 52)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f8e1d3` Copy	`oklch(0.92 0.032 52)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e2c3b1` Copy	`oklch(0.84 0.044 52)` Copy	1.65:1 fail	12.7:1 AAA
70	`#cba792` Copy	`oklch(0.76 0.052 52)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b48d76` Copy	`oklch(0.67 0.058 52)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#936d57` Copy	`oklch(0.57 0.058 52)` Copy	4.59:1 AA	4.58:1 AA
40	`#75513c` Copy	`oklch(0.47 0.058 52)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5d3f2c` Copy	`oklch(0.40 0.052 52)` Copy	9.5:1 AAA	2.21:1 fail
20	`#452d1e` Copy	`oklch(0.32 0.044 52)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2b1a10` Copy	`oklch(0.24 0.032 52)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1b1009` Copy	`oklch(0.18 0.023 52)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#c0623e oklch(0.60 0.131 41)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c0623e` Copy	`oklch(0.60 0.131 41)` Copy	4.15:1 AA-lg	5.06:1 AA
95	`#ffeee8` Copy	`oklch(0.96 0.020 41)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfd3` Copy	`oklch(0.93 0.040 41)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb99f` Copy	`oklch(0.84 0.089 41)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f19877` Copy	`oklch(0.76 0.118 41)` Copy	2.21:1 fail	9.5:1 AAA
60	`#dc7b57` Copy	`oklch(0.68 0.131 41)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b85b37` Copy	`oklch(0.58 0.131 41)` Copy	4.59:1 AA	4.58:1 AA
40	`#973d17` Copy	`oklch(0.48 0.131 41)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7b2c08` Copy	`oklch(0.40 0.118 41)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5d1e03` Copy	`oklch(0.33 0.098 41)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3a1001` Copy	`oklch(0.24 0.072 41)` Copy	16.7:1 AAA	1.26:1 fail
05	`#260902` Copy	`oklch(0.19 0.052 41)` 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.