Brown Beige

CSS

:root {
  --brown-beige: #cc8833;
  --brown-beige-rgb: 204 136 51;
  --brown-beige-oklch: oklch(0.681 0.128 68.1);
}

.element {
  color: var(--brown-beige);
  background-color: hsl(33 60% 50%);
  border-color: oklch(0.681 0.128 68.1);
}

Tailwind CSS v4

@theme {
  --color-brown-beige: #cc8833;
  --color-brown-beige-50: #fff0ce;
  --color-brown-beige-100: #ffe1ba;
  --color-brown-beige-200: #f8cb98;
  --color-brown-beige-300: #e2ac6c;
  --color-brown-beige-400: #d08f41;
  --color-brown-beige-500: #bc7300;
  --color-brown-beige-600: #9f6200;
  --color-brown-beige-700: #804e01;
  --color-brown-beige-800: #603802;
  --color-brown-beige-900: #432603;
  --color-brown-beige-950: #2b1400;
}

SCSS

$brown-beige: #cc8833;
$brown-beige-rgb: 204, 136, 51;
$brown-beige-light: mix(#fff, $brown-beige, 20%);
$brown-beige-dark: mix(#000, $brown-beige, 20%);

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