Japanese Kimono

CSS

:root {
  --japanese-kimono: #cc6358;
  --japanese-kimono-rgb: 204 99 88;
  --japanese-kimono-oklch: oklch(0.623 0.136 27.7);
}

.element {
  color: var(--japanese-kimono);
  background-color: hsl(6 53% 57%);
  border-color: oklch(0.623 0.136 27.7);
}

Tailwind CSS v4

@theme {
  --color-japanese-kimono: #cc6358;
  --color-japanese-kimono-50: #ffe8df;
  --color-japanese-kimono-100: #ffd8ce;
  --color-japanese-kimono-200: #ffbfb2;
  --color-japanese-kimono-300: #f59d8e;
  --color-japanese-kimono-400: #e37d71;
  --color-japanese-kimono-500: #d15d52;
  --color-japanese-kimono-600: #b04f46;
  --color-japanese-kimono-700: #8e3f37;
  --color-japanese-kimono-800: #6a2d29;
  --color-japanese-kimono-900: #4a1e1b;
  --color-japanese-kimono-950: #310e0c;
}

SCSS

$japanese-kimono: #cc6358;
$japanese-kimono-rgb: 204, 99, 88;
$japanese-kimono-light: mix(#fff, $japanese-kimono, 20%);
$japanese-kimono-dark: mix(#000, $japanese-kimono, 20%);

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