Dusty Boots

CSS

:root {
  --dusty-boots: #f3c090;
  --dusty-boots-rgb: 243 192 144;
  --dusty-boots-oklch: oklch(0.842 0.086 64.5);
}

.element {
  color: var(--dusty-boots);
  background-color: hsl(29 80% 76%);
  border-color: oklch(0.842 0.086 64.5);
}

Tailwind CSS v4

@theme {
  --color-dusty-boots: #f3c090;
  --color-dusty-boots-50: #fff1dc;
  --color-dusty-boots-100: #fce3ca;
  --color-dusty-boots-200: #eeceae;
  --color-dusty-boots-300: #d6af89;
  --color-dusty-boots-400: #c29468;
  --color-dusty-boots-500: #ae7a46;
  --color-dusty-boots-600: #93673c;
  --color-dusty-boots-700: #76522f;
  --color-dusty-boots-800: #583b22;
  --color-dusty-boots-900: #3d2916;
  --color-dusty-boots-950: #271707;
}

SCSS

$dusty-boots: #f3c090;
$dusty-boots-rgb: 243, 192, 144;
$dusty-boots-light: mix(#fff, $dusty-boots, 20%);
$dusty-boots-dark: mix(#000, $dusty-boots, 20%);

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