Ocean Weed

CSS

:root {
  --ocean-weed: #6c6541;
  --ocean-weed-rgb: 108 101 65;
  --ocean-weed-oklch: oklch(0.504 0.053 98.5);
}

.element {
  color: var(--ocean-weed);
  background-color: hsl(50 25% 34%);
  border-color: oklch(0.504 0.053 98.5);
}

Tailwind CSS v4

@theme {
  --color-ocean-weed: #6c6541;
  --color-ocean-weed-50: #f8f6e5;
  --color-ocean-weed-100: #ebe9d5;
  --color-ocean-weed-200: #d9d5bc;
  --color-ocean-weed-300: #bdb99a;
  --color-ocean-weed-400: #a69f7b;
  --color-ocean-weed-500: #8f875e;
  --color-ocean-weed-600: #797250;
  --color-ocean-weed-700: #615b40;
  --color-ocean-weed-800: #48432d;
  --color-ocean-weed-900: #322e1e;
  --color-ocean-weed-950: #1e1b0e;
}

SCSS

$ocean-weed: #6c6541;
$ocean-weed-rgb: 108, 101, 65;
$ocean-weed-light: mix(#fff, $ocean-weed, 20%);
$ocean-weed-dark: mix(#000, $ocean-weed, 20%);

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