Core concepts

Colors

Using and customising the colour palette in Sprig CSS projects.

Sprig CSS includes a vast, beautiful colour palette out of the box, carefully crafted by expert designers and suitable for a wide range of different design styles.

Name	50	500	950
slate	`oklch(98.4% 0.003 247.858)`	`oklch(55.4% 0.046 257.417)`	`oklch(12.9% 0.042 264.695)`
teal	`oklch(98.4% 0.014 180.72)`	`oklch(70.4% 0.14 182.503)`	`oklch(27.7% 0.046 192.524)`
moss	`oklch(97% 0.03 150)`	`oklch(62% 0.14 150)`	`oklch(26% 0.05 150)`
amber	`oklch(98.7% 0.022 95.277)`	`oklch(76.9% 0.188 70.08)`	`oklch(27.9% 0.077 45.635)`

Every colour in the default palette includes 11 steps, with 50 being the lightest and 950 being the darkest.

Working with colours

Using colour utilities

<div class="flex items-center gap-4 rounded-lg bg-white p-6 shadow-md outline outline-black/5 dark:bg-gray-800">
  <span class="inline-flex shrink-0 rounded-full border border-pink-300 bg-pink-100 p-2 dark:border-pink-300/10 dark:bg-pink-400/10">
    <svg class="size-6 stroke-pink-700 dark:stroke-pink-500"><!-- ... --></svg>
  </span>
  <p class="text-gray-700 dark:text-gray-400">
    <span class="font-medium text-gray-950 dark:text-white">Sam Ortega</span> mentioned you in <span class="font-medium text-gray-950 dark:text-white">Logo redesign</span>
  </p>
</div>

Adjusting opacity

Adjust the opacity of a colour using syntax like bg-black/75, where 75 sets the alpha channel.