Blue Thistle

CSS

:root {
  --blue-thistle: #adc0d6;
  --blue-thistle-rgb: 173 192 214;
  --blue-thistle-oklch: oklch(0.8 0.038 252.1);
}

.element {
  color: var(--blue-thistle);
  background-color: hsl(212 33% 76%);
  border-color: oklch(0.8 0.038 252.1);
}

Tailwind CSS v4

@theme {
  --color-blue-thistle: #adc0d6;
  --color-blue-thistle-50: #eef6ff;
  --color-blue-thistle-100: #e0e9f5;
  --color-blue-thistle-200: #cad5e4;
  --color-blue-thistle-300: #abb9cb;
  --color-blue-thistle-400: #8fa0b5;
  --color-blue-thistle-500: #75889f;
  --color-blue-thistle-600: #637386;
  --color-blue-thistle-700: #4f5c6c;
  --color-blue-thistle-800: #39444f;
  --color-blue-thistle-900: #272f37;
  --color-blue-thistle-950: #151b22;
}

SCSS

$blue-thistle: #adc0d6;
$blue-thistle-rgb: 173, 192, 214;
$blue-thistle-light: mix(#fff, $blue-thistle, 20%);
$blue-thistle-dark: mix(#000, $blue-thistle, 20%);

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