Pink and Sleek

CSS

:root {
  --pink-and-sleek: #ffc3c6;
  --pink-and-sleek-rgb: 255 195 198;
  --pink-and-sleek-oklch: oklch(0.872 0.069 15.2);
}

.element {
  color: var(--pink-and-sleek);
  background-color: hsl(357 100% 88%);
  border-color: oklch(0.872 0.069 15.2);
}

Tailwind CSS v4

@theme {
  --color-pink-and-sleek: #ffc3c6;
  --color-pink-and-sleek-50: #ffeeee;
  --color-pink-and-sleek-100: #fedfdf;
  --color-pink-and-sleek-200: #f1c9ca;
  --color-pink-and-sleek-300: #d9aaab;
  --color-pink-and-sleek-400: #c48e91;
  --color-pink-and-sleek-500: #af7377;
  --color-pink-and-sleek-600: #946265;
  --color-pink-and-sleek-700: #774e51;
  --color-pink-and-sleek-800: #58383b;
  --color-pink-and-sleek-900: #3d2729;
  --color-pink-and-sleek-950: #271517;
}

SCSS

$pink-and-sleek: #ffc3c6;
$pink-and-sleek-rgb: 255, 195, 198;
$pink-and-sleek-light: mix(#fff, $pink-and-sleek, 20%);
$pink-and-sleek-dark: mix(#000, $pink-and-sleek, 20%);

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