Jacaranda

CSS

:root {
  --jacaranda: #f9d7ee;
  --jacaranda-rgb: 249 215 238;
  --jacaranda-oklch: oklch(0.914 0.048 337.9);
}

.element {
  color: var(--jacaranda);
  background-color: hsl(319 74% 91%);
  border-color: oklch(0.914 0.048 337.9);
}

Tailwind CSS v4

@theme {
  --color-jacaranda: #f9d7ee;
  --color-jacaranda-50: #fff0f9;
  --color-jacaranda-100: #f4e2ed;
  --color-jacaranda-200: #e3cddb;
  --color-jacaranda-300: #c9aebf;
  --color-jacaranda-400: #b294a8;
  --color-jacaranda-500: #9c7a91;
  --color-jacaranda-600: #84687b;
  --color-jacaranda-700: #6a5362;
  --color-jacaranda-800: #4d3c49;
  --color-jacaranda-900: #362932;
  --color-jacaranda-950: #21171e;
}

SCSS

$jacaranda: #f9d7ee;
$jacaranda-rgb: 249, 215, 238;
$jacaranda-light: mix(#fff, $jacaranda, 20%);
$jacaranda-dark: mix(#000, $jacaranda, 20%);

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