Living Large

CSS

:root {
  --living-large: #c87163;
  --living-large-rgb: 200 113 99;
  --living-large-oklch: oklch(0.642 0.113 30.1);
}

.element {
  color: var(--living-large);
  background-color: hsl(8 48% 59%);
  border-color: oklch(0.642 0.113 30.1);
}

Tailwind CSS v4

@theme {
  --color-living-large: #c87163;
  --color-living-large-50: #ffeae1;
  --color-living-large-100: #ffdbd1;
  --color-living-large-200: #ffc3b6;
  --color-living-large-300: #eba293;
  --color-living-large-400: #d98476;
  --color-living-large-500: #c66758;
  --color-living-large-600: #a7574b;
  --color-living-large-700: #86463c;
  --color-living-large-800: #64322c;
  --color-living-large-900: #46221d;
  --color-living-large-950: #2d110e;
}

SCSS

$living-large: #c87163;
$living-large-rgb: 200, 113, 99;
$living-large-light: mix(#fff, $living-large, 20%);
$living-large-dark: mix(#000, $living-large, 20%);

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