Simple Pink

CSS

:root {
  --simple-pink: #f9a3aa;
  --simple-pink-rgb: 249 163 170;
  --simple-pink-oklch: oklch(0.802 0.102 14.3);
}

.element {
  color: var(--simple-pink);
  background-color: hsl(355 88% 81%);
  border-color: oklch(0.802 0.102 14.3);
}

Tailwind CSS v4

@theme {
  --color-simple-pink: #f9a3aa;
  --color-simple-pink-50: #ffeaeb;
  --color-simple-pink-100: #ffdbdc;
  --color-simple-pink-200: #fdc3c5;
  --color-simple-pink-300: #e7a2a5;
  --color-simple-pink-400: #d4858c;
  --color-simple-pink-500: #c06871;
  --color-simple-pink-600: #a25860;
  --color-simple-pink-700: #82464c;
  --color-simple-pink-800: #613339;
  --color-simple-pink-900: #442227;
  --color-simple-pink-950: #2c1115;
}

SCSS

$simple-pink: #f9a3aa;
$simple-pink-rgb: 249, 163, 170;
$simple-pink-light: mix(#fff, $simple-pink, 20%);
$simple-pink-dark: mix(#000, $simple-pink, 20%);

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