#F9BD8F

CSS

:root {
  --baltic-amber: #f9bd8f;
  --baltic-amber-rgb: 249 189 143;
  --baltic-amber-oklch: oklch(0.842 0.092 58.6);
}

.element {
  color: var(--baltic-amber);
  background-color: hsl(26 90% 77%);
  border-color: oklch(0.842 0.092 58.6);
}

Tailwind CSS v4

@theme {
  --color-baltic-amber: #f9bd8f;
  --color-baltic-amber-50: #fff0db;
  --color-baltic-amber-100: #ffe2ca;
  --color-baltic-amber-200: #f2ccad;
  --color-baltic-amber-300: #dbad88;
  --color-baltic-amber-400: #c79167;
  --color-baltic-amber-500: #b37644;
  --color-baltic-amber-600: #97643b;
  --color-baltic-amber-700: #79502f;
  --color-baltic-amber-800: #5a3a21;
  --color-baltic-amber-900: #3f2816;
  --color-baltic-amber-950: #281507;
}

SCSS

$baltic-amber: #f9bd8f;
$baltic-amber-rgb: 249, 189, 143;
$baltic-amber-light: mix(#fff, $baltic-amber, 20%);
$baltic-amber-dark: mix(#000, $baltic-amber, 20%);

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