Sir Edmund

CSS

:root {
  --sir-edmund: #20415d;
  --sir-edmund-rgb: 32 65 93;
  --sir-edmund-oklch: oklch(0.364 0.062 246.2);
}

.element {
  color: var(--sir-edmund);
  background-color: hsl(208 49% 25%);
  border-color: oklch(0.364 0.062 246.2);
}

Tailwind CSS v4

@theme {
  --color-sir-edmund: #20415d;
  --color-sir-edmund-50: #e8f7ff;
  --color-sir-edmund-100: #d8eafc;
  --color-sir-edmund-200: #c0d7ee;
  --color-sir-edmund-300: #9fbbd6;
  --color-sir-edmund-400: #81a3c2;
  --color-sir-edmund-500: #648bad;
  --color-sir-edmund-600: #557592;
  --color-sir-edmund-700: #435e75;
  --color-sir-edmund-800: #304557;
  --color-sir-edmund-900: #20303c;
  --color-sir-edmund-950: #101c26;
}

SCSS

$sir-edmund: #20415d;
$sir-edmund-rgb: 32, 65, 93;
$sir-edmund-light: mix(#fff, $sir-edmund, 20%);
$sir-edmund-dark: mix(#000, $sir-edmund, 20%);

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