Berry Good

CSS

:root {
  --berry-good: #edc3c5;
  --berry-good-rgb: 237 195 197;
  --berry-good-oklch: oklch(0.854 0.048 14.9);
}

.element {
  color: var(--berry-good);
  background-color: hsl(357 54% 85%);
  border-color: oklch(0.854 0.048 14.9);
}

Tailwind CSS v4

@theme {
  --color-berry-good: #edc3c5;
  --color-berry-good-50: #fff0f0;
  --color-berry-good-100: #f8e2e2;
  --color-berry-good-200: #e8cccd;
  --color-berry-good-300: #cfaeaf;
  --color-berry-good-400: #b99395;
  --color-berry-good-500: #a47a7c;
  --color-berry-good-600: #8a6769;
  --color-berry-good-700: #6f5254;
  --color-berry-good-800: #523c3e;
  --color-berry-good-900: #39292a;
  --color-berry-good-950: #231718;
}

SCSS

$berry-good: #edc3c5;
$berry-good-rgb: 237, 195, 197;
$berry-good-light: mix(#fff, $berry-good, 20%);
$berry-good-dark: mix(#000, $berry-good, 20%);

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