Short and Sweet

CSS

:root {
  --short-and-sweet: #edd1d3;
  --short-and-sweet-rgb: 237 209 211;
  --short-and-sweet-oklch: oklch(0.885 0.031 12.8);
}

.element {
  color: var(--short-and-sweet);
  background-color: hsl(356 44% 87%);
  border-color: oklch(0.885 0.031 12.8);
}

Tailwind CSS v4

@theme {
  --color-short-and-sweet: #edd1d3;
  --color-short-and-sweet-50: #fef2f2;
  --color-short-and-sweet-100: #f2e4e4;
  --color-short-and-sweet-200: #e1cfd0;
  --color-short-and-sweet-300: #c7b1b2;
  --color-short-and-sweet-400: #b09799;
  --color-short-and-sweet-500: #9a7e80;
  --color-short-and-sweet-600: #826b6d;
  --color-short-and-sweet-700: #685557;
  --color-short-and-sweet-800: #4d3e40;
  --color-short-and-sweet-900: #352b2c;
  --color-short-and-sweet-950: #201819;
}

SCSS

$short-and-sweet: #edd1d3;
$short-and-sweet-rgb: 237, 209, 211;
$short-and-sweet-light: mix(#fff, $short-and-sweet, 20%);
$short-and-sweet-dark: mix(#000, $short-and-sweet, 20%);

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