#F3BB8A

CSS

:root {
  --dusty-boots: #f3bb8a;
  --dusty-boots-rgb: 243 187 138;
  --dusty-boots-oklch: oklch(0.832 0.091 62.3);
}

.element {
  color: var(--dusty-boots);
  background-color: hsl(28 81% 75%);
  border-color: oklch(0.832 0.091 62.3);
}

Tailwind CSS v4

@theme {
  --color-dusty-boots: #f3bb8a;
  --color-dusty-boots-50: #fff0db;
  --color-dusty-boots-100: #fee2c9;
  --color-dusty-boots-200: #f1cdac;
  --color-dusty-boots-300: #d9ae87;
  --color-dusty-boots-400: #c59265;
  --color-dusty-boots-500: #b17842;
  --color-dusty-boots-600: #966639;
  --color-dusty-boots-700: #78512d;
  --color-dusty-boots-800: #593a20;
  --color-dusty-boots-900: #3e2815;
  --color-dusty-boots-950: #281607;
}

SCSS

$dusty-boots: #f3bb8a;
$dusty-boots-rgb: 243, 187, 138;
$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);
}