Breathe

CSS

:root {
  --breathe: #d1d2b8;
  --breathe-rgb: 209 210 184;
  --breathe-oklch: oklch(0.856 0.035 108.9);
}

.element {
  color: var(--breathe);
  background-color: hsl(62 22% 77%);
  border-color: oklch(0.856 0.035 108.9);
}

Tailwind CSS v4

@theme {
  --color-breathe: #d1d2b8;
  --color-breathe-50: #f5f6eb;
  --color-breathe-100: #e8e9dc;
  --color-breathe-200: #d4d6c5;
  --color-breathe-300: #b8b9a5;
  --color-breathe-400: #a0a089;
  --color-breathe-500: #88886e;
  --color-breathe-600: #73735d;
  --color-breathe-700: #5c5c4a;
  --color-breathe-800: #444335;
  --color-breathe-900: #2f2f24;
  --color-breathe-950: #1b1b13;
}

SCSS

$breathe: #d1d2b8;
$breathe-rgb: 209, 210, 184;
$breathe-light: mix(#fff, $breathe, 20%);
$breathe-dark: mix(#000, $breathe, 20%);

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