Root Beer Float

CSS

:root {
  --root-beer-float: #cfa46b;
  --root-beer-float-rgb: 207 164 107;
  --root-beer-float-oklch: oklch(0.745 0.09 73.5);
}

.element {
  color: var(--root-beer-float);
  background-color: hsl(34 51% 62%);
  border-color: oklch(0.745 0.09 73.5);
}

Tailwind CSS v4

@theme {
  --color-root-beer-float: #cfa46b;
  --color-root-beer-float-50: #fff2d9;
  --color-root-beer-float-100: #fae4c7;
  --color-root-beer-float-200: #ebd0aa;
  --color-root-beer-float-300: #d2b284;
  --color-root-beer-float-400: #bf9661;
  --color-root-beer-float-500: #aa7c3c;
  --color-root-beer-float-600: #906934;
  --color-root-beer-float-700: #735429;
  --color-root-beer-float-800: #563d1d;
  --color-root-beer-float-900: #3c2a13;
  --color-root-beer-float-950: #261705;
}

SCSS

$root-beer-float: #cfa46b;
$root-beer-float-rgb: 207, 164, 107;
$root-beer-float-light: mix(#fff, $root-beer-float, 20%);
$root-beer-float-dark: mix(#000, $root-beer-float, 20%);

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