Super Hero

CSS

:root {
  --super-hero: #ca535b;
  --super-hero-rgb: 202 83 91;
  --super-hero-oklch: oklch(0.598 0.152 18.9);
}

.element {
  color: var(--super-hero);
  background-color: hsl(356 53% 56%);
  border-color: oklch(0.598 0.152 18.9);
}

Tailwind CSS v4

@theme {
  --color-super-hero: #ca535b;
  --color-super-hero-50: #ffe5e3;
  --color-super-hero-100: #ffd5d2;
  --color-super-hero-200: #ffbbb8;
  --color-super-hero-300: #fb9796;
  --color-super-hero-400: #ea767b;
  --color-super-hero-500: #d8535d;
  --color-super-hero-600: #b6474f;
  --color-super-hero-700: #93393f;
  --color-super-hero-800: #6d282f;
  --color-super-hero-900: #4d1b20;
  --color-super-hero-950: #320a0f;
}

SCSS

$super-hero: #ca535b;
$super-hero-rgb: 202, 83, 91;
$super-hero-light: mix(#fff, $super-hero, 20%);
$super-hero-dark: mix(#000, $super-hero, 20%);

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