Winter Evening

CSS

:root {
  --winter-evening: #476476;
  --winter-evening-rgb: 71 100 118;
  --winter-evening-oklch: oklch(0.488 0.045 236.1);
}

.element {
  color: var(--winter-evening);
  background-color: hsl(203 25% 37%);
  border-color: oklch(0.488 0.045 236.1);
}

Tailwind CSS v4

@theme {
  --color-winter-evening: #476476;
  --color-winter-evening-50: #eaf7ff;
  --color-winter-evening-100: #dbeaf5;
  --color-winter-evening-200: #c3d8e6;
  --color-winter-evening-300: #a3bbcc;
  --color-winter-evening-400: #86a3b6;
  --color-winter-evening-500: #6a8ba0;
  --color-winter-evening-600: #5a7687;
  --color-winter-evening-700: #485e6d;
  --color-winter-evening-800: #334550;
  --color-winter-evening-900: #233037;
  --color-winter-evening-950: #121c22;
}

SCSS

$winter-evening: #476476;
$winter-evening-rgb: 71, 100, 118;
$winter-evening-light: mix(#fff, $winter-evening, 20%);
$winter-evening-dark: mix(#000, $winter-evening, 20%);

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