Palatinate Blue

CSS

:root {
  --palatinate-blue: #273be2;
  --palatinate-blue-rgb: 39 59 226;
  --palatinate-blue-oklch: oklch(0.471 0.247 268);
}

.element {
  color: var(--palatinate-blue);
  background-color: hsl(234 76% 52%);
  border-color: oklch(0.471 0.247 268);
}

Tailwind CSS v4

@theme {
  --color-palatinate-blue: #273be2;
  --color-palatinate-blue-50: #d9f2ff;
  --color-palatinate-blue-100: #c8e4ff;
  --color-palatinate-blue-200: #abceff;
  --color-palatinate-blue-300: #87acff;
  --color-palatinate-blue-400: #618eff;
  --color-palatinate-blue-500: #446bff;
  --color-palatinate-blue-600: #3a5bf7;
  --color-palatinate-blue-700: #2e49c7;
  --color-palatinate-blue-800: #1a3696;
  --color-palatinate-blue-900: #10256a;
  --color-palatinate-blue-950: #05124a;
}

SCSS

$palatinate-blue: #273be2;
$palatinate-blue-rgb: 39, 59, 226;
$palatinate-blue-light: mix(#fff, $palatinate-blue, 20%);
$palatinate-blue-dark: mix(#000, $palatinate-blue, 20%);

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