Blue Sari

CSS

:root {
  --blue-sari: #666a76;
  --blue-sari-rgb: 102 106 118;
  --blue-sari-oklch: oklch(0.525 0.019 271);
}

.element {
  color: var(--blue-sari);
  background-color: hsl(225 7% 43%);
  border-color: oklch(0.525 0.019 271);
}

Tailwind CSS v4

@theme {
  --color-blue-sari: #666a76;
  --color-blue-sari-50: #f3f5fb;
  --color-blue-sari-100: #e5e8ef;
  --color-blue-sari-200: #d1d4dd;
  --color-blue-sari-300: #b4b7c2;
  --color-blue-sari-400: #9a9eaa;
  --color-blue-sari-500: #818694;
  --color-blue-sari-600: #6d717d;
  --color-blue-sari-700: #575b64;
  --color-blue-sari-800: #3f4249;
  --color-blue-sari-900: #2c2e33;
  --color-blue-sari-950: #191a1f;
}

SCSS

$blue-sari: #666a76;
$blue-sari-rgb: 102, 106, 118;
$blue-sari-light: mix(#fff, $blue-sari, 20%);
$blue-sari-dark: mix(#000, $blue-sari, 20%);

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