British Mauve

CSS

:root {
  --british-mauve: #35427b;
  --british-mauve-rgb: 53 66 123;
  --british-mauve-oklch: oklch(0.398 0.097 271.7);
}

.element {
  color: var(--british-mauve);
  background-color: hsl(229 40% 35%);
  border-color: oklch(0.398 0.097 271.7);
}

Tailwind CSS v4

@theme {
  --color-british-mauve: #35427b;
  --color-british-mauve-50: #ecf4ff;
  --color-british-mauve-100: #dde6ff;
  --color-british-mauve-200: #c7d2ff;
  --color-british-mauve-300: #a7b4ea;
  --color-british-mauve-400: #8a9bd8;
  --color-british-mauve-500: #6f82c7;
  --color-british-mauve-600: #5e6ea8;
  --color-british-mauve-700: #4b5887;
  --color-british-mauve-800: #354064;
  --color-british-mauve-900: #242c46;
  --color-british-mauve-950: #13192e;
}

SCSS

$british-mauve: #35427b;
$british-mauve-rgb: 53, 66, 123;
$british-mauve-light: mix(#fff, $british-mauve, 20%);
$british-mauve-dark: mix(#000, $british-mauve, 20%);

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