Red Savina Pepper

CSS

:root {
  --red-savina-pepper: #ee0128;
  --red-savina-pepper-rgb: 238 1 40;
  --red-savina-pepper-oklch: oklch(0.598 0.242 25);
}

.element {
  color: var(--red-savina-pepper);
  background-color: hsl(350 99% 47%);
  border-color: oklch(0.598 0.242 25);
}

Tailwind CSS v4

@theme {
  --color-red-savina-pepper: #ee0128;
  --color-red-savina-pepper-50: #ffdbd0;
  --color-red-savina-pepper-100: #ffc8bc;
  --color-red-savina-pepper-200: #ffa99b;
  --color-red-savina-pepper-300: #ff7d71;
  --color-red-savina-pepper-400: #ff4d4f;
  --color-red-savina-pepper-500: #ff0020;
  --color-red-savina-pepper-600: #d8001e;
  --color-red-savina-pepper-700: #ae0018;
  --color-red-savina-pepper-800: #820014;
  --color-red-savina-pepper-900: #5c000d;
  --color-red-savina-pepper-950: #3e0002;
}

SCSS

$red-savina-pepper: #ee0128;
$red-savina-pepper-rgb: 238, 1, 40;
$red-savina-pepper-light: mix(#fff, $red-savina-pepper, 20%);
$red-savina-pepper-dark: mix(#000, $red-savina-pepper, 20%);

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