Yellow Yarn

CSS

:root {
  --yellow-yarn: #fef6be;
  --yellow-yarn-rgb: 254 246 190;
  --yellow-yarn-oklch: oklch(0.966 0.072 100.8);
}

.element {
  color: var(--yellow-yarn);
  background-color: hsl(53 97% 87%);
  border-color: oklch(0.966 0.072 100.8);
}

Tailwind CSS v4

@theme {
  --color-yellow-yarn: #fef6be;
  --color-yellow-yarn-50: #f9f6df;
  --color-yellow-yarn-100: #ece9ce;
  --color-yellow-yarn-200: #d9d6b3;
  --color-yellow-yarn-300: #beb98f;
  --color-yellow-yarn-400: #a7a06e;
  --color-yellow-yarn-500: #90884d;
  --color-yellow-yarn-600: #7a7342;
  --color-yellow-yarn-700: #625c35;
  --color-yellow-yarn-800: #494325;
  --color-yellow-yarn-900: #322e18;
  --color-yellow-yarn-950: #1e1b09;
}

SCSS

$yellow-yarn: #fef6be;
$yellow-yarn-rgb: 254, 246, 190;
$yellow-yarn-light: mix(#fff, $yellow-yarn, 20%);
$yellow-yarn-dark: mix(#000, $yellow-yarn, 20%);

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