Bread and Butter

CSS

:root {
  --bread-and-butter: #ffd182;
  --bread-and-butter-rgb: 255 209 130;
  --bread-and-butter-oklch: oklch(0.884 0.11 80.1);
}

.element {
  color: var(--bread-and-butter);
  background-color: hsl(38 100% 75%);
  border-color: oklch(0.884 0.11 80.1);
}

Tailwind CSS v4

@theme {
  --color-bread-and-butter: #ffd182;
  --color-bread-and-butter-50: #fff3d2;
  --color-bread-and-butter-100: #fae5bf;
  --color-bread-and-butter-200: #ecd09f;
  --color-bread-and-butter-300: #d4b275;
  --color-bread-and-butter-400: #c0974d;
  --color-bread-and-butter-500: #ac7d19;
  --color-bread-and-butter-600: #916a19;
  --color-bread-and-butter-700: #745414;
  --color-bread-and-butter-800: #573d0c;
  --color-bread-and-butter-900: #3d2a08;
  --color-bread-and-butter-950: #261700;
}

SCSS

$bread-and-butter: #ffd182;
$bread-and-butter-rgb: 255, 209, 130;
$bread-and-butter-light: mix(#fff, $bread-and-butter, 20%);
$bread-and-butter-dark: mix(#000, $bread-and-butter, 20%);

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