Yellow Mandarin

CSS

:root {
  --yellow-mandarin: #d28034;
  --yellow-mandarin-rgb: 210 128 52;
  --yellow-mandarin-oklch: oklch(0.674 0.134 59.6);
}

.element {
  color: var(--yellow-mandarin);
  background-color: hsl(29 64% 51%);
  border-color: oklch(0.674 0.134 59.6);
}

Tailwind CSS v4

@theme {
  --color-yellow-mandarin: #d28034;
  --color-yellow-mandarin-50: #ffedcf;
  --color-yellow-mandarin-100: #ffdfbb;
  --color-yellow-mandarin-200: #ffc899;
  --color-yellow-mandarin-300: #e9a76d;
  --color-yellow-mandarin-400: #d88944;
  --color-yellow-mandarin-500: #c56c00;
  --color-yellow-mandarin-600: #a65c05;
  --color-yellow-mandarin-700: #864907;
  --color-yellow-mandarin-800: #643405;
  --color-yellow-mandarin-900: #462404;
  --color-yellow-mandarin-950: #2d1200;
}

SCSS

$yellow-mandarin: #d28034;
$yellow-mandarin-rgb: 210, 128, 52;
$yellow-mandarin-light: mix(#fff, $yellow-mandarin, 20%);
$yellow-mandarin-dark: mix(#000, $yellow-mandarin, 20%);

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