Blue Beret

CSS

:root {
  --blue-beret: #40638e;
  --blue-beret-rgb: 64 99 142;
  --blue-beret-oklch: oklch(0.493 0.08 254.2);
}

.element {
  color: var(--blue-beret);
  background-color: hsl(213 38% 40%);
  border-color: oklch(0.493 0.08 254.2);
}

Tailwind CSS v4

@theme {
  --color-blue-beret: #40638e;
  --color-blue-beret-50: #e7f7ff;
  --color-blue-beret-100: #d7eaff;
  --color-blue-beret-200: #bed6f7;
  --color-blue-beret-300: #9dbae1;
  --color-blue-beret-400: #7ea1ce;
  --color-blue-beret-500: #6089bb;
  --color-blue-beret-600: #52749e;
  --color-blue-beret-700: #415d7e;
  --color-blue-beret-800: #2e445e;
  --color-blue-beret-900: #1f2f42;
  --color-blue-beret-950: #0e1b2a;
}

SCSS

$blue-beret: #40638e;
$blue-beret-rgb: 64, 99, 142;
$blue-beret-light: mix(#fff, $blue-beret, 20%);
$blue-beret-dark: mix(#000, $blue-beret, 20%);

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