Sunday Afternoon

CSS

:root {
  --sunday-afternoon: #f6c778;
  --sunday-afternoon-rgb: 246 199 120;
  --sunday-afternoon-oklch: oklch(0.855 0.111 79.4);
}

.element {
  color: var(--sunday-afternoon);
  background-color: hsl(38 88% 72%);
  border-color: oklch(0.855 0.111 79.4);
}

Tailwind CSS v4

@theme {
  --color-sunday-afternoon: #f6c778;
  --color-sunday-afternoon-50: #fff3d2;
  --color-sunday-afternoon-100: #fbe5bf;
  --color-sunday-afternoon-200: #edd09e;
  --color-sunday-afternoon-300: #d4b274;
  --color-sunday-afternoon-400: #c1974c;
  --color-sunday-afternoon-500: #ad7c17;
  --color-sunday-afternoon-600: #926918;
  --color-sunday-afternoon-700: #755413;
  --color-sunday-afternoon-800: #573d0c;
  --color-sunday-afternoon-900: #3d2a07;
  --color-sunday-afternoon-950: #271700;
}

SCSS

$sunday-afternoon: #f6c778;
$sunday-afternoon-rgb: 246, 199, 120;
$sunday-afternoon-light: mix(#fff, $sunday-afternoon, 20%);
$sunday-afternoon-dark: mix(#000, $sunday-afternoon, 20%);

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