Ripe Plum

CSS

:root {
  --ripe-plum: #410056;
  --ripe-plum-rgb: 65 0 86;
  --ripe-plum-oklch: oklch(0.281 0.138 315);
}

.element {
  color: var(--ripe-plum);
  background-color: hsl(285 100% 17%);
  border-color: oklch(0.281 0.138 315);
}

Tailwind CSS v4

@theme {
  --color-ripe-plum: #410056;
  --color-ripe-plum-50: #ffeaff;
  --color-ripe-plum-100: #fbdaff;
  --color-ripe-plum-200: #edc2fc;
  --color-ripe-plum-300: #d4a1e6;
  --color-ripe-plum-400: #bd84d6;
  --color-ripe-plum-500: #a866c4;
  --color-ripe-plum-600: #8e57a6;
  --color-ripe-plum-700: #724585;
  --color-ripe-plum-800: #533264;
  --color-ripe-plum-900: #3a2246;
  --color-ripe-plum-950: #24112e;
}

SCSS

$ripe-plum: #410056;
$ripe-plum-rgb: 65, 0, 86;
$ripe-plum-light: mix(#fff, $ripe-plum, 20%);
$ripe-plum-dark: mix(#000, $ripe-plum, 20%);

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