Memoir

CSS

:root {
  --memoir: #ecf0da;
  --memoir-rgb: 236 240 218;
  --memoir-oklch: oklch(0.946 0.029 115.3);
}

.element {
  color: var(--memoir);
  background-color: hsl(71 42% 90%);
  border-color: oklch(0.946 0.029 115.3);
}

Tailwind CSS v4

@theme {
  --color-memoir: #ecf0da;
  --color-memoir-50: #f4f6ed;
  --color-memoir-100: #e7e9de;
  --color-memoir-200: #d3d6c8;
  --color-memoir-300: #b6baa9;
  --color-memoir-400: #9da18d;
  --color-memoir-500: #858973;
  --color-memoir-600: #717461;
  --color-memoir-700: #5a5d4e;
  --color-memoir-800: #424438;
  --color-memoir-900: #2e2f26;
  --color-memoir-950: #1a1b15;
}

SCSS

$memoir: #ecf0da;
$memoir-rgb: 236, 240, 218;
$memoir-light: mix(#fff, $memoir, 20%);
$memoir-dark: mix(#000, $memoir, 20%);

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