Sherbet Fruit

CSS

:root {
  --sherbet-fruit: #f8c8bb;
  --sherbet-fruit-rgb: 248 200 187;
  --sherbet-fruit-oklch: oklch(0.871 0.058 35.6);
}

.element {
  color: var(--sherbet-fruit);
  background-color: hsl(13 81% 85%);
  border-color: oklch(0.871 0.058 35.6);
}

Tailwind CSS v4

@theme {
  --color-sherbet-fruit: #f8c8bb;
  --color-sherbet-fruit-50: #fff0ea;
  --color-sherbet-fruit-100: #fae2da;
  --color-sherbet-fruit-200: #ebccc3;
  --color-sherbet-fruit-300: #d3aea3;
  --color-sherbet-fruit-400: #be9387;
  --color-sherbet-fruit-500: #a9796c;
  --color-sherbet-fruit-600: #8f665c;
  --color-sherbet-fruit-700: #725249;
  --color-sherbet-fruit-800: #553b35;
  --color-sherbet-fruit-900: #3b2924;
  --color-sherbet-fruit-950: #251613;
}

SCSS

$sherbet-fruit: #f8c8bb;
$sherbet-fruit-rgb: 248, 200, 187;
$sherbet-fruit-light: mix(#fff, $sherbet-fruit, 20%);
$sherbet-fruit-dark: mix(#000, $sherbet-fruit, 20%);

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