#DD6E68

CSS

:root {
  --coral-commander: #dd6e68;
  --coral-commander-rgb: 221 110 104;
  --coral-commander-oklch: oklch(0.667 0.14 24.7);
}

.element {
  color: var(--coral-commander);
  background-color: hsl(3 63% 64%);
  border-color: oklch(0.667 0.14 24.7);
}

Tailwind CSS v4

@theme {
  --color-coral-commander: #dd6e68;
  --color-coral-commander-50: #ffe7e0;
  --color-coral-commander-100: #ffd7cf;
  --color-coral-commander-200: #ffbeb4;
  --color-coral-commander-300: #f79b91;
  --color-coral-commander-400: #e57b74;
  --color-coral-commander-500: #d35a56;
  --color-coral-commander-600: #b24d49;
  --color-coral-commander-700: #8f3d3a;
  --color-coral-commander-800: #6b2b2b;
  --color-coral-commander-900: #4b1d1d;
  --color-coral-commander-950: #310d0d;
}

SCSS

$coral-commander: #dd6e68;
$coral-commander-rgb: 221, 110, 104;
$coral-commander-light: mix(#fff, $coral-commander, 20%);
$coral-commander-dark: mix(#000, $coral-commander, 20%);

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