Minified Yellow

CSS

:root {
  --minified-yellow: #f4ebd4;
  --minified-yellow-rgb: 244 235 212;
  --minified-yellow-oklch: oklch(0.941 0.032 89.1);
}

.element {
  color: var(--minified-yellow);
  background-color: hsl(43 59% 89%);
  border-color: oklch(0.941 0.032 89.1);
}

Tailwind CSS v4

@theme {
  --color-minified-yellow: #f4ebd4;
  --color-minified-yellow-50: #f8f5eb;
  --color-minified-yellow-100: #ece8dc;
  --color-minified-yellow-200: #d9d4c5;
  --color-minified-yellow-300: #bdb7a5;
  --color-minified-yellow-400: #a69e89;
  --color-minified-yellow-500: #8f866e;
  --color-minified-yellow-600: #79715e;
  --color-minified-yellow-700: #605a4b;
  --color-minified-yellow-800: #474236;
  --color-minified-yellow-900: #312d25;
  --color-minified-yellow-950: #1d1a13;
}

SCSS

$minified-yellow: #f4ebd4;
$minified-yellow-rgb: 244, 235, 212;
$minified-yellow-light: mix(#fff, $minified-yellow, 20%);
$minified-yellow-dark: mix(#000, $minified-yellow, 20%);

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