Camel Toe

CSS

:root {
  --camel-toe: #ac8a2a;
  --camel-toe-rgb: 172 138 42;
  --camel-toe-oklch: oklch(0.648 0.117 88.4);
}

.element {
  color: var(--camel-toe);
  background-color: hsl(44 61% 42%);
  border-color: oklch(0.648 0.117 88.4);
}

Tailwind CSS v4

@theme {
  --color-camel-toe: #ac8a2a;
  --color-camel-toe-50: #fff5d0;
  --color-camel-toe-100: #f7e7bc;
  --color-camel-toe-200: #e7d39b;
  --color-camel-toe-300: #ceb56f;
  --color-camel-toe-400: #bb9a44;
  --color-camel-toe-500: #a68000;
  --color-camel-toe-600: #8c6d04;
  --color-camel-toe-700: #705706;
  --color-camel-toe-800: #543f03;
  --color-camel-toe-900: #3b2b03;
  --color-camel-toe-950: #251800;
}

SCSS

$camel-toe: #ac8a2a;
$camel-toe-rgb: 172, 138, 42;
$camel-toe-light: mix(#fff, $camel-toe, 20%);
$camel-toe-dark: mix(#000, $camel-toe, 20%);

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