Skip to main content

Color Tokens

Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives that you can use as a foundation for your design system.

Color tokens are referenced using the --sl-color-{name}-{n} CSS custom property, where {name} is the name of the palette and {n} is the numeric value of the desired swatch.

Theme Tokens

Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.

Primary
--sl-color-primary-{n}
50
100
200
300
400
500
600
700
800
900
950
Success
--sl-color-success-{n}
50
100
200
300
400
500
600
700
800
900
950
Warning
--sl-color-warning-{n}
50
100
200
300
400
500
600
700
800
900
950
Danger
--sl-color-danger-{n}
50
100
200
300
400
500
600
700
800
900
950
Neutral
--sl-color-neutral-{n}
50
100
200
300
400
500
600
700
800
900
950
Black & White
--sl-color-neutral-{n}
0
1000

Primitives

Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don’t have semantic meaning. Color primitives are derived from the fantastic Tailwind color palette.

Gray
--sl-color-gray-{n}
50
100
200
300
400
500
600
700
800
900
950
Red
--sl-color-red-{n}
50
100
200
300
400
500
600
700
800
900
950
Orange
--sl-color-orange-{n}
50
100
200
300
400
500
600
700
800
900
950
Amber
--sl-color-amber-{n}
50
100
200
300
400
500
600
700
800
900
950
Yellow
--sl-color-yellow-{n}
50
100
200
300
400
500
600
700
800
900
950
Lime
--sl-color-lime-{n}
50
100
200
300
400
500
600
700
800
900
950
Green
--sl-color-green-{n}
50
100
200
300
400
500
600
700
800
900
950
Emerald
--sl-color-emerald-{n}
50
100
200
300
400
500
600
700
800
900
950
Teal
--sl-color-teal-{n}
50
100
200
300
400
500
600
700
800
900
950
Cyan
--sl-color-cyan-{n}
50
100
200
300
400
500
600
700
800
900
950
Sky
--sl-color-sky-{n}
50
100
200
300
400
500
600
700
800
900
950
Blue
--sl-color-blue-{n}
50
100
200
300
400
500
600
700
800
900
950
Indigo
--sl-color-indigo-{n}
50
100
200
300
400
500
600
700
800
900
950
Violet
--sl-color-violet-{n}
50
100
200
300
400
500
600
700
800
900
950
Purple
--sl-color-purple-{n}
50
100
200
300
400
500
600
700
800
900
950
Fuchsia
--sl-color-fuchsia-{n}
50
100
200
300
400
500
600
700
800
900
950
Pink
--sl-color-pink-{n}
50
100
200
300
400
500
600
700
800
900
950
Rose
--sl-color-rose-{n}
50
100
200
300
400
500
600
700
800
900
950