Alpine Duck Grey

CSS

:root {
  --alpine-duck-grey: #40464d;
  --alpine-duck-grey-rgb: 64 70 77;
  --alpine-duck-grey-oklch: oklch(0.391 0.014 252.3);
}

.element {
  color: var(--alpine-duck-grey);
  background-color: hsl(212 9% 28%);
  border-color: oklch(0.391 0.014 252.3);
}

Tailwind CSS v4

@theme {
  --color-alpine-duck-grey: #40464d;
  --color-alpine-duck-grey-50: #f2f5f9;
  --color-alpine-duck-grey-100: #e5e8ed;
  --color-alpine-duck-grey-200: #d0d5da;
  --color-alpine-duck-grey-300: #b2b8bf;
  --color-alpine-duck-grey-400: #999fa7;
  --color-alpine-duck-grey-500: #808790;
  --color-alpine-duck-grey-600: #6c7279;
  --color-alpine-duck-grey-700: #565b61;
  --color-alpine-duck-grey-800: #3f4347;
  --color-alpine-duck-grey-900: #2b2e31;
  --color-alpine-duck-grey-950: #191b1d;
}

SCSS

$alpine-duck-grey: #40464d;
$alpine-duck-grey-rgb: 64, 70, 77;
$alpine-duck-grey-light: mix(#fff, $alpine-duck-grey, 20%);
$alpine-duck-grey-dark: mix(#000, $alpine-duck-grey, 20%);

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