Japanese Carmine

CSS

:root {
  --japanese-carmine: #9f2832;
  --japanese-carmine-rgb: 159 40 50;
  --japanese-carmine-oklch: oklch(0.469 0.154 21.2);
}

.element {
  color: var(--japanese-carmine);
  background-color: hsl(355 60% 39%);
  border-color: oklch(0.469 0.154 21.2);
}

Tailwind CSS v4

@theme {
  --color-japanese-carmine: #9f2832;
  --color-japanese-carmine-50: #ffe5e0;
  --color-japanese-carmine-100: #ffd4d0;
  --color-japanese-carmine-200: #ffbab5;
  --color-japanese-carmine-300: #fd9792;
  --color-japanese-carmine-400: #ec7576;
  --color-japanese-carmine-500: #d95257;
  --color-japanese-carmine-600: #b8464b;
  --color-japanese-carmine-700: #94383b;
  --color-japanese-carmine-800: #6e272c;
  --color-japanese-carmine-900: #4e1a1e;
  --color-japanese-carmine-950: #330a0e;
}

SCSS

$japanese-carmine: #9f2832;
$japanese-carmine-rgb: 159, 40, 50;
$japanese-carmine-light: mix(#fff, $japanese-carmine, 20%);
$japanese-carmine-dark: mix(#000, $japanese-carmine, 20%);

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