Blue Funk

CSS

:root {
  --blue-funk: #2d4470;
  --blue-funk-rgb: 45 68 112;
  --blue-funk-oklch: oklch(0.39 0.08 262.4);
}

.element {
  color: var(--blue-funk);
  background-color: hsl(219 43% 31%);
  border-color: oklch(0.39 0.08 262.4);
}

Tailwind CSS v4

@theme {
  --color-blue-funk: #2d4470;
  --color-blue-funk-50: #eaf6ff;
  --color-blue-funk-100: #dbe8ff;
  --color-blue-funk-200: #c3d5f8;
  --color-blue-funk-300: #a3b8e2;
  --color-blue-funk-400: #859fcf;
  --color-blue-funk-500: #6986bc;
  --color-blue-funk-600: #59729f;
  --color-blue-funk-700: #475b7f;
  --color-blue-funk-800: #32435e;
  --color-blue-funk-900: #222e42;
  --color-blue-funk-950: #111b2a;
}

SCSS

$blue-funk: #2d4470;
$blue-funk-rgb: 45, 68, 112;
$blue-funk-light: mix(#fff, $blue-funk, 20%);
$blue-funk-dark: mix(#000, $blue-funk, 20%);

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