Porch Swing Beige

CSS

:root {
  --porch-swing-beige: #d2cabe;
  --porch-swing-beige-rgb: 210 202 190;
  --porch-swing-beige-oklch: oklch(0.842 0.019 78.2);
}

.element {
  color: var(--porch-swing-beige);
  background-color: hsl(36 18% 78%);
  border-color: oklch(0.842 0.019 78.2);
}

Tailwind CSS v4

@theme {
  --color-porch-swing-beige: #d2cabe;
  --color-porch-swing-beige-50: #f8f5ef;
  --color-porch-swing-beige-100: #ebe7e1;
  --color-porch-swing-beige-200: #d8d3cb;
  --color-porch-swing-beige-300: #bcb7ad;
  --color-porch-swing-beige-400: #a59d92;
  --color-porch-swing-beige-500: #8d8579;
  --color-porch-swing-beige-600: #777166;
  --color-porch-swing-beige-700: #5f5a52;
  --color-porch-swing-beige-800: #46423b;
  --color-porch-swing-beige-900: #312d29;
  --color-porch-swing-beige-950: #1d1a17;
}

SCSS

$porch-swing-beige: #d2cabe;
$porch-swing-beige-rgb: 210, 202, 190;
$porch-swing-beige-light: mix(#fff, $porch-swing-beige, 20%);
$porch-swing-beige-dark: mix(#000, $porch-swing-beige, 20%);

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