Chinese Brown

CSS

:root {
  --chinese-brown: #ab381f;
  --chinese-brown-rgb: 171 56 31;
  --chinese-brown-oklch: oklch(0.505 0.155 33.8);
}

.element {
  color: var(--chinese-brown);
  background-color: hsl(11 69% 40%);
  border-color: oklch(0.505 0.155 33.8);
}

Tailwind CSS v4

@theme {
  --color-chinese-brown: #ab381f;
  --color-chinese-brown-50: #ffe6d7;
  --color-chinese-brown-100: #ffd6c5;
  --color-chinese-brown-200: #ffbda7;
  --color-chinese-brown-300: #fc9a7f;
  --color-chinese-brown-400: #eb785f;
  --color-chinese-brown-500: #d9563a;
  --color-chinese-brown-600: #b74a32;
  --color-chinese-brown-700: #933b28;
  --color-chinese-brown-800: #6e291d;
  --color-chinese-brown-900: #4e1c13;
  --color-chinese-brown-950: #330b05;
}

SCSS

$chinese-brown: #ab381f;
$chinese-brown-rgb: 171, 56, 31;
$chinese-brown-light: mix(#fff, $chinese-brown, 20%);
$chinese-brown-dark: mix(#000, $chinese-brown, 20%);

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