# 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
?> Looking for an easy way to customize your theme? [Try the color token generator!](https://codepen.io/claviska/full/QWveRgL) ## 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](https://tailwindcss.com/docs/customizing-colors).
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