Uniform Green Grey

CSS

:root {
  --uniform-green-grey: #5f7b7e;
  --uniform-green-grey-rgb: 95 123 126;
  --uniform-green-grey-oklch: oklch(0.562 0.033 204.4);
}

.element {
  color: var(--uniform-green-grey);
  background-color: hsl(186 14% 43%);
  border-color: oklch(0.562 0.033 204.4);
}

Tailwind CSS v4

@theme {
  --color-uniform-green-grey: #5f7b7e;
  --color-uniform-green-grey-50: #ebf8fa;
  --color-uniform-green-grey-100: #dcebed;
  --color-uniform-green-grey-200: #c5d8db;
  --color-uniform-green-grey-300: #a5bcc0;
  --color-uniform-green-grey-400: #89a4a7;
  --color-uniform-green-grey-500: #6d8d90;
  --color-uniform-green-grey-600: #5d777a;
  --color-uniform-green-grey-700: #4a5f62;
  --color-uniform-green-grey-800: #354647;
  --color-uniform-green-grey-900: #243031;
  --color-uniform-green-grey-950: #131d1d;
}

SCSS

$uniform-green-grey: #5f7b7e;
$uniform-green-grey-rgb: 95, 123, 126;
$uniform-green-grey-light: mix(#fff, $uniform-green-grey, 20%);
$uniform-green-grey-dark: mix(#000, $uniform-green-grey, 20%);

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