Olive Creed

CSS

:root {
  --olive-creed: #e8ecc0;
  --olive-creed-rgb: 232 236 192;
  --olive-creed-oklch: oklch(0.929 0.058 111.7);
}

.element {
  color: var(--olive-creed);
  background-color: hsl(65 54% 84%);
  border-color: oklch(0.929 0.058 111.7);
}

Tailwind CSS v4

@theme {
  --color-olive-creed: #e8ecc0;
  --color-olive-creed-50: #f5f7e5;
  --color-olive-creed-100: #e7ead5;
  --color-olive-creed-200: #d3d7bc;
  --color-olive-creed-300: #b7bb9a;
  --color-olive-creed-400: #9fa27b;
  --color-olive-creed-500: #878a5d;
  --color-olive-creed-600: #72754f;
  --color-olive-creed-700: #5b5e3f;
  --color-olive-creed-800: #43442d;
  --color-olive-creed-900: #2f2f1e;
  --color-olive-creed-950: #1b1c0e;
}

SCSS

$olive-creed: #e8ecc0;
$olive-creed-rgb: 232, 236, 192;
$olive-creed-light: mix(#fff, $olive-creed, 20%);
$olive-creed-dark: mix(#000, $olive-creed, 20%);

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