Carob Brown

CSS

:root {
  --carob-brown: #885c4e;
  --carob-brown-rgb: 136 92 78;
  --carob-brown-oklch: oklch(0.518 0.062 38.4);
}

.element {
  color: var(--carob-brown);
  background-color: hsl(14 27% 42%);
  border-color: oklch(0.518 0.062 38.4);
}

Tailwind CSS v4

@theme {
  --color-carob-brown: #885c4e;
  --color-carob-brown-50: #fff0e8;
  --color-carob-brown-100: #fbe2d8;
  --color-carob-brown-200: #edccc0;
  --color-carob-brown-300: #d4ada0;
  --color-carob-brown-400: #c09284;
  --color-carob-brown-500: #ab7868;
  --color-carob-brown-600: #906658;
  --color-carob-brown-700: #745146;
  --color-carob-brown-800: #563b33;
  --color-carob-brown-900: #3c2823;
  --color-carob-brown-950: #251612;
}

SCSS

$carob-brown: #885c4e;
$carob-brown-rgb: 136, 92, 78;
$carob-brown-light: mix(#fff, $carob-brown, 20%);
$carob-brown-dark: mix(#000, $carob-brown, 20%);

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