Pink Polar

CSS

:root {
  --pink-polar: #ccbabe;
  --pink-polar-rgb: 204 186 190;
  --pink-polar-oklch: oklch(0.805 0.021 2.4);
}

.element {
  color: var(--pink-polar);
  background-color: hsl(347 15% 76%);
  border-color: oklch(0.805 0.021 2.4);
}

Tailwind CSS v4

@theme {
  --color-pink-polar: #ccbabe;
  --color-pink-polar-50: #fbf3f4;
  --color-pink-polar-100: #efe5e7;
  --color-pink-polar-200: #ddd1d3;
  --color-pink-polar-300: #c2b3b6;
  --color-pink-polar-400: #aa999d;
  --color-pink-polar-500: #938185;
  --color-pink-polar-600: #7c6d70;
  --color-pink-polar-700: #64575a;
  --color-pink-polar-800: #493f42;
  --color-pink-polar-900: #332c2d;
  --color-pink-polar-950: #1e191a;
}

SCSS

$pink-polar: #ccbabe;
$pink-polar-rgb: 204, 186, 190;
$pink-polar-light: mix(#fff, $pink-polar, 20%);
$pink-polar-dark: mix(#000, $pink-polar, 20%);

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