Fruit Red

CSS

:root {
  --fruit-red: #fa8970;
  --fruit-red-rgb: 250 137 112;
  --fruit-red-oklch: oklch(0.748 0.143 33.6);
}

.element {
  color: var(--fruit-red);
  background-color: hsl(11 93% 71%);
  border-color: oklch(0.748 0.143 33.6);
}

Tailwind CSS v4

@theme {
  --color-fruit-red: #fa8970;
  --color-fruit-red-50: #ffe8da;
  --color-fruit-red-100: #ffd8c8;
  --color-fruit-red-200: #ffbfab;
  --color-fruit-red-300: #f79c84;
  --color-fruit-red-400: #e67c65;
  --color-fruit-red-500: #d35c42;
  --color-fruit-red-600: #b34e39;
  --color-fruit-red-700: #903e2d;
  --color-fruit-red-800: #6b2c21;
  --color-fruit-red-900: #4b1e16;
  --color-fruit-red-950: #310d07;
}

SCSS

$fruit-red: #fa8970;
$fruit-red-rgb: 250, 137, 112;
$fruit-red-light: mix(#fff, $fruit-red, 20%);
$fruit-red-dark: mix(#000, $fruit-red, 20%);

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