Storm Green

CSS

:root {
  --storm-green: #113333;
  --storm-green-rgb: 17 51 51;
  --storm-green-oklch: oklch(0.296 0.039 195.3);
}

.element {
  color: var(--storm-green);
  background-color: hsl(180 50% 13%);
  border-color: oklch(0.296 0.039 195.3);
}

Tailwind CSS v4

@theme {
  --color-storm-green: #113333;
  --color-storm-green-50: #e9f9f9;
  --color-storm-green-100: #daecec;
  --color-storm-green-200: #c2dada;
  --color-storm-green-300: #a1bebe;
  --color-storm-green-400: #84a6a6;
  --color-storm-green-500: #688f8e;
  --color-storm-green-600: #587978;
  --color-storm-green-700: #466160;
  --color-storm-green-800: #334746;
  --color-storm-green-900: #223130;
  --color-storm-green-950: #111d1d;
}

SCSS

$storm-green: #113333;
$storm-green-rgb: 17, 51, 51;
$storm-green-light: mix(#fff, $storm-green, 20%);
$storm-green-dark: mix(#000, $storm-green, 20%);

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