Nostalgic Evening

CSS

:root {
  --nostalgic-evening: #47626f;
  --nostalgic-evening-rgb: 71 98 111;
  --nostalgic-evening-oklch: oklch(0.48 0.038 229.2);
}

.element {
  color: var(--nostalgic-evening);
  background-color: hsl(200 22% 36%);
  border-color: oklch(0.48 0.038 229.2);
}

Tailwind CSS v4

@theme {
  --color-nostalgic-evening: #47626f;
  --color-nostalgic-evening-50: #ebf7fe;
  --color-nostalgic-evening-100: #dcebf3;
  --color-nostalgic-evening-200: #c5d8e2;
  --color-nostalgic-evening-300: #a5bbc8;
  --color-nostalgic-evening-400: #88a3b1;
  --color-nostalgic-evening-500: #6c8b9b;
  --color-nostalgic-evening-600: #5c7683;
  --color-nostalgic-evening-700: #495e69;
  --color-nostalgic-evening-800: #35454d;
  --color-nostalgic-evening-900: #243035;
  --color-nostalgic-evening-950: #131c21;
}

SCSS

$nostalgic-evening: #47626f;
$nostalgic-evening-rgb: 71, 98, 111;
$nostalgic-evening-light: mix(#fff, $nostalgic-evening, 20%);
$nostalgic-evening-dark: mix(#000, $nostalgic-evening, 20%);

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