Animated Coral

CSS

:root {
  --animated-coral: #ed9080;
  --animated-coral-rgb: 237 144 128;
  --animated-coral-oklch: oklch(0.746 0.116 30.5);
}

.element {
  color: var(--animated-coral);
  background-color: hsl(9 75% 72%);
  border-color: oklch(0.746 0.116 30.5);
}

Tailwind CSS v4

@theme {
  --color-animated-coral: #ed9080;
  --color-animated-coral-50: #ffeae0;
  --color-animated-coral-100: #ffdbd0;
  --color-animated-coral-200: #ffc3b5;
  --color-animated-coral-300: #eda292;
  --color-animated-coral-400: #da8374;
  --color-animated-coral-500: #c76556;
  --color-animated-coral-600: #a85649;
  --color-animated-coral-700: #87453a;
  --color-animated-coral-800: #65312b;
  --color-animated-coral-900: #47211d;
  --color-animated-coral-950: #2e100d;
}

SCSS

$animated-coral: #ed9080;
$animated-coral-rgb: 237, 144, 128;
$animated-coral-light: mix(#fff, $animated-coral, 20%);
$animated-coral-dark: mix(#000, $animated-coral, 20%);

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