Garden Room

CSS

:root {
  --garden-room: #accfa9;
  --garden-room-rgb: 172 207 169;
  --garden-room-oklch: oklch(0.819 0.064 142.9);
}

.element {
  color: var(--garden-room);
  background-color: hsl(115 28% 74%);
  border-color: oklch(0.819 0.064 142.9);
}

Tailwind CSS v4

@theme {
  --color-garden-room: #accfa9;
  --color-garden-room-50: #eafaea;
  --color-garden-room-100: #dbeedb;
  --color-garden-room-200: #c4dcc4;
  --color-garden-room-300: #a4c1a3;
  --color-garden-room-400: #89a986;
  --color-garden-room-500: #6d916a;
  --color-garden-room-600: #5d7b5a;
  --color-garden-room-700: #4a6248;
  --color-garden-room-800: #364833;
  --color-garden-room-900: #253223;
  --color-garden-room-950: #141e12;
}

SCSS

$garden-room: #accfa9;
$garden-room-rgb: 172, 207, 169;
$garden-room-light: mix(#fff, $garden-room, 20%);
$garden-room-dark: mix(#000, $garden-room, 20%);

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