Lobster Brown

CSS

:root {
  --lobster-brown: #a73836;
  --lobster-brown-rgb: 167 56 54;
  --lobster-brown-oklch: oklch(0.501 0.147 25);
}

.element {
  color: var(--lobster-brown);
  background-color: hsl(1 51% 43%);
  border-color: oklch(0.501 0.147 25);
}

Tailwind CSS v4

@theme {
  --color-lobster-brown: #a73836;
  --color-lobster-brown-50: #ffe6df;
  --color-lobster-brown-100: #ffd6ce;
  --color-lobster-brown-200: #ffbcb2;
  --color-lobster-brown-300: #f9998e;
  --color-lobster-brown-400: #e87972;
  --color-lobster-brown-500: #d65752;
  --color-lobster-brown-600: #b54a46;
  --color-lobster-brown-700: #913b38;
  --color-lobster-brown-800: #6c2a29;
  --color-lobster-brown-900: #4c1c1c;
  --color-lobster-brown-950: #320c0c;
}

SCSS

$lobster-brown: #a73836;
$lobster-brown-rgb: 167, 56, 54;
$lobster-brown-light: mix(#fff, $lobster-brown, 20%);
$lobster-brown-dark: mix(#000, $lobster-brown, 20%);

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