The Matrix

CSS

:root {
  --the-matrix: #70f15e;
  --the-matrix-rgb: 112 241 94;
  --the-matrix-oklch: oklch(0.855 0.219 141.3);
}

.element {
  color: var(--the-matrix);
  background-color: hsl(113 84% 66%);
  border-color: oklch(0.855 0.219 141.3);
}

Tailwind CSS v4

@theme {
  --color-the-matrix: #70f15e;
  --color-the-matrix-50: #d0ffcd;
  --color-the-matrix-100: #bcfbb8;
  --color-the-matrix-200: #99ec96;
  --color-the-matrix-300: #6ad368;
  --color-the-matrix-400: #40bc2d;
  --color-the-matrix-500: #00a600;
  --color-the-matrix-600: #008c00;
  --color-the-matrix-700: #007000;
  --color-the-matrix-800: #035200;
  --color-the-matrix-900: #043900;
  --color-the-matrix-950: #002300;
}

SCSS

$the-matrix: #70f15e;
$the-matrix-rgb: 112, 241, 94;
$the-matrix-light: mix(#fff, $the-matrix, 20%);
$the-matrix-dark: mix(#000, $the-matrix, 20%);

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