#C78D74

CSS

:root {
  --baker-s-dream: #c78d74;
  --baker-s-dream-rgb: 199 141 116;
  --baker-s-dream-oklch: oklch(0.694 0.08 44.2);
}

.element {
  color: var(--baker-s-dream);
  background-color: hsl(18 43% 62%);
  border-color: oklch(0.694 0.08 44.2);
}

Tailwind CSS v4

@theme {
  --color-baker-s-dream: #c78d74;
  --color-baker-s-dream-50: #ffefe2;
  --color-baker-s-dream-100: #ffe0d2;
  --color-baker-s-dream-200: #f2cbb8;
  --color-baker-s-dream-300: #dbab95;
  --color-baker-s-dream-400: #c79078;
  --color-baker-s-dream-500: #b3755a;
  --color-baker-s-dream-600: #97634c;
  --color-baker-s-dream-700: #794f3d;
  --color-baker-s-dream-800: #5a392c;
  --color-baker-s-dream-900: #3f271e;
  --color-baker-s-dream-950: #28150e;
}

SCSS

$baker-s-dream: #c78d74;
$baker-s-dream-rgb: 199, 141, 116;
$baker-s-dream-light: mix(#fff, $baker-s-dream, 20%);
$baker-s-dream-dark: mix(#000, $baker-s-dream, 20%);

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