Coffee Brick

CSS

:root {
  --coffee-brick: #6f0c0d;
  --coffee-brick-rgb: 111 12 13;
  --coffee-brick-oklch: oklch(0.348 0.131 27.2);
}

.element {
  color: var(--coffee-brick);
  background-color: hsl(359 80% 24%);
  border-color: oklch(0.348 0.131 27.2);
}

Tailwind CSS v4

@theme {
  --color-coffee-brick: #6f0c0d;
  --color-coffee-brick-50: #ffe8e0;
  --color-coffee-brick-100: #ffd8cf;
  --color-coffee-brick-200: #ffc0b4;
  --color-coffee-brick-300: #f39d90;
  --color-coffee-brick-400: #e17e73;
  --color-coffee-brick-500: #cf5e54;
  --color-coffee-brick-600: #af5148;
  --color-coffee-brick-700: #8c4039;
  --color-coffee-brick-800: #692e2a;
  --color-coffee-brick-900: #4a1f1c;
  --color-coffee-brick-950: #300e0d;
}

SCSS

$coffee-brick: #6f0c0d;
$coffee-brick-rgb: 111, 12, 13;
$coffee-brick-light: mix(#fff, $coffee-brick, 20%);
$coffee-brick-dark: mix(#000, $coffee-brick, 20%);

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