Bright Mango

CSS

:root {
  --bright-mango: #ff8830;
  --bright-mango-rgb: 255 136 48;
  --bright-mango-oklch: oklch(0.746 0.172 52.1);
}

.element {
  color: var(--bright-mango);
  background-color: hsl(26 100% 59%);
  border-color: oklch(0.746 0.172 52.1);
}

Tailwind CSS v4

@theme {
  --color-bright-mango: #ff8830;
  --color-bright-mango-50: #ffe9c7;
  --color-bright-mango-100: #ffd9b2;
  --color-bright-mango-200: #ffc08d;
  --color-bright-mango-300: #fb9d5c;
  --color-bright-mango-400: #eb7c28;
  --color-bright-mango-500: #da5a00;
  --color-bright-mango-600: #b84d00;
  --color-bright-mango-700: #943d00;
  --color-bright-mango-800: #6f2b00;
  --color-bright-mango-900: #4e1d00;
  --color-bright-mango-950: #330c00;
}

SCSS

$bright-mango: #ff8830;
$bright-mango-rgb: 255, 136, 48;
$bright-mango-light: mix(#fff, $bright-mango, 20%);
$bright-mango-dark: mix(#000, $bright-mango, 20%);

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