Ruddy Brown

CSS

:root {
  --ruddy-brown: #bb6528;
  --ruddy-brown-rgb: 187 101 40;
  --ruddy-brown-oklch: oklch(0.596 0.132 52.1);
}

.element {
  color: var(--ruddy-brown);
  background-color: hsl(25 65% 45%);
  border-color: oklch(0.596 0.132 52.1);
}

Tailwind CSS v4

@theme {
  --color-ruddy-brown: #bb6528;
  --color-ruddy-brown-50: #ffecd2;
  --color-ruddy-brown-100: #ffddbf;
  --color-ruddy-brown-200: #ffc69f;
  --color-ruddy-brown-300: #eca575;
  --color-ruddy-brown-400: #db8650;
  --color-ruddy-brown-500: #c86921;
  --color-ruddy-brown-600: #a9591f;
  --color-ruddy-brown-700: #884718;
  --color-ruddy-brown-800: #663311;
  --color-ruddy-brown-900: #47220b;
  --color-ruddy-brown-950: #2e1101;
}

SCSS

$ruddy-brown: #bb6528;
$ruddy-brown-rgb: 187, 101, 40;
$ruddy-brown-light: mix(#fff, $ruddy-brown, 20%);
$ruddy-brown-dark: mix(#000, $ruddy-brown, 20%);

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