Orange Pecan

CSS

:root {
  --orange-pecan: #f49975;
  --orange-pecan-rgb: 244 153 117;
  --orange-pecan-oklch: oklch(0.768 0.12 42.2);
}

.element {
  color: var(--orange-pecan);
  background-color: hsl(17 85% 71%);
  border-color: oklch(0.768 0.12 42.2);
}

Tailwind CSS v4

@theme {
  --color-orange-pecan: #f49975;
  --color-orange-pecan-50: #ffebda;
  --color-orange-pecan-100: #ffdcc8;
  --color-orange-pecan-200: #ffc4ab;
  --color-orange-pecan-300: #eca484;
  --color-orange-pecan-400: #da8564;
  --color-orange-pecan-500: #c76841;
  --color-orange-pecan-600: #a85838;
  --color-orange-pecan-700: #87462c;
  --color-orange-pecan-800: #653220;
  --color-orange-pecan-900: #472215;
  --color-orange-pecan-950: #2e1107;
}

SCSS

$orange-pecan: #f49975;
$orange-pecan-rgb: 244, 153, 117;
$orange-pecan-light: mix(#fff, $orange-pecan, 20%);
$orange-pecan-dark: mix(#000, $orange-pecan, 20%);

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