Look Awesome

Brand

#c65c48 oklch(0.60 0.140 32)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c65c48` Copy	`oklch(0.60 0.140 32)` Copy	4.18:1 AA-lg	5.03:1 AA
95	`#ffeeea` Copy	`oklch(0.96 0.019 32)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded7` Copy	`oklch(0.93 0.038 32)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8a9` Copy	`oklch(0.85 0.086 32)` Copy	1.65:1 fail	12.7:1 AAA
70	`#f8937f` Copy	`oklch(0.76 0.126 32)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e37660` Copy	`oklch(0.68 0.140 32)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#be5541` Copy	`oklch(0.58 0.140 32)` Copy	4.59:1 AA	4.58:1 AA
40	`#9d3725` Copy	`oklch(0.48 0.140 32)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#802717` Copy	`oklch(0.41 0.126 32)` Copy	9.5:1 AAA	2.21:1 fail
20	`#611a0d` Copy	`oklch(0.33 0.105 32)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3d0d05` Copy	`oklch(0.24 0.077 32)` Copy	16.7:1 AAA	1.26:1 fail
05	`#280704` Copy	`oklch(0.19 0.056 32)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#edb567 oklch(0.81 0.116 74)

Step	Hex	OKLCH	vs White	vs Black
Base	`#edb567` Copy	`oklch(0.81 0.116 74)` Copy	1.84:1 fail	11.41:1 AAA
95	`#fff0dc` Copy	`oklch(0.96 0.031 74)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe1b9` Copy	`oklch(0.92 0.061 74)` Copy	1.26:1 fail	16.7:1 AAA
80	`#edc28a` Copy	`oklch(0.84 0.087 74)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d7a661` Copy	`oklch(0.76 0.104 74)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c18b3b` Copy	`oklch(0.67 0.116 74)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9f6b10` Copy	`oklch(0.57 0.116 74)` Copy	4.59:1 AA	4.58:1 AA
40	`#7b5000` Copy	`oklch(0.47 0.099 74)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#613f00` Copy	`oklch(0.40 0.084 74)` Copy	9.5:1 AAA	2.21:1 fail
20	`#482d00` Copy	`oklch(0.32 0.069 74)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2c1a00` Copy	`oklch(0.24 0.051 74)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1d0f00` Copy	`oklch(0.18 0.040 74)` Copy	18.7:1 AAA	1.12:1 fail

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

#e3dcce oklch(0.90 0.020 85)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e3dcce` Copy	`oklch(0.90 0.020 85)` Copy	1.36:1 fail	15.39:1 AAA
95	`#f4f1ec` Copy	`oklch(0.96 0.008 85)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e9e5dd` Copy	`oklch(0.92 0.011 85)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cec9bf` Copy	`oklch(0.84 0.015 85)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b4aea2` Copy	`oklch(0.75 0.018 85)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9b9488` Copy	`oklch(0.67 0.020 85)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7b7568` Copy	`oklch(0.56 0.020 85)` Copy	4.59:1 AA	4.58:1 AA
40	`#5e594d` Copy	`oklch(0.46 0.020 85)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4a453b` Copy	`oklch(0.39 0.018 85)` Copy	9.5:1 AAA	2.21:1 fail
20	`#36322a` Copy	`oklch(0.32 0.015 85)` Copy	12.7:1 AAA	1.65:1 fail
10	`#201e18` Copy	`oklch(0.23 0.011 85)` Copy	16.7:1 AAA	1.26:1 fail
05	`#14120e` Copy	`oklch(0.18 0.008 85)` Copy	18.7:1 AAA	1.12:1 fail

Success

#6091b2 oklch(0.63 0.073 239)

Step	Hex	OKLCH	vs White	vs Black
Base	`#6091b2` Copy	`oklch(0.63 0.073 239)` Copy	3.39:1 AA-lg	6.19:1 AA
95	`#e4f4ff` Copy	`oklch(0.96 0.022 239)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cde9fd` Copy	`oklch(0.92 0.040 239)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a9cee9` Copy	`oklch(0.83 0.054 239)` Copy	1.65:1 fail	12.7:1 AAA
70	`#87b4d3` Copy	`oklch(0.75 0.065 239)` Copy	2.21:1 fail	9.5:1 AAA
60	`#699bbc` Copy	`oklch(0.67 0.073 239)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#4a7b9b` Copy	`oklch(0.56 0.073 239)` Copy	4.59:1 AA	4.58:1 AA
40	`#2d5e7c` Copy	`oklch(0.46 0.073 239)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#1f4a64` Copy	`oklch(0.39 0.065 239)` Copy	9.5:1 AAA	2.21:1 fail
20	`#14364b` Copy	`oklch(0.32 0.054 239)` Copy	12.7:1 AAA	1.65:1 fail
10	`#09202e` Copy	`oklch(0.23 0.040 239)` Copy	16.7:1 AAA	1.26:1 fail
05	`#05141d` Copy	`oklch(0.18 0.029 239)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#fee9b0 oklch(0.94 0.076 90)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fee9b0` Copy	`oklch(0.94 0.076 90)` Copy	1.2:1 fail	17.5:1 AAA
95	`#faf1db` Copy	`oklch(0.96 0.030 90)` Copy	1.12:1 fail	18.7:1 AAA
90	`#f0e5c6` Copy	`oklch(0.92 0.042 90)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d8c89f` Copy	`oklch(0.84 0.057 90)` Copy	1.65:1 fail	12.7:1 AAA
70	`#bfad7c` Copy	`oklch(0.75 0.069 90)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a7935d` Copy	`oklch(0.67 0.076 90)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#87743e` Copy	`oklch(0.56 0.076 90)` Copy	4.59:1 AA	4.58:1 AA
40	`#6a5721` Copy	`oklch(0.46 0.076 90)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#544413` Copy	`oklch(0.39 0.069 90)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3e310a` Copy	`oklch(0.32 0.057 90)` Copy	12.7:1 AAA	1.65:1 fail
10	`#261d04` Copy	`oklch(0.24 0.042 90)` Copy	16.7:1 AAA	1.26:1 fail
05	`#181203` Copy	`oklch(0.18 0.030 90)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#cc6f62 oklch(0.64 0.120 29)

Step	Hex	OKLCH	vs White	vs Black
Base	`#cc6f62` Copy	`oklch(0.64 0.120 29)` Copy	3.49:1 AA-lg	6.02:1 AA
95	`#ffeeeb` Copy	`oklch(0.96 0.019 29)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded8` Copy	`oklch(0.93 0.038 29)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8ad` Copy	`oklch(0.85 0.085 29)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ef988a` Copy	`oklch(0.76 0.108 29)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d97b6d` Copy	`oklch(0.68 0.120 29)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b55b4f` Copy	`oklch(0.58 0.120 29)` Copy	4.59:1 AA	4.58:1 AA
40	`#953e33` Copy	`oklch(0.48 0.120 29)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#792d24` Copy	`oklch(0.40 0.108 29)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5b1f18` Copy	`oklch(0.33 0.090 29)` Copy	12.7:1 AAA	1.65:1 fail
10	`#39100c` Copy	`oklch(0.24 0.066 29)` Copy	16.7:1 AAA	1.26:1 fail
05	`#250907` Copy	`oklch(0.19 0.048 29)` 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 →

Source image for Girl with the Pearl Earring

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.