Colors

Skeleton provides guardrails and utilities to create a powerful color system. This includes a number of colors, shades, and contrast values that work together seamlessly. Including a visually appealing and accessible color palette for each theme.

Color Palette

Supports all Tailwind color utility classes using the following pattern.

{property}-{color}-{shade}

<div class="bg-primary-500">...</div>
<div class="border border-secondary-600">...</div>
<svg class="fill-surface-950">...</svg>

Contrast Colors

Contrast color values are available for every shade. Use these to set accessible text color and icon fill values. See also the Preset system for utility classes that automatically mix each color and contrast tone.

{property}-{color}-contrast-{shade}

View the example below while you test different combinations of themes and dark mode. In all scenarios the contrast tones will maintain an accessible contrast ratio for the icon and text labels.

---
import { SwatchBookIcon } from 'lucide-react';
---

<div class="grid grid-cols-3 gap-6">
	<!-- Standard Colors -->
	<div class="flex flex-col space-y-2">
		<p class="text-xs">User Defined</p>
		<div class="badge justify-start bg-primary-500 text-primary-contrast-500">
			<SwatchBookIcon className="size-4" />
			<span>Primary</span>
		</div>
		<div class="badge justify-start bg-secondary-500 text-secondary-contrast-500">
			<SwatchBookIcon className="size-4" />
			<span>Secondary</span>
		</div>
		<div class="badge justify-start bg-tertiary-500 text-tertiary-contrast-500">
			<SwatchBookIcon className="size-4" />
			<span>Tertiary</span>
		</div>
	</div>
	<!-- Color Pairings -->
	<div class="flex flex-col space-y-2">
		<p class="text-xs">Color Pairings</p>
		<div class="badge justify-start preset-filled-primary-50-950">
			<SwatchBookIcon className="size-4" />
			<span>Primary</span>
		</div>
		<div class="badge justify-start preset-filled-secondary-50-950">
			<SwatchBookIcon className="size-4" />
			<span>Secondary</span>
		</div>
		<div class="badge justify-start preset-filled-tertiary-50-950">
			<SwatchBookIcon className="size-4" />
			<span>Tertiary</span>
		</div>
	</div>
	<!-- Presets -->
	<div class="flex flex-col space-y-2">
		<p class="text-xs">Presets</p>
		<div class="badge justify-start preset-filled-primary-950-50">
			<SwatchBookIcon className="size-4" />
			<span>Primary</span>
		</div>
		<div class="badge justify-start preset-filled-secondary-950-50">
			<SwatchBookIcon className="size-4" />
			<span>Secondary</span>
		</div>
		<div class="badge justify-start preset-filled-tertiary-950-50">
			<SwatchBookIcon className="size-4" />
			<span>Tertiary</span>
		</div>
	</div>
</div>

Color Pairings

Provides a condensed syntax for dual-tone color values, evenly balanced to swap between light and dark mode. Pairings are supported for all Tailwind utility color classes (bg, border, fill, etc).

{property}-{color}-{lightModeShade}-{darkModeShade}

<div class="bg-surface-200-800">...</div>
<div class="border border-secondary-400-600">...</div>
<svg class="fill-secondary-50-950">...</svg>

How Pairings Work

Color Pairing are enabled through the use of the CSS light-dark function. This means instead of writing the standard light/dark syntax with Tailwind utilities:

<div class="text-primary-300 dark:text-primary-700">...</div>

You can instead use a much more condensed syntax:

<div class="text-primary-300-700">...</div>

This will then be implemented into your CSS bundle as follows:

.text-primary-300-700 {
	color: light-dark(var(--color-primary-300), var(--color-primary-700));
}

Plus, as a benefit to using the CSS light-dark() function, this also enables use of Tailwind’s Color Scheme utilities. Learn more about using Color Scheme .

Pairing Previews

The following is a static representation of each pairing. Only primary is shown, but all Skeleton colors are supported. Note that shade 500 does not have a pairing, and instead represents your key brand shade per each color ramp.

To see the Color Pairing in action, toggle this website between light and dark mode and monitor the following. The top number represents the light mode shade, while the bottom the dark mode shade.

When to Use Pairings

Color Parings are useful for generating a hierarchy of visual layers, ranging from foreground to background elements. Each reuse the same color ramp, but invert the order when switching from light to dark mode.

• We can use shade 950 for light mode and 50 from dark mode to represent our body text color.
• Then use shade 50 from light mode and 950 from dark mode to represent our app background.
• Use the static 500 shade for key branding elements, such as buttons or banners.
• Then reserve multiple layers between for elements such as cards, inputs, and more.

Transparency

All available Skeleton Colors and Color Pairings support Tailwind’s color transparency syntax.

<div class="bg-primary-500/25">Primary Color @ 25% transparency</div>
<div class="bg-surface-50-950/60">Surface Pairing 50/950 @ 60% transparency</div>