Tile Green

CSS

:root {
  --tile-green: #7a958e;
  --tile-green-rgb: 122 149 142;
  --tile-green-oklch: oklch(0.647 0.032 177.8);
}

.element {
  color: var(--tile-green);
  background-color: hsl(164 11% 53%);
  border-color: oklch(0.647 0.032 177.8);
}

Tailwind CSS v4

@theme {
  --color-tile-green: #7a958e;
  --color-tile-green-50: #ecf8f5;
  --color-tile-green-100: #ddece8;
  --color-tile-green-200: #c6d9d5;
  --color-tile-green-300: #a7bdb8;
  --color-tile-green-400: #8ba59e;
  --color-tile-green-500: #708e86;
  --color-tile-green-600: #5f7871;
  --color-tile-green-700: #4c605b;
  --color-tile-green-800: #374642;
  --color-tile-green-900: #26312d;
  --color-tile-green-950: #141d1a;
}

SCSS

$tile-green: #7a958e;
$tile-green-rgb: 122, 149, 142;
$tile-green-light: mix(#fff, $tile-green, 20%);
$tile-green-dark: mix(#000, $tile-green, 20%);

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