Dusty Orange

CSS

:root {
  --dusty-orange: #e16d4f;
  --dusty-orange-rgb: 225 109 79;
  --dusty-orange-oklch: oklch(0.667 0.152 35.6);
}

.element {
  color: var(--dusty-orange);
  background-color: hsl(12 71% 60%);
  border-color: oklch(0.667 0.152 35.6);
}

Tailwind CSS v4

@theme {
  --color-dusty-orange: #e16d4f;
  --color-dusty-orange-50: #ffe7d6;
  --color-dusty-orange-100: #ffd7c4;
  --color-dusty-orange-200: #ffbea6;
  --color-dusty-orange-300: #fa9b7e;
  --color-dusty-orange-400: #e97a5d;
  --color-dusty-orange-500: #d75837;
  --color-dusty-orange-600: #b64c30;
  --color-dusty-orange-700: #923c26;
  --color-dusty-orange-800: #6d2a1c;
  --color-dusty-orange-900: #4d1d12;
  --color-dusty-orange-950: #330c05;
}

SCSS

$dusty-orange: #e16d4f;
$dusty-orange-rgb: 225, 109, 79;
$dusty-orange-light: mix(#fff, $dusty-orange, 20%);
$dusty-orange-dark: mix(#000, $dusty-orange, 20%);

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