Ember Red

CSS

:root {
  --ember-red: #792445;
  --ember-red-rgb: 121 36 69;
  --ember-red-oklch: oklch(0.402 0.122 0.4);
}

.element {
  color: var(--ember-red);
  background-color: hsl(337 54% 31%);
  border-color: oklch(0.402 0.122 0.4);
}

Tailwind CSS v4

@theme {
  --color-ember-red: #792445;
  --color-ember-red-50: #ffe7f2;
  --color-ember-red-100: #ffd8e4;
  --color-ember-red-200: #ffbfd0;
  --color-ember-red-300: #ec9db2;
  --color-ember-red-400: #d97f9b;
  --color-ember-red-500: #c56082;
  --color-ember-red-600: #a7526e;
  --color-ember-red-700: #864158;
  --color-ember-red-800: #632f42;
  --color-ember-red-900: #46202d;
  --color-ember-red-950: #2d0f1a;
}

SCSS

$ember-red: #792445;
$ember-red-rgb: 121, 36, 69;
$ember-red-light: mix(#fff, $ember-red, 20%);
$ember-red-dark: mix(#000, $ember-red, 20%);

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