Embroidery

CSS

:root {
  --embroidery: #d4bebf;
  --embroidery-rgb: 212 190 191;
  --embroidery-oklch: oklch(0.82 0.025 14.5);
}

.element {
  color: var(--embroidery);
  background-color: hsl(357 20% 79%);
  border-color: oklch(0.82 0.025 14.5);
}

Tailwind CSS v4

@theme {
  --color-embroidery: #d4bebf;
  --color-embroidery-50: #fcf2f2;
  --color-embroidery-100: #f0e5e5;
  --color-embroidery-200: #dfd0d0;
  --color-embroidery-300: #c4b3b3;
  --color-embroidery-400: #ad999a;
  --color-embroidery-500: #968081;
  --color-embroidery-600: #7f6c6d;
  --color-embroidery-700: #665657;
  --color-embroidery-800: #4b3f40;
  --color-embroidery-900: #342b2c;
  --color-embroidery-950: #1f1919;
}

SCSS

$embroidery: #d4bebf;
$embroidery-rgb: 212, 190, 191;
$embroidery-light: mix(#fff, $embroidery, 20%);
$embroidery-dark: mix(#000, $embroidery, 20%);

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