Little Blue Heron

CSS

:root {
  --little-blue-heron: #3c4378;
  --little-blue-heron-rgb: 60 67 120;
  --little-blue-heron-oklch: oklch(0.403 0.089 276);
}

.element {
  color: var(--little-blue-heron);
  background-color: hsl(233 33% 35%);
  border-color: oklch(0.403 0.089 276);
}

Tailwind CSS v4

@theme {
  --color-little-blue-heron: #3c4378;
  --color-little-blue-heron-50: #eff3ff;
  --color-little-blue-heron-100: #e0e6ff;
  --color-little-blue-heron-200: #cbd1fb;
  --color-little-blue-heron-300: #acb4e5;
  --color-little-blue-heron-400: #909ad3;
  --color-little-blue-heron-500: #7681c1;
  --color-little-blue-heron-600: #646da3;
  --color-little-blue-heron-700: #505783;
  --color-little-blue-heron-800: #394061;
  --color-little-blue-heron-900: #272c44;
  --color-little-blue-heron-950: #15192c;
}

SCSS

$little-blue-heron: #3c4378;
$little-blue-heron-rgb: 60, 67, 120;
$little-blue-heron-light: mix(#fff, $little-blue-heron, 20%);
$little-blue-heron-dark: mix(#000, $little-blue-heron, 20%);

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