Look Awesome

Brand

#fe7800 oklch(0.72 0.190 50)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fe7800` Copy	`oklch(0.72 0.190 50)` Copy	2.66:1 fail	7.9:1 AAA
95	`#ffefe6` Copy	`oklch(0.96 0.022 50)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfce` Copy	`oklch(0.93 0.043 50)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffba94` Copy	`oklch(0.84 0.095 50)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff9250` Copy	`oklch(0.76 0.154 50)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ef7000` Copy	`oklch(0.69 0.182 50)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#be5800` Copy	`oklch(0.58 0.153 50)` Copy	4.59:1 AA	4.58:1 AA
40	`#924200` Copy	`oklch(0.48 0.126 50)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#743300` Copy	`oklch(0.40 0.107 50)` Copy	9.5:1 AAA	2.21:1 fail
20	`#562400` Copy	`oklch(0.33 0.087 50)` Copy	12.7:1 AAA	1.65:1 fail
10	`#361400` Copy	`oklch(0.24 0.064 50)` Copy	16.7:1 AAA	1.26:1 fail
05	`#240b00` Copy	`oklch(0.19 0.050 50)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#f91b12 oklch(0.62 0.246 29)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f91b12` Copy	`oklch(0.62 0.246 29)` Copy	4.04:1 AA-lg	5.19: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	`#ffb8ac` Copy	`oklch(0.85 0.085 29)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8f7f` Copy	`oklch(0.77 0.138 29)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff5f4e` Copy	`oklch(0.69 0.198 29)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ec0000` Copy	`oklch(0.59 0.243 29)` Copy	4.59:1 AA	4.58:1 AA
40	`#b60000` Copy	`oklch(0.49 0.200 29)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#910000` Copy	`oklch(0.41 0.170 29)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6d0000` Copy	`oklch(0.34 0.138 29)` Copy	12.7:1 AAA	1.65:1 fail
10	`#460000` Copy	`oklch(0.25 0.102 29)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2f0000` Copy	`oklch(0.19 0.080 29)` Copy	18.7:1 AAA	1.12:1 fail

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

#dcd0b6 oklch(0.86 0.037 86)

Step	Hex	OKLCH	vs White	vs Black
Base	`#dcd0b6` Copy	`oklch(0.86 0.037 86)` Copy	1.53:1 fail	13.74:1 AAA
95	`#f6f1e7` Copy	`oklch(0.96 0.015 86)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ebe5d6` Copy	`oklch(0.92 0.021 86)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d1c9b5` Copy	`oklch(0.84 0.028 86)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b8ae97` Copy	`oklch(0.75 0.034 86)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9f947b` Copy	`oklch(0.67 0.037 86)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7f745d` Copy	`oklch(0.56 0.037 86)` Copy	4.59:1 AA	4.58:1 AA
40	`#635841` Copy	`oklch(0.46 0.037 86)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4e4531` Copy	`oklch(0.39 0.034 86)` Copy	9.5:1 AAA	2.21:1 fail
20	`#393222` Copy	`oklch(0.32 0.028 86)` Copy	12.7:1 AAA	1.65:1 fail
10	`#221d13` Copy	`oklch(0.23 0.021 86)` Copy	16.7:1 AAA	1.26:1 fail
05	`#15120b` Copy	`oklch(0.18 0.015 86)` Copy	18.7:1 AAA	1.12:1 fail

Success

#949b27 oklch(0.66 0.134 113)

Step	Hex	OKLCH	vs White	vs Black
Base	`#949b27` Copy	`oklch(0.66 0.134 113)` Copy	3.01:1 AA-lg	6.98:1 AA
95	`#f0f5cc` Copy	`oklch(0.96 0.054 113)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e4eab2` Copy	`oklch(0.92 0.074 113)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c8cf81` Copy	`oklch(0.83 0.100 113)` Copy	1.65:1 fail	12.7:1 AAA
70	`#adb555` Copy	`oklch(0.75 0.121 113)` Copy	2.21:1 fail	9.5:1 AAA
60	`#949b27` Copy	`oklch(0.66 0.134 113)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#757b00` Copy	`oklch(0.56 0.125 113)` Copy	4.59:1 AA	4.58:1 AA
40	`#595d00` Copy	`oklch(0.46 0.103 113)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#454900` Copy	`oklch(0.39 0.087 113)` Copy	9.5:1 AAA	2.21:1 fail
20	`#333500` Copy	`oklch(0.32 0.071 113)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1e2000` Copy	`oklch(0.23 0.052 113)` Copy	16.7:1 AAA	1.26:1 fail
05	`#121400` Copy	`oklch(0.18 0.041 113)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#e8a10e oklch(0.76 0.157 77)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e8a10e` Copy	`oklch(0.76 0.157 77)` Copy	2.2:1 fail	9.54:1 AAA
95	`#fff0da` Copy	`oklch(0.96 0.033 77)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe1b6` Copy	`oklch(0.92 0.065 77)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f6c06e` Copy	`oklch(0.84 0.118 77)` Copy	1.65:1 fail	12.7:1 AAA
70	`#e2a335` Copy	`oklch(0.76 0.141 77)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c78900` Copy	`oklch(0.68 0.142 77)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9e6c00` Copy	`oklch(0.57 0.119 77)` Copy	4.59:1 AA	4.58:1 AA
40	`#795100` Copy	`oklch(0.47 0.098 77)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5f3f00` Copy	`oklch(0.40 0.083 77)` Copy	9.5:1 AAA	2.21:1 fail
20	`#472e00` Copy	`oklch(0.32 0.068 77)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2b1b00` Copy	`oklch(0.24 0.050 77)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1c1000` Copy	`oklch(0.18 0.039 77)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#f64310 oklch(0.64 0.222 35)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f64310` Copy	`oklch(0.64 0.222 35)` Copy	3.67:1 AA-lg	5.73: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	`#ffb8a7` Copy	`oklch(0.84 0.086 35)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff9075` Copy	`oklch(0.77 0.140 35)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff603b` Copy	`oklch(0.69 0.201 35)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#dc3600` Copy	`oklch(0.59 0.208 35)` Copy	4.59:1 AA	4.58:1 AA
40	`#aa2700` Copy	`oklch(0.48 0.172 35)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#871d00` Copy	`oklch(0.41 0.145 35)` Copy	9.5:1 AAA	2.21:1 fail
20	`#651300` Copy	`oklch(0.33 0.119 35)` Copy	12.7:1 AAA	1.65:1 fail
10	`#400800` Copy	`oklch(0.24 0.087 35)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2c0400` Copy	`oklch(0.19 0.069 35)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#fd472a oklch(0.66 0.222 32)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fd472a` Copy	`oklch(0.66 0.222 32)` Copy	3.44:1 AA-lg	6.11:1 AA
95	`#ffeeeb` 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	`#ffb8aa` Copy	`oklch(0.85 0.086 32)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff907a` Copy	`oklch(0.77 0.139 32)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff6045` Copy	`oklch(0.69 0.199 32)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#e32904` Copy	`oklch(0.59 0.222 32)` Copy	4.59:1 AA	4.58:1 AA
40	`#b01b00` Copy	`oklch(0.49 0.185 32)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8c1300` Copy	`oklch(0.41 0.157 32)` Copy	9.5:1 AAA	2.21:1 fail
20	`#690b00` Copy	`oklch(0.34 0.128 32)` Copy	12.7:1 AAA	1.65:1 fail
10	`#430400` Copy	`oklch(0.24 0.094 32)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2e0200` Copy	`oklch(0.19 0.074 32)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#ffb723 oklch(0.83 0.165 79)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ffb723` Copy	`oklch(0.83 0.165 79)` Copy	1.74:1 fail	12.05:1 AAA
95	`#fff0d8` Copy	`oklch(0.96 0.035 79)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe1b3` Copy	`oklch(0.92 0.069 79)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f6c167` Copy	`oklch(0.84 0.124 79)` Copy	1.65:1 fail	12.7:1 AAA
70	`#e2a325` Copy	`oklch(0.76 0.148 79)` Copy	2.21:1 fail	9.5:1 AAA
60	`#c58a00` Copy	`oklch(0.67 0.140 79)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9c6d00` Copy	`oklch(0.57 0.118 79)` Copy	4.59:1 AA	4.58:1 AA
40	`#775200` Copy	`oklch(0.47 0.097 79)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5e4000` Copy	`oklch(0.40 0.082 79)` Copy	9.5:1 AAA	2.21:1 fail
20	`#462e00` Copy	`oklch(0.32 0.067 79)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2b1b00` Copy	`oklch(0.24 0.050 79)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1c1000` Copy	`oklch(0.18 0.039 79)` 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 Sagrada Familia Passion

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

Unassigned

Unassigned

Unassigned

Unassigned

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