Spring Lobster Brown

CSS

:root {
  --spring-lobster-brown: #6c2c2f;
  --spring-lobster-brown-rgb: 108 44 47;
  --spring-lobster-brown-oklch: oklch(0.384 0.092 19.6);
}

.element {
  color: var(--spring-lobster-brown);
  background-color: hsl(357 42% 30%);
  border-color: oklch(0.384 0.092 19.6);
}

Tailwind CSS v4

@theme {
  --color-spring-lobster-brown: #6c2c2f;
  --color-spring-lobster-brown-50: #ffecea;
  --color-spring-lobster-brown-100: #ffddda;
  --color-spring-lobster-brown-200: #f9c6c3;
  --color-spring-lobster-brown-300: #e3a5a3;
  --color-spring-lobster-brown-400: #cf8888;
  --color-spring-lobster-brown-500: #bb6c6d;
  --color-spring-lobster-brown-600: #9e5c5d;
  --color-spring-lobster-brown-700: #7f494a;
  --color-spring-lobster-brown-800: #5e3537;
  --color-spring-lobster-brown-900: #422425;
  --color-spring-lobster-brown-950: #2a1314;
}

SCSS

$spring-lobster-brown: #6c2c2f;
$spring-lobster-brown-rgb: 108, 44, 47;
$spring-lobster-brown-light: mix(#fff, $spring-lobster-brown, 20%);
$spring-lobster-brown-dark: mix(#000, $spring-lobster-brown, 20%);

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