Highlight

CSS

:root {
  --highlight: #eef0de;
  --highlight-rgb: 238 240 222;
  --highlight-oklch: oklch(0.949 0.024 112);
}

.element {
  color: var(--highlight);
  background-color: hsl(67 37% 91%);
  border-color: oklch(0.949 0.024 112);
}

Tailwind CSS v4

@theme {
  --color-highlight: #eef0de;
  --color-highlight-50: #f5f6ee;
  --color-highlight-100: #e7e9e0;
  --color-highlight-200: #d4d6ca;
  --color-highlight-300: #b7b9ab;
  --color-highlight-400: #9ea090;
  --color-highlight-500: #868876;
  --color-highlight-600: #727364;
  --color-highlight-700: #5b5c50;
  --color-highlight-800: #43433a;
  --color-highlight-900: #2e2e28;
  --color-highlight-950: #1b1b16;
}

SCSS

$highlight: #eef0de;
$highlight-rgb: 238, 240, 222;
$highlight-light: mix(#fff, $highlight, 20%);
$highlight-dark: mix(#000, $highlight, 20%);

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