Southern Moss

CSS

:root {
  --southern-moss: #bca66a;
  --southern-moss-rgb: 188 166 106;
  --southern-moss-oklch: oklch(0.731 0.083 90.1);
}

.element {
  color: var(--southern-moss);
  background-color: hsl(44 38% 58%);
  border-color: oklch(0.731 0.083 90.1);
}

Tailwind CSS v4

@theme {
  --color-southern-moss: #bca66a;
  --color-southern-moss-50: #fdf5db;
  --color-southern-moss-100: #f2e8c9;
  --color-southern-moss-200: #e1d4ad;
  --color-southern-moss-300: #c6b787;
  --color-southern-moss-400: #b19d64;
  --color-southern-moss-500: #9b8441;
  --color-southern-moss-600: #837038;
  --color-southern-moss-700: #69592c;
  --color-southern-moss-800: #4e411e;
  --color-southern-moss-900: #362d14;
  --color-southern-moss-950: #211a06;
}

SCSS

$southern-moss: #bca66a;
$southern-moss-rgb: 188, 166, 106;
$southern-moss-light: mix(#fff, $southern-moss, 20%);
$southern-moss-dark: mix(#000, $southern-moss, 20%);

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