Oberon

CSS

:root {
  --oberon: #fcd389;
  --oberon-rgb: 252 211 137;
  --oberon-oklch: oklch(0.886 0.103 81.5);
}

.element {
  color: var(--oberon);
  background-color: hsl(39 95% 76%);
  border-color: oklch(0.886 0.103 81.5);
}

Tailwind CSS v4

@theme {
  --color-oberon: #fcd389;
  --color-oberon-50: #fff3d4;
  --color-oberon-100: #f9e6c2;
  --color-oberon-200: #ead1a2;
  --color-oberon-300: #d1b37a;
  --color-oberon-400: #bd9853;
  --color-oberon-500: #a87e27;
  --color-oberon-600: #8e6b23;
  --color-oberon-700: #72561c;
  --color-oberon-800: #553e12;
  --color-oberon-900: #3b2b0b;
  --color-oberon-950: #251801;
}

SCSS

$oberon: #fcd389;
$oberon-rgb: 252, 211, 137;
$oberon-light: mix(#fff, $oberon, 20%);
$oberon-dark: mix(#000, $oberon, 20%);

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