Nougat Brown

CSS

:root {
  --nougat-brown: #7c503f;
  --nougat-brown-rgb: 124 80 63;
  --nougat-brown-oklch: oklch(0.476 0.065 41.9);
}

.element {
  color: var(--nougat-brown);
  background-color: hsl(17 33% 37%);
  border-color: oklch(0.476 0.065 41.9);
}

Tailwind CSS v4

@theme {
  --color-nougat-brown: #7c503f;
  --color-nougat-brown-50: #fff0e6;
  --color-nougat-brown-100: #fce2d7;
  --color-nougat-brown-200: #eeccbe;
  --color-nougat-brown-300: #d5ad9d;
  --color-nougat-brown-400: #c19280;
  --color-nougat-brown-500: #ac7864;
  --color-nougat-brown-600: #916655;
  --color-nougat-brown-700: #745144;
  --color-nougat-brown-800: #563b31;
  --color-nougat-brown-900: #3c2821;
  --color-nougat-brown-950: #261611;
}

SCSS

$nougat-brown: #7c503f;
$nougat-brown-rgb: 124, 80, 63;
$nougat-brown-light: mix(#fff, $nougat-brown, 20%);
$nougat-brown-dark: mix(#000, $nougat-brown, 20%);

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