Red Bell Pepper

CSS

:root {
  --red-bell-pepper: #dd3300;
  --red-bell-pepper-rgb: 221 51 0;
  --red-bell-pepper-oklch: oklch(0.586 0.211 33.9);
}

.element {
  color: var(--red-bell-pepper);
  background-color: hsl(14 100% 43%);
  border-color: oklch(0.586 0.211 33.9);
}

Tailwind CSS v4

@theme {
  --color-red-bell-pepper: #dd3300;
  --color-red-bell-pepper-50: #ffe0cc;
  --color-red-bell-pepper-100: #ffcfb7;
  --color-red-bell-pepper-200: #ffb394;
  --color-red-bell-pepper-300: #ff8b67;
  --color-red-bell-pepper-400: #ff6340;
  --color-red-bell-pepper-500: #f23000;
  --color-red-bell-pepper-600: #cc2c00;
  --color-red-bell-pepper-700: #a42401;
  --color-red-bell-pepper-800: #7b1706;
  --color-red-bell-pepper-900: #570f04;
  --color-red-bell-pepper-950: #3a0100;
}

SCSS

$red-bell-pepper: #dd3300;
$red-bell-pepper-rgb: 221, 51, 0;
$red-bell-pepper-light: mix(#fff, $red-bell-pepper, 20%);
$red-bell-pepper-dark: mix(#000, $red-bell-pepper, 20%);

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