Elm Brown Red

CSS

:root {
  --elm-brown-red: #b25b09;
  --elm-brown-red-rgb: 178 91 9;
  --elm-brown-red-oklch: oklch(0.565 0.138 54.3);
}

.element {
  color: var(--elm-brown-red);
  background-color: hsl(29 90% 37%);
  border-color: oklch(0.565 0.138 54.3);
}

Tailwind CSS v4

@theme {
  --color-elm-brown-red: #b25b09;
  --color-elm-brown-red-50: #ffecd0;
  --color-elm-brown-red-100: #ffddbc;
  --color-elm-brown-red-200: #ffc69b;
  --color-elm-brown-red-300: #eda570;
  --color-elm-brown-red-400: #dc8648;
  --color-elm-brown-red-500: #ca680b;
  --color-elm-brown-red-600: #aa5810;
  --color-elm-brown-red-700: #89470e;
  --color-elm-brown-red-800: #66320a;
  --color-elm-brown-red-900: #482206;
  --color-elm-brown-red-950: #2f1100;
}

SCSS

$elm-brown-red: #b25b09;
$elm-brown-red-rgb: 178, 91, 9;
$elm-brown-red-light: mix(#fff, $elm-brown-red, 20%);
$elm-brown-red-dark: mix(#000, $elm-brown-red, 20%);

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