Deep Coral

CSS

:root {
  --deep-coral: #da7c55;
  --deep-coral-rgb: 218 124 85;
  --deep-coral-oklch: oklch(0.682 0.129 42.8);
}

.element {
  color: var(--deep-coral);
  background-color: hsl(18 64% 59%);
  border-color: oklch(0.682 0.129 42.8);
}

Tailwind CSS v4

@theme {
  --color-deep-coral: #da7c55;
  --color-deep-coral-50: #ffead7;
  --color-deep-coral-100: #ffdbc5;
  --color-deep-coral-200: #ffc3a7;
  --color-deep-coral-300: #efa280;
  --color-deep-coral-400: #dd845f;
  --color-deep-coral-500: #cb6539;
  --color-deep-coral-600: #ab5632;
  --color-deep-coral-700: #894527;
  --color-deep-coral-800: #67311d;
  --color-deep-coral-900: #482113;
  --color-deep-coral-950: #2f1005;
}

SCSS

$deep-coral: #da7c55;
$deep-coral-rgb: 218, 124, 85;
$deep-coral-light: mix(#fff, $deep-coral, 20%);
$deep-coral-dark: mix(#000, $deep-coral, 20%);

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