Reddy Brown

CSS

:root {
  --reddy-brown: #6e1005;
  --reddy-brown-rgb: 110 16 5;
  --reddy-brown-oklch: oklch(0.348 0.129 30.9);
}

.element {
  color: var(--reddy-brown);
  background-color: hsl(6 91% 23%);
  border-color: oklch(0.348 0.129 30.9);
}

Tailwind CSS v4

@theme {
  --color-reddy-brown: #6e1005;
  --color-reddy-brown-50: #ffe9de;
  --color-reddy-brown-100: #ffd9cd;
  --color-reddy-brown-200: #ffc1b1;
  --color-reddy-brown-300: #f29f8d;
  --color-reddy-brown-400: #e0806f;
  --color-reddy-brown-500: #cd614f;
  --color-reddy-brown-600: #ad5244;
  --color-reddy-brown-700: #8b4236;
  --color-reddy-brown-800: #682f27;
  --color-reddy-brown-900: #49201a;
  --color-reddy-brown-950: #300f0b;
}

SCSS

$reddy-brown: #6e1005;
$reddy-brown-rgb: 110, 16, 5;
$reddy-brown-light: mix(#fff, $reddy-brown, 20%);
$reddy-brown-dark: mix(#000, $reddy-brown, 20%);

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