Japanese Seaweed

CSS

:root {
  --japanese-seaweed: #53594b;
  --japanese-seaweed-rgb: 83 89 75;
  --japanese-seaweed-oklch: oklch(0.454 0.023 126.3);
}

.element {
  color: var(--japanese-seaweed);
  background-color: hsl(86 9% 32%);
  border-color: oklch(0.454 0.023 126.3);
}

Tailwind CSS v4

@theme {
  --color-japanese-seaweed: #53594b;
  --color-japanese-seaweed-50: #f3f6ef;
  --color-japanese-seaweed-100: #e5e9e1;
  --color-japanese-seaweed-200: #d1d6cc;
  --color-japanese-seaweed-300: #b4baad;
  --color-japanese-seaweed-400: #9ba192;
  --color-japanese-seaweed-500: #828979;
  --color-japanese-seaweed-600: #6e7466;
  --color-japanese-seaweed-700: #585d52;
  --color-japanese-seaweed-800: #40443b;
  --color-japanese-seaweed-900: #2c2f29;
  --color-japanese-seaweed-950: #1a1b16;
}

SCSS

$japanese-seaweed: #53594b;
$japanese-seaweed-rgb: 83, 89, 75;
$japanese-seaweed-light: mix(#fff, $japanese-seaweed, 20%);
$japanese-seaweed-dark: mix(#000, $japanese-seaweed, 20%);

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