Look Awesome

Brand

#0c34ff oklch(0.49 0.289 265)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0c34ff` Copy	`oklch(0.49 0.289 265)` Copy	7.12:1 AAA	2.95:1 fail
95	`#ecf2ff` Copy	`oklch(0.96 0.019 265)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d9e6ff` Copy	`oklch(0.92 0.037 265)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b0caff` Copy	`oklch(0.84 0.081 265)` Copy	1.65:1 fail	12.7:1 AAA
70	`#88adff` Copy	`oklch(0.76 0.126 265)` Copy	2.21:1 fail	9.5:1 AAA
60	`#6291ff` Copy	`oklch(0.68 0.171 265)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#3268ff` Copy	`oklch(0.58 0.231 265)` Copy	4.59:1 AA	4.58:1 AA
40	`#0d37ff` Copy	`oklch(0.49 0.287 265)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#0722d7` Copy	`oklch(0.42 0.260 265)` Copy	9.5:1 AAA	2.21:1 fail
20	`#0414a6` Copy	`oklch(0.34 0.217 265)` Copy	12.7:1 AAA	1.65:1 fail
10	`#01096c` Copy	`oklch(0.25 0.159 265)` Copy	16.7:1 AAA	1.26:1 fail
05	`#010747` Copy	`oklch(0.19 0.116 265)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#1c94f2 oklch(0.65 0.171 249)

Step	Hex	OKLCH	vs White	vs Black
Base	`#1c94f2` Copy	`oklch(0.65 0.171 249)` Copy	3.2:1 AA-lg	6.57:1 AA
95	`#e8f3ff` Copy	`oklch(0.96 0.020 249)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d1e8ff` Copy	`oklch(0.92 0.040 249)` Copy	1.26:1 fail	16.7:1 AAA
80	`#9dceff` Copy	`oklch(0.83 0.087 249)` Copy	1.65:1 fail	12.7:1 AAA
70	`#64b4ff` Copy	`oklch(0.75 0.135 249)` Copy	2.21:1 fail	9.5:1 AAA
60	`#2599f8` Copy	`oklch(0.67 0.171 249)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#0079cb` Copy	`oklch(0.56 0.155 249)` Copy	4.59:1 AA	4.58:1 AA
40	`#005c9d` Copy	`oklch(0.46 0.128 249)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#00487c` Copy	`oklch(0.39 0.108 249)` Copy	9.5:1 AAA	2.21:1 fail
20	`#00345d` Copy	`oklch(0.32 0.088 249)` Copy	12.7:1 AAA	1.65:1 fail
10	`#001f3b` Copy	`oklch(0.23 0.065 249)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001328` Copy	`oklch(0.18 0.051 249)` Copy	18.7:1 AAA	1.12:1 fail

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

#d6f5fc oklch(0.95 0.034 213)

Step	Hex	OKLCH	vs White	vs Black
Base	`#d6f5fc` Copy	`oklch(0.95 0.034 213)` Copy	1.15:1 fail	18.33:1 AAA
95	`#e8f4f7` Copy	`oklch(0.96 0.013 213)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d8e8ec` Copy	`oklch(0.92 0.018 213)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b7cdd2` Copy	`oklch(0.83 0.025 213)` Copy	1.65:1 fail	12.7:1 AAA
70	`#99b3b9` Copy	`oklch(0.75 0.030 213)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7d9aa0` Copy	`oklch(0.67 0.034 213)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#5e7a80` Copy	`oklch(0.56 0.034 213)` Copy	4.59:1 AA	4.58:1 AA
40	`#425e63` Copy	`oklch(0.46 0.034 213)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#32494f` Copy	`oklch(0.39 0.030 213)` Copy	9.5:1 AAA	2.21:1 fail
20	`#23363a` Copy	`oklch(0.32 0.025 213)` Copy	12.7:1 AAA	1.65:1 fail
10	`#132023` Copy	`oklch(0.23 0.018 213)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0b1416` Copy	`oklch(0.18 0.013 213)` Copy	18.7:1 AAA	1.12:1 fail

Success

#c3f744 oklch(0.91 0.204 125)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c3f744` Copy	`oklch(0.91 0.204 125)` Copy	1.26:1 fail	16.71:1 AAA
95	`#e3fabe` Copy	`oklch(0.95 0.082 125)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d2f09c` Copy	`oklch(0.91 0.112 125)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b0d75f` Copy	`oklch(0.83 0.153 125)` Copy	1.65:1 fail	12.7:1 AAA
70	`#91bd07` Copy	`oklch(0.74 0.184 125)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7ca200` Copy	`oklch(0.66 0.165 125)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#618000` Copy	`oklch(0.56 0.139 125)` Copy	4.59:1 AA	4.58:1 AA
40	`#496100` Copy	`oklch(0.46 0.114 125)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#394c00` Copy	`oklch(0.39 0.097 125)` Copy	9.5:1 AAA	2.21:1 fail
20	`#293800` Copy	`oklch(0.32 0.079 125)` Copy	12.7:1 AAA	1.65:1 fail
10	`#172100` Copy	`oklch(0.23 0.058 125)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0d1500` Copy	`oklch(0.18 0.046 125)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#fff701 oklch(0.95 0.204 107)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fff701` Copy	`oklch(0.95 0.204 107)` Copy	1.13:1 fail	18.56:1 AAA
95	`#f6f5b5` Copy	`oklch(0.96 0.082 107)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ecea90` Copy	`oklch(0.92 0.112 107)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d3ce46` Copy	`oklch(0.83 0.153 107)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b9b300` Copy	`oklch(0.75 0.160 107)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9e9900` Copy	`oklch(0.66 0.143 107)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7d7900` Copy	`oklch(0.56 0.120 107)` Copy	4.59:1 AA	4.58:1 AA
40	`#5f5c00` Copy	`oklch(0.46 0.099 107)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4a4800` Copy	`oklch(0.39 0.084 107)` Copy	9.5:1 AAA	2.21:1 fail
20	`#363400` Copy	`oklch(0.32 0.068 107)` Copy	12.7:1 AAA	1.65:1 fail
10	`#201f00` Copy	`oklch(0.23 0.050 107)` Copy	16.7:1 AAA	1.26:1 fail
05	`#141300` Copy	`oklch(0.18 0.040 107)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#ffc801 oklch(0.86 0.175 88)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ffc801` Copy	`oklch(0.86 0.175 88)` Copy	1.55:1 fail	13.51:1 AAA
95	`#fff1cd` Copy	`oklch(0.96 0.049 88)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe39c` Copy	`oklch(0.92 0.094 88)` Copy	1.26:1 fail	16.7:1 AAA
80	`#edc55b` Copy	`oklch(0.84 0.131 88)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d7a800` Copy	`oklch(0.75 0.154 88)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b89000` Copy	`oklch(0.67 0.137 88)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#927100` Copy	`oklch(0.56 0.116 88)` Copy	4.59:1 AA	4.58:1 AA
40	`#6f5600` Copy	`oklch(0.46 0.095 88)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#584300` Copy	`oklch(0.39 0.081 88)` Copy	9.5:1 AAA	2.21:1 fail
20	`#413100` Copy	`oklch(0.32 0.066 88)` Copy	12.7:1 AAA	1.65:1 fail
10	`#271c00` Copy	`oklch(0.24 0.048 88)` Copy	16.7:1 AAA	1.26:1 fail
05	`#191100` Copy	`oklch(0.18 0.038 88)` Copy	18.7:1 AAA	1.12:1 fail

Light

#fb8502 oklch(0.73 0.179 56)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fb8502` Copy	`oklch(0.73 0.179 56)` Copy	2.48:1 fail	8.46:1 AAA
95	`#ffefe4` Copy	`oklch(0.96 0.023 56)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfca` Copy	`oklch(0.93 0.046 56)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffbb8a` Copy	`oklch(0.84 0.102 56)` Copy	1.65:1 fail	12.7:1 AAA
70	`#fe943c` Copy	`oklch(0.76 0.161 56)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e47800` Copy	`oklch(0.68 0.167 56)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#b55e00` Copy	`oklch(0.58 0.141 56)` Copy	4.59:1 AA	4.58:1 AA
40	`#8b4700` Copy	`oklch(0.47 0.116 56)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#6e3700` Copy	`oklch(0.40 0.098 56)` Copy	9.5:1 AAA	2.21:1 fail
20	`#522700` Copy	`oklch(0.33 0.080 56)` Copy	12.7:1 AAA	1.65:1 fail
10	`#331600` Copy	`oklch(0.24 0.059 56)` Copy	16.7:1 AAA	1.26:1 fail
05	`#220c00` Copy	`oklch(0.19 0.046 56)` Copy	18.7:1 AAA	1.12:1 fail

Sky

#566ef3 oklch(0.59 0.200 271)

Step	Hex	OKLCH	vs White	vs Black
Base	`#566ef3` Copy	`oklch(0.59 0.200 271)` Copy	4.27:1 AA-lg	4.92:1 AA
95	`#edf2ff` Copy	`oklch(0.96 0.019 271)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dce5ff` Copy	`oklch(0.92 0.037 271)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b7c8ff` Copy	`oklch(0.84 0.080 271)` Copy	1.65:1 fail	12.7:1 AAA
70	`#93abff` Copy	`oklch(0.76 0.125 271)` Copy	2.21:1 fail	9.5:1 AAA
60	`#738dff` Copy	`oklch(0.68 0.170 271)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#5269ed` Copy	`oklch(0.58 0.200 271)` Copy	4.59:1 AA	4.58:1 AA
40	`#3a49cb` Copy	`oklch(0.48 0.200 271)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#2b36a9` Copy	`oklch(0.41 0.180 271)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1e2681` Copy	`oklch(0.33 0.150 271)` Copy	12.7:1 AAA	1.65:1 fail
10	`#101553` Copy	`oklch(0.24 0.110 271)` Copy	16.7:1 AAA	1.26:1 fail
05	`#080d37` Copy	`oklch(0.19 0.080 271)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Light

Sky

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Light

Sky

Progress & Controls

Notifications

← Key

Key →

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

Light

Unassigned

Sky

Unassigned

Brand

Brand

Accent

Accent

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

Neutral

Success

Success

Warning

Warning

Danger

Danger

Light

Unassigned

Sky

Unassigned

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