Orange Daylily

CSS

:root {
  --orange-daylily: #eb7d5d;
  --orange-daylily-rgb: 235 125 93;
  --orange-daylily-oklch: oklch(0.707 0.143 37.1);
}

.element {
  color: var(--orange-daylily);
  background-color: hsl(14 78% 64%);
  border-color: oklch(0.707 0.143 37.1);
}

Tailwind CSS v4

@theme {
  --color-orange-daylily: #eb7d5d;
  --color-orange-daylily-50: #ffe8d7;
  --color-orange-daylily-100: #ffd8c5;
  --color-orange-daylily-200: #ffc0a7;
  --color-orange-daylily-300: #f69d80;
  --color-orange-daylily-400: #e57d5f;
  --color-orange-daylily-500: #d35d3a;
  --color-orange-daylily-600: #b24f32;
  --color-orange-daylily-700: #8f3f28;
  --color-orange-daylily-800: #6b2d1d;
  --color-orange-daylily-900: #4b1e13;
  --color-orange-daylily-950: #310d05;
}

SCSS

$orange-daylily: #eb7d5d;
$orange-daylily-rgb: 235, 125, 93;
$orange-daylily-light: mix(#fff, $orange-daylily, 20%);
$orange-daylily-dark: mix(#000, $orange-daylily, 20%);

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