Ecstatic Red

CSS

:root {
  --ecstatic-red: #aa1122;
  --ecstatic-red-rgb: 170 17 34;
  --ecstatic-red-oklch: oklch(0.472 0.182 24);
}

.element {
  color: var(--ecstatic-red);
  background-color: hsl(353 82% 37%);
  border-color: oklch(0.472 0.182 24);
}

Tailwind CSS v4

@theme {
  --color-ecstatic-red: #aa1122;
  --color-ecstatic-red-50: #ffe2da;
  --color-ecstatic-red-100: #ffd1c8;
  --color-ecstatic-red-200: #ffb5ab;
  --color-ecstatic-red-300: #ff9086;
  --color-ecstatic-red-400: #f76b68;
  --color-ecstatic-red-500: #e64246;
  --color-ecstatic-red-600: #c23a3c;
  --color-ecstatic-red-700: #9c2e30;
  --color-ecstatic-red-800: #751f24;
  --color-ecstatic-red-900: #521518;
  --color-ecstatic-red-950: #370509;
}

SCSS

$ecstatic-red: #aa1122;
$ecstatic-red-rgb: 170, 17, 34;
$ecstatic-red-light: mix(#fff, $ecstatic-red, 20%);
$ecstatic-red-dark: mix(#000, $ecstatic-red, 20%);

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