Sand Verbena

CSS

:root {
  --sand-verbena: #9d89bd;
  --sand-verbena-rgb: 157 137 189;
  --sand-verbena-oklch: oklch(0.667 0.079 301.9);
}

.element {
  color: var(--sand-verbena);
  background-color: hsl(263 28% 64%);
  border-color: oklch(0.667 0.079 301.9);
}

Tailwind CSS v4

@theme {
  --color-sand-verbena: #9d89bd;
  --color-sand-verbena-50: #faf0ff;
  --color-sand-verbena-100: #ede2fe;
  --color-sand-verbena-200: #dbcdf0;
  --color-sand-verbena-300: #c0aed9;
  --color-sand-verbena-400: #a794c6;
  --color-sand-verbena-500: #907ab2;
  --color-sand-verbena-600: #7a6796;
  --color-sand-verbena-700: #615279;
  --color-sand-verbena-800: #463c5a;
  --color-sand-verbena-900: #31293f;
  --color-sand-verbena-950: #1d1728;
}

SCSS

$sand-verbena: #9d89bd;
$sand-verbena-rgb: 157, 137, 189;
$sand-verbena-light: mix(#fff, $sand-verbena, 20%);
$sand-verbena-dark: mix(#000, $sand-verbena, 20%);

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