Light and Fluffy

CSS

:root {
  --light-and-fluffy: #ffd5a1;
  --light-and-fluffy-rgb: 255 213 161;
  --light-and-fluffy-oklch: oklch(0.897 0.082 72.4);
}

.element {
  color: var(--light-and-fluffy);
  background-color: hsl(33 100% 82%);
  border-color: oklch(0.897 0.082 72.4);
}

Tailwind CSS v4

@theme {
  --color-light-and-fluffy: #ffd5a1;
  --color-light-and-fluffy-50: #fff2dc;
  --color-light-and-fluffy-100: #f9e5ca;
  --color-light-and-fluffy-200: #ead0ae;
  --color-light-and-fluffy-300: #d1b289;
  --color-light-and-fluffy-400: #bd9768;
  --color-light-and-fluffy-500: #a87d45;
  --color-light-and-fluffy-600: #8e6a3c;
  --color-light-and-fluffy-700: #71552f;
  --color-light-and-fluffy-800: #543d21;
  --color-light-and-fluffy-900: #3b2a16;
  --color-light-and-fluffy-950: #251807;
}

SCSS

$light-and-fluffy: #ffd5a1;
$light-and-fluffy-rgb: 255, 213, 161;
$light-and-fluffy-light: mix(#fff, $light-and-fluffy, 20%);
$light-and-fluffy-dark: mix(#000, $light-and-fluffy, 20%);

.element {
  color: $light-and-fluffy;
  box-shadow: 0 0 0 2px rgba($light-and-fluffy, 0.35);
}