Diminished Orange

CSS

:root {
  --diminished-orange: #fae9e1;
  --diminished-orange-rgb: 250 233 225;
  --diminished-orange-oklch: oklch(0.945 0.021 47);
}

.element {
  color: var(--diminished-orange);
  background-color: hsl(19 71% 93%);
  border-color: oklch(0.945 0.021 47);
}

Tailwind CSS v4

@theme {
  --color-diminished-orange: #fae9e1;
  --color-diminished-orange-50: #fbf3f0;
  --color-diminished-orange-100: #eee6e2;
  --color-diminished-orange-200: #dcd2cc;
  --color-diminished-orange-300: #c1b4ae;
  --color-diminished-orange-400: #aa9b94;
  --color-diminished-orange-500: #93827a;
  --color-diminished-orange-600: #7c6e68;
  --color-diminished-orange-700: #635853;
  --color-diminished-orange-800: #49403c;
  --color-diminished-orange-900: #332c29;
  --color-diminished-orange-950: #1e1917;
}

SCSS

$diminished-orange: #fae9e1;
$diminished-orange-rgb: 250, 233, 225;
$diminished-orange-light: mix(#fff, $diminished-orange, 20%);
$diminished-orange-dark: mix(#000, $diminished-orange, 20%);

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