Baltic Amber

CSS

:root {
  --baltic-amber: #fbb782;
  --baltic-amber-rgb: 251 183 130;
  --baltic-amber-oklch: oklch(0.831 0.105 58.6);
}

.element {
  color: var(--baltic-amber);
  background-color: hsl(26 94% 75%);
  border-color: oklch(0.831 0.105 58.6);
}

Tailwind CSS v4

@theme {
  --color-baltic-amber: #fbb782;
  --color-baltic-amber-50: #ffefd8;
  --color-baltic-amber-100: #ffe1c5;
  --color-baltic-amber-200: #f6cba7;
  --color-baltic-amber-300: #dfab80;
  --color-baltic-amber-400: #cd8f5e;
  --color-baltic-amber-500: #b97338;
  --color-baltic-amber-600: #9c6231;
  --color-baltic-amber-700: #7d4e26;
  --color-baltic-amber-800: #5d381b;
  --color-baltic-amber-900: #422612;
  --color-baltic-amber-950: #2a1404;
}

SCSS

$baltic-amber: #fbb782;
$baltic-amber-rgb: 251, 183, 130;
$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);
}