Japanese Wineberry

CSS

:root {
  --japanese-wineberry: #522c35;
  --japanese-wineberry-rgb: 82 44 53;
  --japanese-wineberry-oklch: oklch(0.345 0.057 5.3);
}

.element {
  color: var(--japanese-wineberry);
  background-color: hsl(346 30% 25%);
  border-color: oklch(0.345 0.057 5.3);
}

Tailwind CSS v4

@theme {
  --color-japanese-wineberry: #522c35;
  --color-japanese-wineberry-50: #ffeff2;
  --color-japanese-wineberry-100: #fae0e4;
  --color-japanese-wineberry-200: #ebcbd0;
  --color-japanese-wineberry-300: #d2acb2;
  --color-japanese-wineberry-400: #bd919a;
  --color-japanese-wineberry-500: #a77781;
  --color-japanese-wineberry-600: #8e646d;
  --color-japanese-wineberry-700: #715057;
  --color-japanese-wineberry-800: #543a40;
  --color-japanese-wineberry-900: #3a282c;
  --color-japanese-wineberry-950: #241619;
}

SCSS

$japanese-wineberry: #522c35;
$japanese-wineberry-rgb: 82, 44, 53;
$japanese-wineberry-light: mix(#fff, $japanese-wineberry, 20%);
$japanese-wineberry-dark: mix(#000, $japanese-wineberry, 20%);

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