Citrus Hill

CSS

:root {
  --citrus-hill: #f9a78d;
  --citrus-hill-rgb: 249 167 141;
  --citrus-hill-oklch: oklch(0.802 0.104 38.3);
}

.element {
  color: var(--citrus-hill);
  background-color: hsl(14 90% 76%);
  border-color: oklch(0.802 0.104 38.3);
}

Tailwind CSS v4

@theme {
  --color-citrus-hill: #f9a78d;
  --color-citrus-hill-50: #ffecdf;
  --color-citrus-hill-100: #ffddce;
  --color-citrus-hill-200: #fcc6b3;
  --color-citrus-hill-300: #e6a68f;
  --color-citrus-hill-400: #d48871;
  --color-citrus-hill-500: #c06c51;
  --color-citrus-hill-600: #a25c45;
  --color-citrus-hill-700: #824937;
  --color-citrus-hill-800: #613428;
  --color-citrus-hill-900: #44241b;
  --color-citrus-hill-950: #2c120b;
}

SCSS

$citrus-hill: #f9a78d;
$citrus-hill-rgb: 249, 167, 141;
$citrus-hill-light: mix(#fff, $citrus-hill, 20%);
$citrus-hill-dark: mix(#000, $citrus-hill, 20%);

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