Earth Happiness

CSS

:root {
  --earth-happiness: #e3edc8;
  --earth-happiness-rgb: 227 237 200;
  --earth-happiness-oklch: oklch(0.929 0.05 119.7);
}

.element {
  color: var(--earth-happiness);
  background-color: hsl(76 51% 86%);
  border-color: oklch(0.929 0.05 119.7);
}

Tailwind CSS v4

@theme {
  --color-earth-happiness: #e3edc8;
  --color-earth-happiness-50: #f3f8e8;
  --color-earth-happiness-100: #e5ebd9;
  --color-earth-happiness-200: #d0d8c1;
  --color-earth-happiness-300: #b3bca0;
  --color-earth-happiness-400: #9aa382;
  --color-earth-happiness-500: #828b66;
  --color-earth-happiness-600: #6e7657;
  --color-earth-happiness-700: #585e45;
  --color-earth-happiness-800: #414531;
  --color-earth-happiness-900: #2d3021;
  --color-earth-happiness-950: #1a1c11;
}

SCSS

$earth-happiness: #e3edc8;
$earth-happiness-rgb: 227, 237, 200;
$earth-happiness-light: mix(#fff, $earth-happiness, 20%);
$earth-happiness-dark: mix(#000, $earth-happiness, 20%);

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