Pink Power

CSS

:root {
  --pink-power: #d5b6cd;
  --pink-power-rgb: 213 182 205;
  --pink-power-oklch: oklch(0.81 0.047 335.2);
}

.element {
  color: var(--pink-power);
  background-color: hsl(315 27% 77%);
  border-color: oklch(0.81 0.047 335.2);
}

Tailwind CSS v4

@theme {
  --color-pink-power: #d5b6cd;
  --color-pink-power-50: #fff0fa;
  --color-pink-power-100: #f3e2ee;
  --color-pink-power-200: #e2cddc;
  --color-pink-power-300: #c8afc0;
  --color-pink-power-400: #b194a9;
  --color-pink-power-500: #9a7b93;
  --color-pink-power-600: #83687c;
  --color-pink-power-700: #695363;
  --color-pink-power-800: #4d3c49;
  --color-pink-power-900: #352a33;
  --color-pink-power-950: #20171f;
}

SCSS

$pink-power: #d5b6cd;
$pink-power-rgb: 213, 182, 205;
$pink-power-light: mix(#fff, $pink-power, 20%);
$pink-power-dark: mix(#000, $pink-power, 20%);

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