Blue Suede Shoes

CSS

:root {
  --blue-suede-shoes: #484b62;
  --blue-suede-shoes-rgb: 72 75 98;
  --blue-suede-shoes-oklch: oklch(0.419 0.038 278.8);
}

.element {
  color: var(--blue-suede-shoes);
  background-color: hsl(233 15% 33%);
  border-color: oklch(0.419 0.038 278.8);
}

Tailwind CSS v4

@theme {
  --color-blue-suede-shoes: #484b62;
  --color-blue-suede-shoes-50: #f3f4ff;
  --color-blue-suede-shoes-100: #e5e7f5;
  --color-blue-suede-shoes-200: #d1d3e5;
  --color-blue-suede-shoes-300: #b3b6cb;
  --color-blue-suede-shoes-400: #999db5;
  --color-blue-suede-shoes-500: #8084a0;
  --color-blue-suede-shoes-600: #6c7087;
  --color-blue-suede-shoes-700: #57596c;
  --color-blue-suede-shoes-800: #3f4150;
  --color-blue-suede-shoes-900: #2b2d38;
  --color-blue-suede-shoes-950: #181a22;
}

SCSS

$blue-suede-shoes: #484b62;
$blue-suede-shoes-rgb: 72, 75, 98;
$blue-suede-shoes-light: mix(#fff, $blue-suede-shoes, 20%);
$blue-suede-shoes-dark: mix(#000, $blue-suede-shoes, 20%);

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