Cargo River

CSS

:root {
  --cargo-river: #cfcdbb;
  --cargo-river-rgb: 207 205 187;
  --cargo-river-oklch: oklch(0.845 0.025 101.7);
}

.element {
  color: var(--cargo-river);
  background-color: hsl(54 17% 77%);
  border-color: oklch(0.845 0.025 101.7);
}

Tailwind CSS v4

@theme {
  --color-cargo-river: #cfcdbb;
  --color-cargo-river-50: #f6f6ee;
  --color-cargo-river-100: #e9e8df;
  --color-cargo-river-200: #d6d5c9;
  --color-cargo-river-300: #b9b8aa;
  --color-cargo-river-400: #a19f8f;
  --color-cargo-river-500: #898775;
  --color-cargo-river-600: #747263;
  --color-cargo-river-700: #5d5b4f;
  --color-cargo-river-800: #444339;
  --color-cargo-river-900: #2f2e27;
  --color-cargo-river-950: #1c1b15;
}

SCSS

$cargo-river: #cfcdbb;
$cargo-river-rgb: 207, 205, 187;
$cargo-river-light: mix(#fff, $cargo-river, 20%);
$cargo-river-dark: mix(#000, $cargo-river, 20%);

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