Discreet Orange

CSS

:root {
  --discreet-orange: #ffad98;
  --discreet-orange-rgb: 255 173 152;
  --discreet-orange-oklch: oklch(0.822 0.102 35);
}

.element {
  color: var(--discreet-orange);
  background-color: hsl(12 100% 80%);
  border-color: oklch(0.822 0.102 35);
}

Tailwind CSS v4

@theme {
  --color-discreet-orange: #ffad98;
  --color-discreet-orange-50: #ffece1;
  --color-discreet-orange-100: #ffddd0;
  --color-discreet-orange-200: #fcc6b6;
  --color-discreet-orange-300: #e6a693;
  --color-discreet-orange-400: #d38875;
  --color-discreet-orange-500: #bf6c57;
  --color-discreet-orange-600: #a25c4a;
  --color-discreet-orange-700: #82493b;
  --color-discreet-orange-800: #61342b;
  --color-discreet-orange-900: #44241d;
  --color-discreet-orange-950: #2c120d;
}

SCSS

$discreet-orange: #ffad98;
$discreet-orange-rgb: 255, 173, 152;
$discreet-orange-light: mix(#fff, $discreet-orange, 20%);
$discreet-orange-dark: mix(#000, $discreet-orange, 20%);

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