Clary Sage

CSS

:root {
  --clary-sage: #c7c0ce;
  --clary-sage-rgb: 199 192 206;
  --clary-sage-oklch: oklch(0.818 0.021 308.2);
}

.element {
  color: var(--clary-sage);
  background-color: hsl(270 13% 78%);
  border-color: oklch(0.818 0.021 308.2);
}

Tailwind CSS v4

@theme {
  --color-clary-sage: #c7c0ce;
  --color-clary-sage-50: #f7f4fa;
  --color-clary-sage-100: #eae6ed;
  --color-clary-sage-200: #d7d2db;
  --color-clary-sage-300: #bbb5c0;
  --color-clary-sage-400: #a29ba8;
  --color-clary-sage-500: #8a8391;
  --color-clary-sage-600: #756f7b;
  --color-clary-sage-700: #5d5862;
  --color-clary-sage-800: #444148;
  --color-clary-sage-900: #2f2d32;
  --color-clary-sage-950: #1c1a1e;
}

SCSS

$clary-sage: #c7c0ce;
$clary-sage-rgb: 199, 192, 206;
$clary-sage-light: mix(#fff, $clary-sage, 20%);
$clary-sage-dark: mix(#000, $clary-sage, 20%);

.element {
  color: $clary-sage;
  box-shadow: 0 0 0 2px rgba($clary-sage, 0.35);
}