In the Slip

CSS

:root {
  --in-the-slip: #e2c3cf;
  --in-the-slip-rgb: 226 195 207;
  --in-the-slip-oklch: oklch(0.847 0.038 352.6);
}

.element {
  color: var(--in-the-slip);
  background-color: hsl(337 35% 83%);
  border-color: oklch(0.847 0.038 352.6);
}

Tailwind CSS v4

@theme {
  --color-in-the-slip: #e2c3cf;
  --color-in-the-slip-50: #fff1f6;
  --color-in-the-slip-100: #f3e3e8;
  --color-in-the-slip-200: #e3ced5;
  --color-in-the-slip-300: #c8b0b8;
  --color-in-the-slip-400: #b296a0;
  --color-in-the-slip-500: #9b7c88;
  --color-in-the-slip-600: #836973;
  --color-in-the-slip-700: #69545c;
  --color-in-the-slip-800: #4d3d44;
  --color-in-the-slip-900: #362a2f;
  --color-in-the-slip-950: #21181c;
}

SCSS

$in-the-slip: #e2c3cf;
$in-the-slip-rgb: 226, 195, 207;
$in-the-slip-light: mix(#fff, $in-the-slip, 20%);
$in-the-slip-dark: mix(#000, $in-the-slip, 20%);

.element {
  color: $in-the-slip;
  box-shadow: 0 0 0 2px rgba($in-the-slip, 0.35);
}