Mild Heart Attack

CSS

:root {
  --mild-heart-attack: #f27362;
  --mild-heart-attack-rgb: 242 115 98;
  --mild-heart-attack-oklch: oklch(0.702 0.16 29.5);
}

.element {
  color: var(--mild-heart-attack);
  background-color: hsl(7 85% 67%);
  border-color: oklch(0.702 0.16 29.5);
}

Tailwind CSS v4

@theme {
  --color-mild-heart-attack: #f27362;
  --color-mild-heart-attack-50: #ffe5d9;
  --color-mild-heart-attack-100: #ffd5c7;
  --color-mild-heart-attack-200: #ffbbaa;
  --color-mild-heart-attack-300: #fe9784;
  --color-mild-heart-attack-400: #ee7565;
  --color-mild-heart-attack-500: #dc5242;
  --color-mild-heart-attack-600: #ba4639;
  --color-mild-heart-attack-700: #95382d;
  --color-mild-heart-attack-800: #6f2722;
  --color-mild-heart-attack-900: #4f1a16;
  --color-mild-heart-attack-950: #340a08;
}

SCSS

$mild-heart-attack: #f27362;
$mild-heart-attack-rgb: 242, 115, 98;
$mild-heart-attack-light: mix(#fff, $mild-heart-attack, 20%);
$mild-heart-attack-dark: mix(#000, $mild-heart-attack, 20%);

.element {
  color: $mild-heart-attack;
  box-shadow: 0 0 0 2px rgba($mild-heart-attack, 0.35);
}