Victorian Plum

CSS

:root {
  --victorian-plum: #8e6278;
  --victorian-plum-rgb: 142 98 120;
  --victorian-plum-oklch: oklch(0.549 0.065 348);
}

.element {
  color: var(--victorian-plum);
  background-color: hsl(330 18% 47%);
  border-color: oklch(0.549 0.065 348);
}

Tailwind CSS v4

@theme {
  --color-victorian-plum: #8e6278;
  --color-victorian-plum-50: #ffeef8;
  --color-victorian-plum-100: #fae0eb;
  --color-victorian-plum-200: #ebcad8;
  --color-victorian-plum-300: #d2aabc;
  --color-victorian-plum-400: #bc8fa5;
  --color-victorian-plum-500: #a7758e;
  --color-victorian-plum-600: #8d6378;
  --color-victorian-plum-700: #714f60;
  --color-victorian-plum-800: #533947;
  --color-victorian-plum-900: #3a2731;
  --color-victorian-plum-950: #24151d;
}

SCSS

$victorian-plum: #8e6278;
$victorian-plum-rgb: 142, 98, 120;
$victorian-plum-light: mix(#fff, $victorian-plum, 20%);
$victorian-plum-dark: mix(#000, $victorian-plum, 20%);

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