Date Fruit Brown

CSS

:root {
  --date-fruit-brown: #af642b;
  --date-fruit-brown-rgb: 175 100 43;
  --date-fruit-brown-oklch: oklch(0.578 0.12 54.5);
}

.element {
  color: var(--date-fruit-brown);
  background-color: hsl(26 61% 43%);
  border-color: oklch(0.578 0.12 54.5);
}

Tailwind CSS v4

@theme {
  --color-date-fruit-brown: #af642b;
  --color-date-fruit-brown-50: #ffedd5;
  --color-date-fruit-brown-100: #ffdfc2;
  --color-date-fruit-brown-200: #fdc8a3;
  --color-date-fruit-brown-300: #e7a87a;
  --color-date-fruit-brown-400: #d58a56;
  --color-date-fruit-brown-500: #c26e2d;
  --color-date-fruit-brown-600: #a35d28;
  --color-date-fruit-brown-700: #834a1f;
  --color-date-fruit-brown-800: #623516;
  --color-date-fruit-brown-900: #45240e;
  --color-date-fruit-brown-950: #2c1302;
}

SCSS

$date-fruit-brown: #af642b;
$date-fruit-brown-rgb: 175, 100, 43;
$date-fruit-brown-light: mix(#fff, $date-fruit-brown, 20%);
$date-fruit-brown-dark: mix(#000, $date-fruit-brown, 20%);

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