Plane Brown

CSS

:root {
  --plane-brown: #8a5024;
  --plane-brown-rgb: 138 80 36;
  --plane-brown-oklch: oklch(0.491 0.097 55);
}

.element {
  color: var(--plane-brown);
  background-color: hsl(26 59% 34%);
  border-color: oklch(0.491 0.097 55);
}

Tailwind CSS v4

@theme {
  --color-plane-brown: #8a5024;
  --color-plane-brown-50: #ffefdb;
  --color-plane-brown-100: #ffe1c9;
  --color-plane-brown-200: #f5cbac;
  --color-plane-brown-300: #deab87;
  --color-plane-brown-400: #cb8f66;
  --color-plane-brown-500: #b77443;
  --color-plane-brown-600: #9b623a;
  --color-plane-brown-700: #7c4e2e;
  --color-plane-brown-800: #5d3821;
  --color-plane-brown-900: #412715;
  --color-plane-brown-950: #291507;
}

SCSS

$plane-brown: #8a5024;
$plane-brown-rgb: 138, 80, 36;
$plane-brown-light: mix(#fff, $plane-brown, 20%);
$plane-brown-dark: mix(#000, $plane-brown, 20%);

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