Scallywag

CSS

:root {
  --scallywag: #e5d5bd;
  --scallywag-rgb: 229 213 189;
  --scallywag-oklch: oklch(0.88 0.037 78.1);
}

.element {
  color: var(--scallywag);
  background-color: hsl(36 43% 82%);
  border-color: oklch(0.88 0.037 78.1);
}

Tailwind CSS v4

@theme {
  --color-scallywag: #e5d5bd;
  --color-scallywag-50: #fbf4ea;
  --color-scallywag-100: #eee7db;
  --color-scallywag-200: #ddd3c3;
  --color-scallywag-300: #c1b6a3;
  --color-scallywag-400: #ab9c87;
  --color-scallywag-500: #94846b;
  --color-scallywag-600: #7d6f5b;
  --color-scallywag-700: #645948;
  --color-scallywag-800: #4a4134;
  --color-scallywag-900: #332d24;
  --color-scallywag-950: #1f1a13;
}

SCSS

$scallywag: #e5d5bd;
$scallywag-rgb: 229, 213, 189;
$scallywag-light: mix(#fff, $scallywag, 20%);
$scallywag-dark: mix(#000, $scallywag, 20%);

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