Red Clown

CSS

:root {
  --red-clown: #d43e38;
  --red-clown-rgb: 212 62 56;
  --red-clown-oklch: oklch(0.584 0.188 27);
}

.element {
  color: var(--red-clown);
  background-color: hsl(2 64% 53%);
  border-color: oklch(0.584 0.188 27);
}

Tailwind CSS v4

@theme {
  --color-red-clown: #d43e38;
  --color-red-clown-50: #ffe2d6;
  --color-red-clown-100: #ffd1c4;
  --color-red-clown-200: #ffb5a6;
  --color-red-clown-300: #ff8f7e;
  --color-red-clown-400: #fa6a5f;
  --color-red-clown-500: #e83f3a;
  --color-red-clown-600: #c43832;
  --color-red-clown-700: #9e2c28;
  --color-red-clown-800: #761e1e;
  --color-red-clown-900: #531414;
  --color-red-clown-950: #370406;
}

SCSS

$red-clown: #d43e38;
$red-clown-rgb: 212, 62, 56;
$red-clown-light: mix(#fff, $red-clown, 20%);
$red-clown-dark: mix(#000, $red-clown, 20%);

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