Paris Creek

CSS

:root {
  --paris-creek: #888873;
  --paris-creek-rgb: 136 136 115;
  --paris-creek-oklch: oklch(0.621 0.031 107.3);
}

.element {
  color: var(--paris-creek);
  background-color: hsl(60 8% 49%);
  border-color: oklch(0.621 0.031 107.3);
}

Tailwind CSS v4

@theme {
  --color-paris-creek: #888873;
  --color-paris-creek-50: #f5f6ec;
  --color-paris-creek-100: #e8e9dd;
  --color-paris-creek-200: #d5d6c7;
  --color-paris-creek-300: #b8b9a7;
  --color-paris-creek-400: #a0a08c;
  --color-paris-creek-500: #888871;
  --color-paris-creek-600: #737360;
  --color-paris-creek-700: #5c5c4c;
  --color-paris-creek-800: #444337;
  --color-paris-creek-900: #2f2e26;
  --color-paris-creek-950: #1b1b14;
}

SCSS

$paris-creek: #888873;
$paris-creek-rgb: 136, 136, 115;
$paris-creek-light: mix(#fff, $paris-creek, 20%);
$paris-creek-dark: mix(#000, $paris-creek, 20%);

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