Japanese Coral

CSS

:root {
  --japanese-coral: #c47a88;
  --japanese-coral-rgb: 196 122 136;
  --japanese-coral-oklch: oklch(0.662 0.094 7.7);
}

.element {
  color: var(--japanese-coral);
  background-color: hsl(349 39% 62%);
  border-color: oklch(0.662 0.094 7.7);
}

Tailwind CSS v4

@theme {
  --color-japanese-coral: #c47a88;
  --color-japanese-coral-50: #ffebef;
  --color-japanese-coral-100: #ffdce1;
  --color-japanese-coral-200: #f9c4cb;
  --color-japanese-coral-300: #e3a4ad;
  --color-japanese-coral-400: #cf8794;
  --color-japanese-coral-500: #bb6b7b;
  --color-japanese-coral-600: #9e5b68;
  --color-japanese-coral-700: #7e4853;
  --color-japanese-coral-800: #5e343e;
  --color-japanese-coral-900: #42232a;
  --color-japanese-coral-950: #2a1218;
}

SCSS

$japanese-coral: #c47a88;
$japanese-coral-rgb: 196, 122, 136;
$japanese-coral-light: mix(#fff, $japanese-coral, 20%);
$japanese-coral-dark: mix(#000, $japanese-coral, 20%);

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