Nectarine

CSS

:root {
  --nectarine: #ff8656;
  --nectarine-rgb: 255 134 86;
  --nectarine-oklch: oklch(0.746 0.16 41.7);
}

.element {
  color: var(--nectarine);
  background-color: hsl(17 100% 67%);
  border-color: oklch(0.746 0.16 41.7);
}

Tailwind CSS v4

@theme {
  --color-nectarine: #ff8656;
  --color-nectarine-50: #ffe7d1;
  --color-nectarine-100: #ffd7bd;
  --color-nectarine-200: #ffbe9c;
  --color-nectarine-300: #fb9b72;
  --color-nectarine-400: #eb7a4d;
  --color-nectarine-500: #d9581b;
  --color-nectarine-600: #b74b1a;
  --color-nectarine-700: #933c15;
  --color-nectarine-800: #6e2a10;
  --color-nectarine-900: #4e1c0a;
  --color-nectarine-950: #330c01;
}

SCSS

$nectarine: #ff8656;
$nectarine-rgb: 255, 134, 86;
$nectarine-light: mix(#fff, $nectarine, 20%);
$nectarine-dark: mix(#000, $nectarine, 20%);

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