Powder Ash

CSS

:root {
  --powder-ash: #bcc9c2;
  --powder-ash-rgb: 188 201 194;
  --powder-ash-oklch: oklch(0.824 0.017 162.7);
}

.element {
  color: var(--powder-ash);
  background-color: hsl(148 11% 76%);
  border-color: oklch(0.824 0.017 162.7);
}

Tailwind CSS v4

@theme {
  --color-powder-ash: #bcc9c2;
  --color-powder-ash-50: #f1f7f4;
  --color-powder-ash-100: #e3eae6;
  --color-powder-ash-200: #ced7d2;
  --color-powder-ash-300: #b0bab5;
  --color-powder-ash-400: #96a29b;
  --color-powder-ash-500: #7d8a83;
  --color-powder-ash-600: #69756f;
  --color-powder-ash-700: #545d58;
  --color-powder-ash-800: #3d4440;
  --color-powder-ash-900: #2a2f2c;
  --color-powder-ash-950: #181c19;
}

SCSS

$powder-ash: #bcc9c2;
$powder-ash-rgb: 188, 201, 194;
$powder-ash-light: mix(#fff, $powder-ash, 20%);
$powder-ash-dark: mix(#000, $powder-ash, 20%);

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