Red Jalapeño

CSS

:root {
  --red-jalapeno: #c01141;
  --red-jalapeno-rgb: 192 17 65;
  --red-jalapeno-oklch: oklch(0.519 0.2 15.2);
}

.element {
  color: var(--red-jalapeno);
  background-color: hsl(344 84% 41%);
  border-color: oklch(0.519 0.2 15.2);
}

Tailwind CSS v4

@theme {
  --color-red-jalapeno: #c01141;
  --color-red-jalapeno-50: #ffdfe0;
  --color-red-jalapeno-100: #ffcdd0;
  --color-red-jalapeno-200: #ffb0b5;
  --color-red-jalapeno-300: #ff8992;
  --color-red-jalapeno-400: #fe6177;
  --color-red-jalapeno-500: #ec3159;
  --color-red-jalapeno-600: #c82c4c;
  --color-red-jalapeno-700: #a1243c;
  --color-red-jalapeno-800: #78172e;
  --color-red-jalapeno-900: #550f1f;
  --color-red-jalapeno-950: #38010f;
}

SCSS

$red-jalapeno: #c01141;
$red-jalapeno-rgb: 192, 17, 65;
$red-jalapeno-light: mix(#fff, $red-jalapeno, 20%);
$red-jalapeno-dark: mix(#000, $red-jalapeno, 20%);

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