Yellow Press

CSS

:root {
  --yellow-press: #e6e382;
  --yellow-press-rgb: 230 227 130;
  --yellow-press-oklch: oklch(0.898 0.12 107);
}

.element {
  color: var(--yellow-press);
  background-color: hsl(58 67% 71%);
  border-color: oklch(0.898 0.12 107);
}

Tailwind CSS v4

@theme {
  --color-yellow-press: #e6e382;
  --color-yellow-press-50: #f7f9d1;
  --color-yellow-press-100: #eaecbe;
  --color-yellow-press-200: #d8d99d;
  --color-yellow-press-300: #bcbd73;
  --color-yellow-press-400: #a7a348;
  --color-yellow-press-500: #908b06;
  --color-yellow-press-600: #7a750e;
  --color-yellow-press-700: #615e0c;
  --color-yellow-press-800: #494405;
  --color-yellow-press-900: #322f04;
  --color-yellow-press-950: #1e1b00;
}

SCSS

$yellow-press: #e6e382;
$yellow-press-rgb: 230, 227, 130;
$yellow-press-light: mix(#fff, $yellow-press, 20%);
$yellow-press-dark: mix(#000, $yellow-press, 20%);

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