Brown Moelleux

CSS

:root {
  --brown-moelleux: #662211;
  --brown-moelleux-rgb: 102 34 17;
  --brown-moelleux-oklch: oklch(0.354 0.102 35.1);
}

.element {
  color: var(--brown-moelleux);
  background-color: hsl(12 71% 23%);
  border-color: oklch(0.354 0.102 35.1);
}

Tailwind CSS v4

@theme {
  --color-brown-moelleux: #662211;
  --color-brown-moelleux-50: #ffece1;
  --color-brown-moelleux-100: #ffddd0;
  --color-brown-moelleux-200: #fcc6b6;
  --color-brown-moelleux-300: #e6a592;
  --color-brown-moelleux-400: #d38875;
  --color-brown-moelleux-500: #c06c57;
  --color-brown-moelleux-600: #a25c4a;
  --color-brown-moelleux-700: #82493b;
  --color-brown-moelleux-800: #61342b;
  --color-brown-moelleux-900: #44241d;
  --color-brown-moelleux-950: #2c120d;
}

SCSS

$brown-moelleux: #662211;
$brown-moelleux-rgb: 102, 34, 17;
$brown-moelleux-light: mix(#fff, $brown-moelleux, 20%);
$brown-moelleux-dark: mix(#000, $brown-moelleux, 20%);

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