Meteorological

CSS

:root {
  --meteorological: #596d69;
  --meteorological-rgb: 89 109 105;
  --meteorological-oklch: oklch(0.517 0.025 181.8);
}

.element {
  color: var(--meteorological);
  background-color: hsl(168 10% 39%);
  border-color: oklch(0.517 0.025 181.8);
}

Tailwind CSS v4

@theme {
  --color-meteorological: #596d69;
  --color-meteorological-50: #eef8f6;
  --color-meteorological-100: #dfebe9;
  --color-meteorological-200: #c9d8d5;
  --color-meteorological-300: #aabcb9;
  --color-meteorological-400: #8fa39f;
  --color-meteorological-500: #758c87;
  --color-meteorological-600: #637672;
  --color-meteorological-700: #4f5f5b;
  --color-meteorological-800: #394543;
  --color-meteorological-900: #27302e;
  --color-meteorological-950: #151c1b;
}

SCSS

$meteorological: #596d69;
$meteorological-rgb: 89, 109, 105;
$meteorological-light: mix(#fff, $meteorological, 20%);
$meteorological-dark: mix(#000, $meteorological, 20%);

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