Thistle Down

CSS

:root {
  --thistle-down: #9499bb;
  --thistle-down-rgb: 148 153 187;
  --thistle-down-oklch: oklch(0.691 0.05 278.4);
}

.element {
  color: var(--thistle-down);
  background-color: hsl(232 22% 66%);
  border-color: oklch(0.691 0.05 278.4);
}

Tailwind CSS v4

@theme {
  --color-thistle-down: #9499bb;
  --color-thistle-down-50: #f2f4ff;
  --color-thistle-down-100: #e4e6f9;
  --color-thistle-down-200: #d0d2ea;
  --color-thistle-down-300: #b2b5d1;
  --color-thistle-down-400: #979cbc;
  --color-thistle-down-500: #7e83a8;
  --color-thistle-down-600: #6b6f8e;
  --color-thistle-down-700: #555972;
  --color-thistle-down-800: #3e4154;
  --color-thistle-down-900: #2a2d3b;
  --color-thistle-down-950: #181a25;
}

SCSS

$thistle-down: #9499bb;
$thistle-down-rgb: 148, 153, 187;
$thistle-down-light: mix(#fff, $thistle-down, 20%);
$thistle-down-dark: mix(#000, $thistle-down, 20%);

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