Child’s Play

CSS

:root {
  --child-s-play: #e7bcd4;
  --child-s-play-rgb: 231 188 212;
  --child-s-play-oklch: oklch(0.84 0.058 343.8);
}

.element {
  color: var(--child-s-play);
  background-color: hsl(327 47% 82%);
  border-color: oklch(0.84 0.058 343.8);
}

Tailwind CSS v4

@theme {
  --color-child-s-play: #e7bcd4;
  --color-child-s-play-50: #ffeff9;
  --color-child-s-play-100: #f7e1ec;
  --color-child-s-play-200: #e8cbda;
  --color-child-s-play-300: #ceacbe;
  --color-child-s-play-400: #b891a7;
  --color-child-s-play-500: #a27790;
  --color-child-s-play-600: #89657a;
  --color-child-s-play-700: #6e5061;
  --color-child-s-play-800: #513a48;
  --color-child-s-play-900: #382832;
  --color-child-s-play-950: #23161e;
}

SCSS

$child-s-play: #e7bcd4;
$child-s-play-rgb: 231, 188, 212;
$child-s-play-light: mix(#fff, $child-s-play, 20%);
$child-s-play-dark: mix(#000, $child-s-play, 20%);

.element {
  color: $child-s-play;
  box-shadow: 0 0 0 2px rgba($child-s-play, 0.35);
}