Denim Tradition

CSS

:root {
  --denim-tradition: #7f97b5;
  --denim-tradition-rgb: 127 151 181;
  --denim-tradition-oklch: oklch(0.669 0.052 254.2);
}

.element {
  color: var(--denim-tradition);
  background-color: hsl(213 27% 60%);
  border-color: oklch(0.669 0.052 254.2);
}

Tailwind CSS v4

@theme {
  --color-denim-tradition: #7f97b5;
  --color-denim-tradition-50: #ecf6ff;
  --color-denim-tradition-100: #dde9fa;
  --color-denim-tradition-200: #c6d6eb;
  --color-denim-tradition-300: #a6b9d3;
  --color-denim-tradition-400: #8aa1bd;
  --color-denim-tradition-500: #6e88a9;
  --color-denim-tradition-600: #5e738f;
  --color-denim-tradition-700: #4b5c72;
  --color-denim-tradition-800: #354454;
  --color-denim-tradition-900: #242f3b;
  --color-denim-tradition-950: #131b25;
}

SCSS

$denim-tradition: #7f97b5;
$denim-tradition-rgb: 127, 151, 181;
$denim-tradition-light: mix(#fff, $denim-tradition, 20%);
$denim-tradition-dark: mix(#000, $denim-tradition, 20%);

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