Blue Regal

CSS

:root {
  --blue-regal: #303048;
  --blue-regal-rgb: 48 48 72;
  --blue-regal-oklch: oklch(0.32 0.042 283.7);
}

.element {
  color: var(--blue-regal);
  background-color: hsl(240 20% 24%);
  border-color: oklch(0.32 0.042 283.7);
}

Tailwind CSS v4

@theme {
  --color-blue-regal: #303048;
  --color-blue-regal-50: #f4f4ff;
  --color-blue-regal-100: #e6e6f6;
  --color-blue-regal-200: #d2d2e6;
  --color-blue-regal-300: #b5b5cd;
  --color-blue-regal-400: #9b9cb7;
  --color-blue-regal-500: #8283a2;
  --color-blue-regal-600: #6e6f89;
  --color-blue-regal-700: #58596e;
  --color-blue-regal-800: #404151;
  --color-blue-regal-900: #2c2d38;
  --color-blue-regal-950: #191a23;
}

SCSS

$blue-regal: #303048;
$blue-regal-rgb: 48, 48, 72;
$blue-regal-light: mix(#fff, $blue-regal, 20%);
$blue-regal-dark: mix(#000, $blue-regal, 20%);

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