Favoured One

CSS

:root {
  --favoured-one: #fae6cc;
  --favoured-one-rgb: 250 230 204;
  --favoured-one-oklch: oklch(0.934 0.041 74.5);
}

.element {
  color: var(--favoured-one);
  background-color: hsl(34 82% 89%);
  border-color: oklch(0.934 0.041 74.5);
}

Tailwind CSS v4

@theme {
  --color-favoured-one: #fae6cc;
  --color-favoured-one-50: #fcf4e9;
  --color-favoured-one-100: #f0e6d9;
  --color-favoured-one-200: #ded2c1;
  --color-favoured-one-300: #c4b5a1;
  --color-favoured-one-400: #ad9b84;
  --color-favoured-one-500: #978368;
  --color-favoured-one-600: #7f6f59;
  --color-favoured-one-700: #665847;
  --color-favoured-one-800: #4b4033;
  --color-favoured-one-900: #342c23;
  --color-favoured-one-950: #201912;
}

SCSS

$favoured-one: #fae6cc;
$favoured-one-rgb: 250, 230, 204;
$favoured-one-light: mix(#fff, $favoured-one, 20%);
$favoured-one-dark: mix(#000, $favoured-one, 20%);

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