Coral Passion

CSS

:root {
  --coral-passion: #f39081;
  --coral-passion-rgb: 243 144 129;
  --coral-passion-oklch: oklch(0.754 0.123 29.4);
}

.element {
  color: var(--coral-passion);
  background-color: hsl(8 83% 73%);
  border-color: oklch(0.754 0.123 29.4);
}

Tailwind CSS v4

@theme {
  --color-coral-passion: #f39081;
  --color-coral-passion-50: #ffe9e0;
  --color-coral-passion-100: #ffdacf;
  --color-coral-passion-200: #ffc1b4;
  --color-coral-passion-300: #efa090;
  --color-coral-passion-400: #dd8173;
  --color-coral-passion-500: #cb6354;
  --color-coral-passion-600: #ab5448;
  --color-coral-passion-700: #894339;
  --color-coral-passion-800: #66302a;
  --color-coral-passion-900: #48201c;
  --color-coral-passion-950: #2f0f0d;
}

SCSS

$coral-passion: #f39081;
$coral-passion-rgb: 243, 144, 129;
$coral-passion-light: mix(#fff, $coral-passion, 20%);
$coral-passion-dark: mix(#000, $coral-passion, 20%);

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