Cache of Camel

CSS

:root {
  --cache-of-camel: #d3c296;
  --cache-of-camel-rgb: 211 194 150;
  --cache-of-camel-oklch: oklch(0.817 0.062 89.4);
}

.element {
  color: var(--cache-of-camel);
  background-color: hsl(43 41% 71%);
  border-color: oklch(0.817 0.062 89.4);
}

Tailwind CSS v4

@theme {
  --color-cache-of-camel: #d3c296;
  --color-cache-of-camel-50: #fbf5e2;
  --color-cache-of-camel-100: #efe8d1;
  --color-cache-of-camel-200: #ded4b7;
  --color-cache-of-camel-300: #c3b794;
  --color-cache-of-camel-400: #ad9d75;
  --color-cache-of-camel-500: #968556;
  --color-cache-of-camel-600: #7f7049;
  --color-cache-of-camel-700: #665a3a;
  --color-cache-of-camel-800: #4b4129;
  --color-cache-of-camel-900: #342d1c;
  --color-cache-of-camel-950: #201a0c;
}

SCSS

$cache-of-camel: #d3c296;
$cache-of-camel-rgb: 211, 194, 150;
$cache-of-camel-light: mix(#fff, $cache-of-camel, 20%);
$cache-of-camel-dark: mix(#000, $cache-of-camel, 20%);

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