Laughing Orange

CSS

:root {
  --laughing-orange: #f49807;
  --laughing-orange-rgb: 244 152 7;
  --laughing-orange-oklch: oklch(0.757 0.166 67.3);
}

.element {
  color: var(--laughing-orange);
  background-color: hsl(37 94% 49%);
  border-color: oklch(0.757 0.166 67.3);
}

Tailwind CSS v4

@theme {
  --color-laughing-orange: #f49807;
  --color-laughing-orange-50: #ffeec2;
  --color-laughing-orange-100: #ffdfac;
  --color-laughing-orange-200: #ffc884;
  --color-laughing-orange-300: #eea74f;
  --color-laughing-orange-400: #de8800;
  --color-laughing-orange-500: #cb6900;
  --color-laughing-orange-600: #ac5a00;
  --color-laughing-orange-700: #8a4800;
  --color-laughing-orange-800: #683300;
  --color-laughing-orange-900: #492200;
  --color-laughing-orange-950: #2f1100;
}

SCSS

$laughing-orange: #f49807;
$laughing-orange-rgb: 244, 152, 7;
$laughing-orange-light: mix(#fff, $laughing-orange, 20%);
$laughing-orange-dark: mix(#000, $laughing-orange, 20%);

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