Virginia Blue

CSS

:root {
  --virginia-blue: #b7c3d7;
  --virginia-blue-rgb: 183 195 215;
  --virginia-blue-oklch: oklch(0.814 0.031 260.7);
}

.element {
  color: var(--virginia-blue);
  background-color: hsl(218 29% 78%);
  border-color: oklch(0.814 0.031 260.7);
}

Tailwind CSS v4

@theme {
  --color-virginia-blue: #b7c3d7;
  --color-virginia-blue-50: #f0f5fe;
  --color-virginia-blue-100: #e2e8f3;
  --color-virginia-blue-200: #cdd5e2;
  --color-virginia-blue-300: #afb8c8;
  --color-virginia-blue-400: #949fb1;
  --color-virginia-blue-500: #7b879b;
  --color-virginia-blue-600: #687283;
  --color-virginia-blue-700: #535b69;
  --color-virginia-blue-800: #3c434d;
  --color-virginia-blue-900: #292e36;
  --color-virginia-blue-950: #171b21;
}

SCSS

$virginia-blue: #b7c3d7;
$virginia-blue-rgb: 183, 195, 215;
$virginia-blue-light: mix(#fff, $virginia-blue, 20%);
$virginia-blue-dark: mix(#000, $virginia-blue, 20%);

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