Wet Coral

CSS

:root {
  --wet-coral: #d1584c;
  --wet-coral-rgb: 209 88 76;
  --wet-coral-oklch: oklch(0.613 0.156 28.2);
}

.element {
  color: var(--wet-coral);
  background-color: hsl(5 59% 56%);
  border-color: oklch(0.613 0.156 28.2);
}

Tailwind CSS v4

@theme {
  --color-wet-coral: #d1584c;
  --color-wet-coral-50: #ffe5db;
  --color-wet-coral-100: #ffd5c9;
  --color-wet-coral-200: #ffbbad;
  --color-wet-coral-300: #fd9887;
  --color-wet-coral-400: #ec7669;
  --color-wet-coral-500: #da5347;
  --color-wet-coral-600: #b8483d;
  --color-wet-coral-700: #943931;
  --color-wet-coral-800: #6e2824;
  --color-wet-coral-900: #4e1b18;
  --color-wet-coral-950: #330a09;
}

SCSS

$wet-coral: #d1584c;
$wet-coral-rgb: 209, 88, 76;
$wet-coral-light: mix(#fff, $wet-coral, 20%);
$wet-coral-dark: mix(#000, $wet-coral, 20%);

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