Alpine Berry Yellow

CSS

:root {
  --alpine-berry-yellow: #f7e0ba;
  --alpine-berry-yellow-rgb: 247 224 186;
  --alpine-berry-yellow-oklch: oklch(0.916 0.056 80.3);
}

.element {
  color: var(--alpine-berry-yellow);
  background-color: hsl(37 79% 85%);
  border-color: oklch(0.916 0.056 80.3);
}

Tailwind CSS v4

@theme {
  --color-alpine-berry-yellow: #f7e0ba;
  --color-alpine-berry-yellow-50: #fdf4e4;
  --color-alpine-berry-yellow-100: #f1e7d3;
  --color-alpine-berry-yellow-200: #e0d3ba;
  --color-alpine-berry-yellow-300: #c6b598;
  --color-alpine-berry-yellow-400: #b09b79;
  --color-alpine-berry-yellow-500: #9a825b;
  --color-alpine-berry-yellow-600: #826e4e;
  --color-alpine-berry-yellow-700: #68583e;
  --color-alpine-berry-yellow-800: #4d402c;
  --color-alpine-berry-yellow-900: #362c1e;
  --color-alpine-berry-yellow-950: #21190e;
}

SCSS

$alpine-berry-yellow: #f7e0ba;
$alpine-berry-yellow-rgb: 247, 224, 186;
$alpine-berry-yellow-light: mix(#fff, $alpine-berry-yellow, 20%);
$alpine-berry-yellow-dark: mix(#000, $alpine-berry-yellow, 20%);

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