Pale Moss

CSS

:root {
  --pale-moss: #dcc797;
  --pale-moss-rgb: 220 199 151;
  --pale-moss-oklch: oklch(0.836 0.067 87.1);
}

.element {
  color: var(--pale-moss);
  background-color: hsl(42 50% 73%);
  border-color: oklch(0.836 0.067 87.1);
}

Tailwind CSS v4

@theme {
  --color-pale-moss: #dcc797;
  --color-pale-moss-50: #fdf5e0;
  --color-pale-moss-100: #f1e7cf;
  --color-pale-moss-200: #e0d3b4;
  --color-pale-moss-300: #c5b690;
  --color-pale-moss-400: #b09c70;
  --color-pale-moss-500: #998450;
  --color-pale-moss-600: #826f45;
  --color-pale-moss-700: #685937;
  --color-pale-moss-800: #4d4126;
  --color-pale-moss-900: #362d1a;
  --color-pale-moss-950: #211a0a;
}

SCSS

$pale-moss: #dcc797;
$pale-moss-rgb: 220, 199, 151;
$pale-moss-light: mix(#fff, $pale-moss, 20%);
$pale-moss-dark: mix(#000, $pale-moss, 20%);

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