Colors

Color Palette

Supports all standard 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.

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

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <!-- Standard Colors -->
  <div class="bg-primary-500 text-primary-contrast-500">
    <p class="text-center p-4">Standard Colors</p>
  </div>
  <!-- Color Pairings -->
  <div class="bg-secondary-200-800 text-secondary-contrast-200-800">
    <p class="text-center p-4">Color Pairings</p>
  </div>
</div>

See the Preset system for additional utility classes that automatically mix each color and contrast tone.

Color Pairings

Provides a condensed syntax of dual-tone color values balanced to swap between light and dark mode. These are supported for all the same properties standard colors support (bg, border, fill, etc).

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

For example:

• bg-surface-200-800
• text-primary-400-600
• border-secondary-50-950

How Pairings Work

Color Pairing are enabled through the use of the CSS light-dark function. For example, the text-primary-300-700 pairing will be implemnted in your CSS bundle as follows:

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

This roughly equivalent to the following, just more compact, and enabling support for Tailwind’s Color Scheme utilities.

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

By default, Skeleton sets the overall app’s color scheme to match light or dark mode.

Pairing Previews

The following is a static representation of each pairing. Only primary is shown, but all Skeleton colors are supported.

The following shows actual Color Pairings. Toggle this website between light and dark mode to see how these react.

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, but inverts the order when toggling from light to dark mode.

<div class="bg-primary-950-50">Foreground</div>
<div class="bg-primary-900-100">...</div>
<div class="bg-primary-800-200">...</div>
<div class="bg-primary-700-300">...</div>
<div class="bg-primary-600-400">...</div>
<div class="bg-primary-500">Branding</div>
<div class="bg-primary-400-600">...</div>
<div class="bg-primary-300-700">...</div>
<div class="bg-primary-200-800">...</div>
<div class="bg-primary-100-900">...</div>
<div class="bg-primary-50-950">Background</div>

• 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

Both 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>