Living Coral

CSS

:root {
  --living-coral: #ff6a52;
  --living-coral-rgb: 255 106 82;
  --living-coral-oklch: oklch(0.706 0.187 31.3);
}

.element {
  color: var(--living-coral);
  background-color: hsl(8 100% 66%);
  border-color: oklch(0.706 0.187 31.3);
}

Tailwind CSS v4

@theme {
  --color-living-coral: #ff6a52;
  --color-living-coral-50: #ffe3d3;
  --color-living-coral-100: #ffd2c0;
  --color-living-coral-200: #ffb6a0;
  --color-living-coral-300: #ff9177;
  --color-living-coral-400: #f96c55;
  --color-living-coral-500: #e7432b;
  --color-living-coral-600: #c33a26;
  --color-living-coral-700: #9d2f1e;
  --color-living-coral-800: #762017;
  --color-living-coral-900: #53150f;
  --color-living-coral-950: #370503;
}

SCSS

$living-coral: #ff6a52;
$living-coral-rgb: 255, 106, 82;
$living-coral-light: mix(#fff, $living-coral, 20%);
$living-coral-dark: mix(#000, $living-coral, 20%);

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