Simpatico Blue

CSS

:root {
  --simpatico-blue: #a8c1d4;
  --simpatico-blue-rgb: 168 193 212;
  --simpatico-blue-oklch: oklch(0.798 0.038 240.8);
}

.element {
  color: var(--simpatico-blue);
  background-color: hsl(206 34% 75%);
  border-color: oklch(0.798 0.038 240.8);
}

Tailwind CSS v4

@theme {
  --color-simpatico-blue: #a8c1d4;
  --color-simpatico-blue-50: #ecf7ff;
  --color-simpatico-blue-100: #ddeaf4;
  --color-simpatico-blue-200: #c7d7e4;
  --color-simpatico-blue-300: #a7baca;
  --color-simpatico-blue-400: #8ba2b3;
  --color-simpatico-blue-500: #708a9e;
  --color-simpatico-blue-600: #5f7585;
  --color-simpatico-blue-700: #4c5d6b;
  --color-simpatico-blue-800: #36444e;
  --color-simpatico-blue-900: #252f37;
  --color-simpatico-blue-950: #141c21;
}

SCSS

$simpatico-blue: #a8c1d4;
$simpatico-blue-rgb: 168, 193, 212;
$simpatico-blue-light: mix(#fff, $simpatico-blue, 20%);
$simpatico-blue-dark: mix(#000, $simpatico-blue, 20%);

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