Linoleum Green

CSS

:root {
  --linoleum-green: #3aa372;
  --linoleum-green-rgb: 58 163 114;
  --linoleum-green-oklch: oklch(0.642 0.122 159.5);
}

.element {
  color: var(--linoleum-green);
  background-color: hsl(152 48% 43%);
  border-color: oklch(0.642 0.122 159.5);
}

Tailwind CSS v4

@theme {
  --color-linoleum-green: #3aa372;
  --color-linoleum-green-50: #d7ffea;
  --color-linoleum-green-100: #c5f5db;
  --color-linoleum-green-200: #a5e5c4;
  --color-linoleum-green-300: #7bcba4;
  --color-linoleum-green-400: #55b485;
  --color-linoleum-green-500: #1c9e69;
  --color-linoleum-green-600: #1d8659;
  --color-linoleum-green-700: #186b47;
  --color-linoleum-green-800: #124f31;
  --color-linoleum-green-900: #0c3721;
  --color-linoleum-green-950: #002111;
}

SCSS

$linoleum-green: #3aa372;
$linoleum-green-rgb: 58, 163, 114;
$linoleum-green-light: mix(#fff, $linoleum-green, 20%);
$linoleum-green-dark: mix(#000, $linoleum-green, 20%);

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