Mixed Fruit

CSS

:root {
  --mixed-fruit: #f9bab2;
  --mixed-fruit-rgb: 249 186 178;
  --mixed-fruit-oklch: oklch(0.844 0.074 27);
}

.element {
  color: var(--mixed-fruit);
  background-color: hsl(7 86% 84%);
  border-color: oklch(0.844 0.074 27);
}

Tailwind CSS v4

@theme {
  --color-mixed-fruit: #f9bab2;
  --color-mixed-fruit-50: #ffeee9;
  --color-mixed-fruit-100: #ffdfda;
  --color-mixed-fruit-200: #f3c9c2;
  --color-mixed-fruit-300: #dbaaa2;
  --color-mixed-fruit-400: #c78e87;
  --color-mixed-fruit-500: #b2736b;
  --color-mixed-fruit-600: #97615b;
  --color-mixed-fruit-700: #794e49;
  --color-mixed-fruit-800: #5a3835;
  --color-mixed-fruit-900: #3f2624;
  --color-mixed-fruit-950: #281513;
}

SCSS

$mixed-fruit: #f9bab2;
$mixed-fruit-rgb: 249, 186, 178;
$mixed-fruit-light: mix(#fff, $mixed-fruit, 20%);
$mixed-fruit-dark: mix(#000, $mixed-fruit, 20%);

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