Blue Ballad

CSS

:root {
  --blue-ballad: #7498bd;
  --blue-ballad-rgb: 116 152 189;
  --blue-ballad-oklch: oklch(0.667 0.068 249.6);
}

.element {
  color: var(--blue-ballad);
  background-color: hsl(210 36% 60%);
  border-color: oklch(0.667 0.068 249.6);
}

Tailwind CSS v4

@theme {
  --color-blue-ballad: #7498bd;
  --color-blue-ballad-50: #e7f7ff;
  --color-blue-ballad-100: #d8eaff;
  --color-blue-ballad-200: #c0d7f1;
  --color-blue-ballad-300: #9ebada;
  --color-blue-ballad-400: #80a2c6;
  --color-blue-ballad-500: #638ab2;
  --color-blue-ballad-600: #547596;
  --color-blue-ballad-700: #435d79;
  --color-blue-ballad-800: #2f4559;
  --color-blue-ballad-900: #202f3e;
  --color-blue-ballad-950: #0f1c27;
}

SCSS

$blue-ballad: #7498bd;
$blue-ballad-rgb: 116, 152, 189;
$blue-ballad-light: mix(#fff, $blue-ballad, 20%);
$blue-ballad-dark: mix(#000, $blue-ballad, 20%);

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