Alpine Haze

CSS

:root {
  --alpine-haze: #abbec0;
  --alpine-haze-rgb: 171 190 192;
  --alpine-haze-oklch: oklch(0.788 0.021 204.4);
}

.element {
  color: var(--alpine-haze);
  background-color: hsl(186 14% 71%);
  border-color: oklch(0.788 0.021 204.4);
}

Tailwind CSS v4

@theme {
  --color-alpine-haze: #abbec0;
  --color-alpine-haze-50: #eff7f8;
  --color-alpine-haze-100: #e0eaeb;
  --color-alpine-haze-200: #cad7d9;
  --color-alpine-haze-300: #acbbbd;
  --color-alpine-haze-400: #91a2a4;
  --color-alpine-haze-500: #778b8d;
  --color-alpine-haze-600: #657577;
  --color-alpine-haze-700: #505e5f;
  --color-alpine-haze-800: #3a4545;
  --color-alpine-haze-900: #282f30;
  --color-alpine-haze-950: #161c1c;
}

SCSS

$alpine-haze: #abbec0;
$alpine-haze-rgb: 171, 190, 192;
$alpine-haze-light: mix(#fff, $alpine-haze, 20%);
$alpine-haze-dark: mix(#000, $alpine-haze, 20%);

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