Word of Mouth

CSS

:root {
  --word-of-mouth: #f2be96;
  --word-of-mouth-rgb: 242 190 150;
  --word-of-mouth-oklch: oklch(0.839 0.08 59);
}

.element {
  color: var(--word-of-mouth);
  background-color: hsl(26 78% 77%);
  border-color: oklch(0.839 0.08 59);
}

Tailwind CSS v4

@theme {
  --color-word-of-mouth: #f2be96;
  --color-word-of-mouth-50: #fff1df;
  --color-word-of-mouth-100: #fde2ce;
  --color-word-of-mouth-200: #eecdb2;
  --color-word-of-mouth-300: #d6af8e;
  --color-word-of-mouth-400: #c2936f;
  --color-word-of-mouth-500: #ae794e;
  --color-word-of-mouth-600: #936643;
  --color-word-of-mouth-700: #765235;
  --color-word-of-mouth-800: #583b26;
  --color-word-of-mouth-900: #3d2919;
  --color-word-of-mouth-950: #27160a;
}

SCSS

$word-of-mouth: #f2be96;
$word-of-mouth-rgb: 242, 190, 150;
$word-of-mouth-light: mix(#fff, $word-of-mouth, 20%);
$word-of-mouth-dark: mix(#000, $word-of-mouth, 20%);

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