Sunset Blaze

CSS

:root {
  --sunset-blaze: #e95e2a;
  --sunset-blaze-rgb: 233 94 42;
  --sunset-blaze-oklch: oklch(0.654 0.184 39.3);
}

.element {
  color: var(--sunset-blaze);
  background-color: hsl(16 81% 54%);
  border-color: oklch(0.654 0.184 39.3);
}

Tailwind CSS v4

@theme {
  --color-sunset-blaze: #e95e2a;
  --color-sunset-blaze-50: #ffe5cd;
  --color-sunset-blaze-100: #ffd4b9;
  --color-sunset-blaze-200: #ffb996;
  --color-sunset-blaze-300: #ff956a;
  --color-sunset-blaze-400: #f67142;
  --color-sunset-blaze-500: #e44a00;
  --color-sunset-blaze-600: #c14001;
  --color-sunset-blaze-700: #9b3304;
  --color-sunset-blaze-800: #742307;
  --color-sunset-blaze-900: #521705;
  --color-sunset-blaze-950: #360700;
}

SCSS

$sunset-blaze: #e95e2a;
$sunset-blaze-rgb: 233, 94, 42;
$sunset-blaze-light: mix(#fff, $sunset-blaze, 20%);
$sunset-blaze-dark: mix(#000, $sunset-blaze, 20%);

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