Blue Suede

CSS

:root {
  --blue-suede: #687b92;
  --blue-suede-rgb: 104 123 146;
  --blue-suede-oklch: oklch(0.576 0.042 253.4);
}

.element {
  color: var(--blue-suede);
  background-color: hsl(213 17% 49%);
  border-color: oklch(0.576 0.042 253.4);
}

Tailwind CSS v4

@theme {
  --color-blue-suede: #687b92;
  --color-blue-suede-50: #edf6ff;
  --color-blue-suede-100: #dfe9f6;
  --color-blue-suede-200: #c9d5e6;
  --color-blue-suede-300: #a9b9cd;
  --color-blue-suede-400: #8da0b7;
  --color-blue-suede-500: #7388a2;
  --color-blue-suede-600: #617389;
  --color-blue-suede-700: #4e5c6e;
  --color-blue-suede-800: #384451;
  --color-blue-suede-900: #262f38;
  --color-blue-suede-950: #151b23;
}

SCSS

$blue-suede: #687b92;
$blue-suede-rgb: 104, 123, 146;
$blue-suede-light: mix(#fff, $blue-suede, 20%);
$blue-suede-dark: mix(#000, $blue-suede, 20%);

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