# 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.
--sl-color-primary-{n}
--sl-color-success-{n}
--sl-color-warning-{n}
--sl-color-danger-{n}
--sl-color-neutral-{n}
--sl-color-neutral-{n}
--sl-color-gray-{n}
--sl-color-red-{n}
--sl-color-orange-{n}
--sl-color-amber-{n}
--sl-color-yellow-{n}
--sl-color-lime-{n}
--sl-color-green-{n}
--sl-color-emerald-{n}
--sl-color-teal-{n}
--sl-color-cyan-{n}
--sl-color-sky-{n}
--sl-color-blue-{n}
--sl-color-indigo-{n}
--sl-color-violet-{n}
--sl-color-purple-{n}
--sl-color-fuchsia-{n}
--sl-color-pink-{n}
--sl-color-rose-{n}