Out of Fashion

CSS

:root {
  --out-of-fashion: #f26d8f;
  --out-of-fashion-rgb: 242 109 143;
  --out-of-fashion-oklch: oklch(0.704 0.166 6.4);
}

.element {
  color: var(--out-of-fashion);
  background-color: hsl(345 84% 69%);
  border-color: oklch(0.704 0.166 6.4);
}

Tailwind CSS v4

@theme {
  --color-out-of-fashion: #f26d8f;
  --color-out-of-fashion-50: #ffe2ec;
  --color-out-of-fashion-100: #ffd1dd;
  --color-out-of-fashion-200: #ffb6c6;
  --color-out-of-fashion-300: #ff92a7;
  --color-out-of-fashion-400: #ed6f8f;
  --color-out-of-fashion-500: #db4a74;
  --color-out-of-fashion-600: #b94063;
  --color-out-of-fashion-700: #95334f;
  --color-out-of-fashion-800: #6e243b;
  --color-out-of-fashion-900: #4e1829;
  --color-out-of-fashion-950: #330817;
}

SCSS

$out-of-fashion: #f26d8f;
$out-of-fashion-rgb: 242, 109, 143;
$out-of-fashion-light: mix(#fff, $out-of-fashion, 20%);
$out-of-fashion-dark: mix(#000, $out-of-fashion, 20%);

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