Amiable Orange

CSS

:root {
  --amiable-orange: #df965b;
  --amiable-orange-rgb: 223 150 91;
  --amiable-orange-oklch: oklch(0.734 0.116 58.6);
}

.element {
  color: var(--amiable-orange);
  background-color: hsl(27 67% 62%);
  border-color: oklch(0.734 0.116 58.6);
}

Tailwind CSS v4

@theme {
  --color-amiable-orange: #df965b;
  --color-amiable-orange-50: #ffeed4;
  --color-amiable-orange-100: #ffe0c2;
  --color-amiable-orange-200: #fac9a2;
  --color-amiable-orange-300: #e3aa7a;
  --color-amiable-orange-400: #d18d55;
  --color-amiable-orange-500: #be702a;
  --color-amiable-orange-600: #a06026;
  --color-amiable-orange-700: #814c1e;
  --color-amiable-orange-800: #603715;
  --color-amiable-orange-900: #43250d;
  --color-amiable-orange-950: #2b1402;
}

SCSS

$amiable-orange: #df965b;
$amiable-orange-rgb: 223, 150, 91;
$amiable-orange-light: mix(#fff, $amiable-orange, 20%);
$amiable-orange-dark: mix(#000, $amiable-orange, 20%);

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