Hamster Habitat

CSS

:root {
  --hamster-habitat: #c4d6af;
  --hamster-habitat-rgb: 196 214 175;
  --hamster-habitat-oklch: oklch(0.852 0.056 127.7);
}

.element {
  color: var(--hamster-habitat);
  background-color: hsl(88 32% 76%);
  border-color: oklch(0.852 0.056 127.7);
}

Tailwind CSS v4

@theme {
  --color-hamster-habitat: #c4d6af;
  --color-hamster-habitat-50: #f0f9e8;
  --color-hamster-habitat-100: #e2ecd9;
  --color-hamster-habitat-200: #ccd9c1;
  --color-hamster-habitat-300: #aebea0;
  --color-hamster-habitat-400: #95a582;
  --color-hamster-habitat-500: #7c8e65;
  --color-hamster-habitat-600: #697856;
  --color-hamster-habitat-700: #546045;
  --color-hamster-habitat-800: #3e4631;
  --color-hamster-habitat-900: #2a3021;
  --color-hamster-habitat-950: #181d10;
}

SCSS

$hamster-habitat: #c4d6af;
$hamster-habitat-rgb: 196, 214, 175;
$hamster-habitat-light: mix(#fff, $hamster-habitat, 20%);
$hamster-habitat-dark: mix(#000, $hamster-habitat, 20%);

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