Golgfag Brown

CSS

:root {
  --golgfag-brown: #d77e70;
  --golgfag-brown-rgb: 215 126 112;
  --golgfag-brown-oklch: oklch(0.686 0.113 29.8);
}

.element {
  color: var(--golgfag-brown);
  background-color: hsl(8 56% 64%);
  border-color: oklch(0.686 0.113 29.8);
}

Tailwind CSS v4

@theme {
  --color-golgfag-brown: #d77e70;
  --color-golgfag-brown-50: #ffeae1;
  --color-golgfag-brown-100: #ffdbd1;
  --color-golgfag-brown-200: #ffc3b6;
  --color-golgfag-brown-300: #eba293;
  --color-golgfag-brown-400: #d98476;
  --color-golgfag-brown-500: #c66658;
  --color-golgfag-brown-600: #a7574b;
  --color-golgfag-brown-700: #86453c;
  --color-golgfag-brown-800: #64322c;
  --color-golgfag-brown-900: #46221e;
  --color-golgfag-brown-950: #2d110e;
}

SCSS

$golgfag-brown: #d77e70;
$golgfag-brown-rgb: 215, 126, 112;
$golgfag-brown-light: mix(#fff, $golgfag-brown, 20%);
$golgfag-brown-dark: mix(#000, $golgfag-brown, 20%);

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