Cool Camel

CSS

:root {
  --cool-camel: #ae996b;
  --cool-camel-rgb: 174 153 107;
  --cool-camel-oklch: oklch(0.69 0.067 86.1);
}

.element {
  color: var(--cool-camel);
  background-color: hsl(41 29% 55%);
  border-color: oklch(0.69 0.067 86.1);
}

Tailwind CSS v4

@theme {
  --color-cool-camel: #ae996b;
  --color-cool-camel-50: #fdf5e0;
  --color-cool-camel-100: #f1e7cf;
  --color-cool-camel-200: #e0d3b4;
  --color-cool-camel-300: #c6b691;
  --color-cool-camel-400: #b09c71;
  --color-cool-camel-500: #9a8351;
  --color-cool-camel-600: #826f45;
  --color-cool-camel-700: #685937;
  --color-cool-camel-800: #4d4127;
  --color-cool-camel-900: #362c1a;
  --color-cool-camel-950: #21190a;
}

SCSS

$cool-camel: #ae996b;
$cool-camel-rgb: 174, 153, 107;
$cool-camel-light: mix(#fff, $cool-camel, 20%);
$cool-camel-dark: mix(#000, $cool-camel, 20%);

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