Wild Thistle

CSS

:root {
  --wild-thistle: #9e9fb6;
  --wild-thistle-rgb: 158 159 182;
  --wild-thistle-oklch: oklch(0.709 0.033 283.5);
}

.element {
  color: var(--wild-thistle);
  background-color: hsl(238 14% 67%);
  border-color: oklch(0.709 0.033 283.5);
}

Tailwind CSS v4

@theme {
  --color-wild-thistle: #9e9fb6;
  --color-wild-thistle-50: #f4f4ff;
  --color-wild-thistle-100: #e6e7f3;
  --color-wild-thistle-200: #d2d3e2;
  --color-wild-thistle-300: #b5b5c8;
  --color-wild-thistle-400: #9b9cb2;
  --color-wild-thistle-500: #83849c;
  --color-wild-thistle-600: #6f6f84;
  --color-wild-thistle-700: #58596a;
  --color-wild-thistle-800: #40414e;
  --color-wild-thistle-900: #2c2d36;
  --color-wild-thistle-950: #191a21;
}

SCSS

$wild-thistle: #9e9fb6;
$wild-thistle-rgb: 158, 159, 182;
$wild-thistle-light: mix(#fff, $wild-thistle, 20%);
$wild-thistle-dark: mix(#000, $wild-thistle, 20%);

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