Camel Train

CSS

:root {
  --camel-train: #baae9d;
  --camel-train-rgb: 186 174 157;
  --camel-train-oklch: oklch(0.756 0.027 76.7);
}

.element {
  color: var(--camel-train);
  background-color: hsl(35 17% 67%);
  border-color: oklch(0.756 0.027 76.7);
}

Tailwind CSS v4

@theme {
  --color-camel-train: #baae9d;
  --color-camel-train-50: #f9f4ed;
  --color-camel-train-100: #ede7de;
  --color-camel-train-200: #dbd3c7;
  --color-camel-train-300: #bfb6a8;
  --color-camel-train-400: #a89d8d;
  --color-camel-train-500: #918472;
  --color-camel-train-600: #7a7061;
  --color-camel-train-700: #62594d;
  --color-camel-train-800: #484138;
  --color-camel-train-900: #322d26;
  --color-camel-train-950: #1e1a15;
}

SCSS

$camel-train: #baae9d;
$camel-train-rgb: 186, 174, 157;
$camel-train-light: mix(#fff, $camel-train, 20%);
$camel-train-dark: mix(#000, $camel-train, 20%);

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