#E97B6C

CSS

:root {
  --melondrama: #e97b6c;
  --melondrama-rgb: 233 123 108;
  --melondrama-oklch: oklch(0.704 0.139 29.1);
}

.element {
  color: var(--melondrama);
  background-color: hsl(7 74% 67%);
  border-color: oklch(0.704 0.139 29.1);
}

Tailwind CSS v4

@theme {
  --color-melondrama: #e97b6c;
  --color-melondrama-50: #ffe7dd;
  --color-melondrama-100: #ffd8cc;
  --color-melondrama-200: #ffbfb0;
  --color-melondrama-300: #f69c8c;
  --color-melondrama-400: #e57c6e;
  --color-melondrama-500: #d25c4e;
  --color-melondrama-600: #b14e42;
  --color-melondrama-700: #8f3f35;
  --color-melondrama-800: #6a2c27;
  --color-melondrama-900: #4b1e1a;
  --color-melondrama-950: #310d0b;
}

SCSS

$melondrama: #e97b6c;
$melondrama-rgb: 233, 123, 108;
$melondrama-light: mix(#fff, $melondrama, 20%);
$melondrama-dark: mix(#000, $melondrama, 20%);

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