Sweet Brown

CSS

:root {
  --sweet-brown: #a83731;
  --sweet-brown-rgb: 168 55 49;
  --sweet-brown-oklch: oklch(0.501 0.149 26.9);
}

.element {
  color: var(--sweet-brown);
  background-color: hsl(3 55% 43%);
  border-color: oklch(0.501 0.149 26.9);
}

Tailwind CSS v4

@theme {
  --color-sweet-brown: #a83731;
  --color-sweet-brown-50: #ffe6dd;
  --color-sweet-brown-100: #ffd6cc;
  --color-sweet-brown-200: #ffbcb0;
  --color-sweet-brown-300: #fa998b;
  --color-sweet-brown-400: #e9786d;
  --color-sweet-brown-500: #d7564d;
  --color-sweet-brown-600: #b64a42;
  --color-sweet-brown-700: #923b34;
  --color-sweet-brown-800: #6d2927;
  --color-sweet-brown-900: #4d1c1a;
  --color-sweet-brown-950: #320b0b;
}

SCSS

$sweet-brown: #a83731;
$sweet-brown-rgb: 168, 55, 49;
$sweet-brown-light: mix(#fff, $sweet-brown, 20%);
$sweet-brown-dark: mix(#000, $sweet-brown, 20%);

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