Peach Encounter

CSS

:root {
  --peach-encounter: #febc96;
  --peach-encounter-rgb: 254 188 150;
  --peach-encounter-oklch: oklch(0.847 0.092 51);
}

.element {
  color: var(--peach-encounter);
  background-color: hsl(22 98% 79%);
  border-color: oklch(0.847 0.092 51);
}

Tailwind CSS v4

@theme {
  --color-peach-encounter: #febc96;
  --color-peach-encounter-50: #ffefdd;
  --color-peach-encounter-100: #ffe0cc;
  --color-peach-encounter-200: #f5cab0;
  --color-peach-encounter-300: #deab8c;
  --color-peach-encounter-400: #ca8f6c;
  --color-peach-encounter-500: #b6744b;
  --color-peach-encounter-600: #9a6240;
  --color-peach-encounter-700: #7c4e33;
  --color-peach-encounter-800: #5c3825;
  --color-peach-encounter-900: #402718;
  --color-peach-encounter-950: #291509;
}

SCSS

$peach-encounter: #febc96;
$peach-encounter-rgb: 254, 188, 150;
$peach-encounter-light: mix(#fff, $peach-encounter, 20%);
$peach-encounter-dark: mix(#000, $peach-encounter, 20%);

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