Blue Tulip

CSS

:root {
  --blue-tulip: #5c4671;
  --blue-tulip-rgb: 92 70 113;
  --blue-tulip-oklch: oklch(0.436 0.074 307.1);
}

.element {
  color: var(--blue-tulip);
  background-color: hsl(271 23% 36%);
  border-color: oklch(0.436 0.074 307.1);
}

Tailwind CSS v4

@theme {
  --color-blue-tulip: #5c4671;
  --color-blue-tulip-50: #fbf0ff;
  --color-blue-tulip-100: #efe2fb;
  --color-blue-tulip-200: #ddcced;
  --color-blue-tulip-300: #c2aed5;
  --color-blue-tulip-400: #aa93c1;
  --color-blue-tulip-500: #9379ad;
  --color-blue-tulip-600: #7c6792;
  --color-blue-tulip-700: #635275;
  --color-blue-tulip-800: #483c57;
  --color-blue-tulip-900: #32293d;
  --color-blue-tulip-950: #1e1726;
}

SCSS

$blue-tulip: #5c4671;
$blue-tulip-rgb: 92, 70, 113;
$blue-tulip-light: mix(#fff, $blue-tulip, 20%);
$blue-tulip-dark: mix(#000, $blue-tulip, 20%);

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