Coral Orange

CSS

:root {
  --coral-orange: #e4694c;
  --coral-orange-rgb: 228 105 76;
  --coral-orange-oklch: oklch(0.665 0.16 34.6);
}

.element {
  color: var(--coral-orange);
  background-color: hsl(11 74% 60%);
  border-color: oklch(0.665 0.16 34.6);
}

Tailwind CSS v4

@theme {
  --color-coral-orange: #e4694c;
  --color-coral-orange-50: #ffe6d6;
  --color-coral-orange-100: #ffd6c3;
  --color-coral-orange-200: #ffbca4;
  --color-coral-orange-300: #fd997c;
  --color-coral-orange-400: #ed775b;
  --color-coral-orange-500: #db5434;
  --color-coral-orange-600: #b9482e;
  --color-coral-orange-700: #953a24;
  --color-coral-orange-800: #6f281b;
  --color-coral-orange-900: #4e1b11;
  --color-coral-orange-950: #340a04;
}

SCSS

$coral-orange: #e4694c;
$coral-orange-rgb: 228, 105, 76;
$coral-orange-light: mix(#fff, $coral-orange, 20%);
$coral-orange-dark: mix(#000, $coral-orange, 20%);

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