Coral

CSS

:root {
  --coral: #ff7f50;
  --coral-rgb: 255 127 80;
  --coral-oklch: oklch(0.735 0.168 40.2);
}

.element {
  color: var(--coral);
  background-color: hsl(16 100% 66%);
  border-color: oklch(0.735 0.168 40.2);
}

Tailwind CSS v4

@theme {
  --color-coral: #ff7f50;
  --color-coral-50: #ffe6d0;
  --color-coral-100: #ffd6bc;
  --color-coral-200: #ffbd9b;
  --color-coral-300: #ff9970;
  --color-coral-400: #ef774b;
  --color-coral-500: #dd5315;
  --color-coral-600: #bb4716;
  --color-coral-700: #963912;
  --color-coral-800: #70280e;
  --color-coral-900: #4f1b09;
  --color-coral-950: #340a00;
}

SCSS

$coral: #ff7f50;
$coral-rgb: 255, 127, 80;
$coral-light: mix(#fff, $coral, 20%);
$coral-dark: mix(#000, $coral, 20%);

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