First Day of School

CSS

:root {
  --first-day-of-school: #fadba0;
  --first-day-of-school-rgb: 250 219 160;
  --first-day-of-school-oklch: oklch(0.904 0.083 83.2);
}

.element {
  color: var(--first-day-of-school);
  background-color: hsl(39 90% 80%);
  border-color: oklch(0.904 0.083 83.2);
}

Tailwind CSS v4

@theme {
  --color-first-day-of-school: #fadba0;
  --color-first-day-of-school-50: #fff4db;
  --color-first-day-of-school-100: #f5e6c9;
  --color-first-day-of-school-200: #e4d2ad;
  --color-first-day-of-school-300: #cbb587;
  --color-first-day-of-school-400: #b69a65;
  --color-first-day-of-school-500: #a18141;
  --color-first-day-of-school-600: #886d38;
  --color-first-day-of-school-700: #6d572d;
  --color-first-day-of-school-800: #513f1f;
  --color-first-day-of-school-900: #382c14;
  --color-first-day-of-school-950: #231906;
}

SCSS

$first-day-of-school: #fadba0;
$first-day-of-school-rgb: 250, 219, 160;
$first-day-of-school-light: mix(#fff, $first-day-of-school, 20%);
$first-day-of-school-dark: mix(#000, $first-day-of-school, 20%);

.element {
  color: $first-day-of-school;
  box-shadow: 0 0 0 2px rgba($first-day-of-school, 0.35);
}