Taste of Berry

CSS

:root {
  --taste-of-berry: #c8a3b8;
  --taste-of-berry-rgb: 200 163 184;
  --taste-of-berry-oklch: oklch(0.755 0.052 343.3);
}

.element {
  color: var(--taste-of-berry);
  background-color: hsl(326 25% 71%);
  border-color: oklch(0.755 0.052 343.3);
}

Tailwind CSS v4

@theme {
  --color-taste-of-berry: #c8a3b8;
  --color-taste-of-berry-50: #fff0f8;
  --color-taste-of-berry-100: #f6e1ec;
  --color-taste-of-berry-200: #e6ccd9;
  --color-taste-of-berry-300: #ccadbd;
  --color-taste-of-berry-400: #b593a6;
  --color-taste-of-berry-500: #9f798f;
  --color-taste-of-berry-600: #876679;
  --color-taste-of-berry-700: #6c5261;
  --color-taste-of-berry-800: #4f3b48;
  --color-taste-of-berry-900: #372932;
  --color-taste-of-berry-950: #22171e;
}

SCSS

$taste-of-berry: #c8a3b8;
$taste-of-berry-rgb: 200, 163, 184;
$taste-of-berry-light: mix(#fff, $taste-of-berry, 20%);
$taste-of-berry-dark: mix(#000, $taste-of-berry, 20%);

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