Japanese Violet

CSS

:root {
  --japanese-violet: #5b3256;
  --japanese-violet-rgb: 91 50 86;
  --japanese-violet-oklch: oklch(0.383 0.079 331.6);
}

.element {
  color: var(--japanese-violet);
  background-color: hsl(307 29% 28%);
  border-color: oklch(0.383 0.079 331.6);
}

Tailwind CSS v4

@theme {
  --color-japanese-violet: #5b3256;
  --color-japanese-violet-50: #ffedff;
  --color-japanese-violet-100: #f9dff3;
  --color-japanese-violet-200: #eac8e3;
  --color-japanese-violet-300: #d1a9c9;
  --color-japanese-violet-400: #bb8db4;
  --color-japanese-violet-500: #a5729e;
  --color-japanese-violet-600: #8c6186;
  --color-japanese-violet-700: #704e6b;
  --color-japanese-violet-800: #523850;
  --color-japanese-violet-900: #392737;
  --color-japanese-violet-950: #231522;
}

SCSS

$japanese-violet: #5b3256;
$japanese-violet-rgb: 91, 50, 86;
$japanese-violet-light: mix(#fff, $japanese-violet, 20%);
$japanese-violet-dark: mix(#000, $japanese-violet, 20%);

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