Stone Fruit

CSS

:root {
  --stone-fruit: #f2a28c;
  --stone-fruit-rgb: 242 162 140;
  --stone-fruit-oklch: oklch(0.786 0.101 36.1);
}

.element {
  color: var(--stone-fruit);
  background-color: hsl(13 80% 75%);
  border-color: oklch(0.786 0.101 36.1);
}

Tailwind CSS v4

@theme {
  --color-stone-fruit: #f2a28c;
  --color-stone-fruit-50: #ffece1;
  --color-stone-fruit-100: #ffddd0;
  --color-stone-fruit-200: #fcc6b5;
  --color-stone-fruit-300: #e5a692;
  --color-stone-fruit-400: #d38975;
  --color-stone-fruit-500: #bf6c56;
  --color-stone-fruit-600: #a15c49;
  --color-stone-fruit-700: #82493a;
  --color-stone-fruit-800: #60352a;
  --color-stone-fruit-900: #44241d;
  --color-stone-fruit-950: #2b120d;
}

SCSS

$stone-fruit: #f2a28c;
$stone-fruit-rgb: 242, 162, 140;
$stone-fruit-light: mix(#fff, $stone-fruit, 20%);
$stone-fruit-dark: mix(#000, $stone-fruit, 20%);

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