Pale Spring Bud

CSS

:root {
  --pale-spring-bud: #ecebbd;
  --pale-spring-bud-rgb: 236 235 189;
  --pale-spring-bud-oklch: oklch(0.929 0.06 106.5);
}

.element {
  color: var(--pale-spring-bud);
  background-color: hsl(59 55% 83%);
  border-color: oklch(0.929 0.06 106.5);
}

Tailwind CSS v4

@theme {
  --color-pale-spring-bud: #ecebbd;
  --color-pale-spring-bud-50: #f6f7e3;
  --color-pale-spring-bud-100: #e9ead3;
  --color-pale-spring-bud-200: #d6d7ba;
  --color-pale-spring-bud-300: #baba97;
  --color-pale-spring-bud-400: #a2a178;
  --color-pale-spring-bud-500: #8b895a;
  --color-pale-spring-bud-600: #75744d;
  --color-pale-spring-bud-700: #5e5d3d;
  --color-pale-spring-bud-800: #45442b;
  --color-pale-spring-bud-900: #302f1d;
  --color-pale-spring-bud-950: #1c1b0d;
}

SCSS

$pale-spring-bud: #ecebbd;
$pale-spring-bud-rgb: 236, 235, 189;
$pale-spring-bud-light: mix(#fff, $pale-spring-bud, 20%);
$pale-spring-bud-dark: mix(#000, $pale-spring-bud, 20%);

.element {
  color: $pale-spring-bud;
  box-shadow: 0 0 0 2px rgba($pale-spring-bud, 0.35);
}