Blue Fantastic

CSS

:root {
  --blue-fantastic: #2c3b4d;
  --blue-fantastic-rgb: 44 59 77;
  --blue-fantastic-oklch: oklch(0.347 0.037 253.4);
}

.element {
  color: var(--blue-fantastic);
  background-color: hsl(213 27% 24%);
  border-color: oklch(0.347 0.037 253.4);
}

Tailwind CSS v4

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

SCSS

$blue-fantastic: #2c3b4d;
$blue-fantastic-rgb: 44, 59, 77;
$blue-fantastic-light: mix(#fff, $blue-fantastic, 20%);
$blue-fantastic-dark: mix(#000, $blue-fantastic, 20%);

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