Sweet and Sassy

CSS

:root {
  --sweet-and-sassy: #e1c9d1;
  --sweet-and-sassy-rgb: 225 201 209;
  --sweet-and-sassy-oklch: oklch(0.858 0.029 355.5);
}

.element {
  color: var(--sweet-and-sassy);
  background-color: hsl(340 29% 84%);
  border-color: oklch(0.858 0.029 355.5);
}

Tailwind CSS v4

@theme {
  --color-sweet-and-sassy: #e1c9d1;
  --color-sweet-and-sassy-50: #fdf2f5;
  --color-sweet-and-sassy-100: #f1e4e8;
  --color-sweet-and-sassy-200: #dfcfd4;
  --color-sweet-and-sassy-300: #c5b2b7;
  --color-sweet-and-sassy-400: #ad989f;
  --color-sweet-and-sassy-500: #977f87;
  --color-sweet-and-sassy-600: #7f6b72;
  --color-sweet-and-sassy-700: #66565b;
  --color-sweet-and-sassy-800: #4b3e43;
  --color-sweet-and-sassy-900: #342b2e;
  --color-sweet-and-sassy-950: #1f181b;
}

SCSS

$sweet-and-sassy: #e1c9d1;
$sweet-and-sassy-rgb: 225, 201, 209;
$sweet-and-sassy-light: mix(#fff, $sweet-and-sassy, 20%);
$sweet-and-sassy-dark: mix(#000, $sweet-and-sassy, 20%);

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