Spanish Carmine

CSS

:root {
  --spanish-carmine: #d10047;
  --spanish-carmine-rgb: 209 0 71;
  --spanish-carmine-oklch: oklch(0.547 0.219 14.5);
}

.element {
  color: var(--spanish-carmine);
  background-color: hsl(340 100% 41%);
  border-color: oklch(0.547 0.219 14.5);
}

Tailwind CSS v4

@theme {
  --color-spanish-carmine: #d10047;
  --color-spanish-carmine-50: #ffdcdf;
  --color-spanish-carmine-100: #ffcace;
  --color-spanish-carmine-200: #ffacb3;
  --color-spanish-carmine-300: #ff8290;
  --color-spanish-carmine-400: #ff5875;
  --color-spanish-carmine-500: #f41657;
  --color-spanish-carmine-600: #ce1a4a;
  --color-spanish-carmine-700: #a6163b;
  --color-spanish-carmine-800: #7c0d2d;
  --color-spanish-carmine-900: #58091e;
  --color-spanish-carmine-950: #3b000e;
}

SCSS

$spanish-carmine: #d10047;
$spanish-carmine-rgb: 209, 0, 71;
$spanish-carmine-light: mix(#fff, $spanish-carmine, 20%);
$spanish-carmine-dark: mix(#000, $spanish-carmine, 20%);

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