Lipstick Red

CSS

:root {
  --lipstick-red: #c0022f;
  --lipstick-red-rgb: 192 2 47;
  --lipstick-red-oklch: oklch(0.511 0.205 20.6);
}

.element {
  color: var(--lipstick-red);
  background-color: hsl(346 98% 38%);
  border-color: oklch(0.511 0.205 20.6);
}

Tailwind CSS v4

@theme {
  --color-lipstick-red: #c0022f;
  --color-lipstick-red-50: #ffdfda;
  --color-lipstick-red-100: #ffcdc8;
  --color-lipstick-red-200: #ffb0ac;
  --color-lipstick-red-300: #ff8886;
  --color-lipstick-red-400: #ff6069;
  --color-lipstick-red-500: #ef2d48;
  --color-lipstick-red-600: #ca2a3d;
  --color-lipstick-red-700: #a32231;
  --color-lipstick-red-800: #791625;
  --color-lipstick-red-900: #560e19;
  --color-lipstick-red-950: #39010a;
}

SCSS

$lipstick-red: #c0022f;
$lipstick-red-rgb: 192, 2, 47;
$lipstick-red-light: mix(#fff, $lipstick-red, 20%);
$lipstick-red-dark: mix(#000, $lipstick-red, 20%);

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