Forest Fruit Pink

CSS

:root {
  --forest-fruit-pink: #68393b;
  --forest-fruit-pink-rgb: 104 57 59;
  --forest-fruit-pink-oklch: oklch(0.404 0.067 17.8);
}

.element {
  color: var(--forest-fruit-pink);
  background-color: hsl(357 29% 32%);
  border-color: oklch(0.404 0.067 17.8);
}

Tailwind CSS v4

@theme {
  --color-forest-fruit-pink: #68393b;
  --color-forest-fruit-pink-50: #ffeeed;
  --color-forest-fruit-pink-100: #fee0df;
  --color-forest-fruit-pink-200: #f0cac9;
  --color-forest-fruit-pink-300: #d8aaa9;
  --color-forest-fruit-pink-400: #c38f90;
  --color-forest-fruit-pink-500: #ae7476;
  --color-forest-fruit-pink-600: #936364;
  --color-forest-fruit-pink-700: #764f50;
  --color-forest-fruit-pink-800: #57393b;
  --color-forest-fruit-pink-900: #3d2728;
  --color-forest-fruit-pink-950: #261516;
}

SCSS

$forest-fruit-pink: #68393b;
$forest-fruit-pink-rgb: 104, 57, 59;
$forest-fruit-pink-light: mix(#fff, $forest-fruit-pink, 20%);
$forest-fruit-pink-dark: mix(#000, $forest-fruit-pink, 20%);

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