Fond Memory

CSS

:root {
  --fond-memory: #c8bcb7;
  --fond-memory-rgb: 200 188 183;
  --fond-memory-oklch: oklch(0.804 0.015 44.1);
}

.element {
  color: var(--fond-memory);
  background-color: hsl(18 13% 75%);
  border-color: oklch(0.804 0.015 44.1);
}

Tailwind CSS v4

@theme {
  --color-fond-memory: #c8bcb7;
  --color-fond-memory-50: #f9f4f1;
  --color-fond-memory-100: #ece6e4;
  --color-fond-memory-200: #dad2cf;
  --color-fond-memory-300: #beb5b1;
  --color-fond-memory-400: #a79c97;
  --color-fond-memory-500: #8f837e;
  --color-fond-memory-600: #796f6b;
  --color-fond-memory-700: #615955;
  --color-fond-memory-800: #47413e;
  --color-fond-memory-900: #312d2b;
  --color-fond-memory-950: #1d1a18;
}

SCSS

$fond-memory: #c8bcb7;
$fond-memory-rgb: 200, 188, 183;
$fond-memory-light: mix(#fff, $fond-memory, 20%);
$fond-memory-dark: mix(#000, $fond-memory, 20%);

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