Porch Swing

CSS

:root {
  --porch-swing: #597175;
  --porch-swing-rgb: 89 113 117;
  --porch-swing-oklch: oklch(0.531 0.029 208.8);
}

.element {
  color: var(--porch-swing);
  background-color: hsl(189 14% 40%);
  border-color: oklch(0.531 0.029 208.8);
}

Tailwind CSS v4

@theme {
  --color-porch-swing: #597175;
  --color-porch-swing-50: #ecf8fa;
  --color-porch-swing-100: #deebed;
  --color-porch-swing-200: #c7d8db;
  --color-porch-swing-300: #a7bcc0;
  --color-porch-swing-400: #8ca4a8;
  --color-porch-swing-500: #718c90;
  --color-porch-swing-600: #5f767a;
  --color-porch-swing-700: #4c5f62;
  --color-porch-swing-800: #374547;
  --color-porch-swing-900: #263031;
  --color-porch-swing-950: #141c1d;
}

SCSS

$porch-swing: #597175;
$porch-swing-rgb: 89, 113, 117;
$porch-swing-light: mix(#fff, $porch-swing, 20%);
$porch-swing-dark: mix(#000, $porch-swing, 20%);

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