Nothing Less

CSS

:root {
  --nothing-less: #f2deb9;
  --nothing-less-rgb: 242 222 185;
  --nothing-less-oklch: oklch(0.908 0.053 82.9);
}

.element {
  color: var(--nothing-less);
  background-color: hsl(39 69% 84%);
  border-color: oklch(0.908 0.053 82.9);
}

Tailwind CSS v4

@theme {
  --color-nothing-less: #f2deb9;
  --color-nothing-less-50: #fcf4e4;
  --color-nothing-less-100: #f0e7d4;
  --color-nothing-less-200: #dfd3bb;
  --color-nothing-less-300: #c4b699;
  --color-nothing-less-400: #ae9c7b;
  --color-nothing-less-500: #98835d;
  --color-nothing-less-600: #806f4f;
  --color-nothing-less-700: #67593f;
  --color-nothing-less-800: #4c412d;
  --color-nothing-less-900: #352d1e;
  --color-nothing-less-950: #201a0e;
}

SCSS

$nothing-less: #f2deb9;
$nothing-less-rgb: 242, 222, 185;
$nothing-less-light: mix(#fff, $nothing-less, 20%);
$nothing-less-dark: mix(#000, $nothing-less, 20%);

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