Pink Pepper

CSS

:root {
  --pink-pepper: #ef586c;
  --pink-pepper-rgb: 239 88 108;
  --pink-pepper-oklch: oklch(0.665 0.185 15.9);
}

.element {
  color: var(--pink-pepper);
  background-color: hsl(352 83% 64%);
  border-color: oklch(0.665 0.185 15.9);
}

Tailwind CSS v4

@theme {
  --color-pink-pepper: #ef586c;
  --color-pink-pepper-50: #ffe0e1;
  --color-pink-pepper-100: #ffcfd1;
  --color-pink-pepper-200: #ffb3b6;
  --color-pink-pepper-300: #ff8d93;
  --color-pink-pepper-400: #f86878;
  --color-pink-pepper-500: #e63d5b;
  --color-pink-pepper-600: #c2364d;
  --color-pink-pepper-700: #9c2b3d;
  --color-pink-pepper-800: #751d2e;
  --color-pink-pepper-900: #52141f;
  --color-pink-pepper-950: #37040f;
}

SCSS

$pink-pepper: #ef586c;
$pink-pepper-rgb: 239, 88, 108;
$pink-pepper-light: mix(#fff, $pink-pepper, 20%);
$pink-pepper-dark: mix(#000, $pink-pepper, 20%);

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