Velvet Sky

CSS

:root {
  --velvet-sky: #c5d3dd;
  --velvet-sky-rgb: 197 211 221;
  --velvet-sky-oklch: oklch(0.859 0.021 238.7);
}

.element {
  color: var(--velvet-sky);
  background-color: hsl(205 26% 82%);
  border-color: oklch(0.859 0.021 238.7);
}

Tailwind CSS v4

@theme {
  --color-velvet-sky: #c5d3dd;
  --color-velvet-sky-50: #f0f6fb;
  --color-velvet-sky-100: #e2e9ee;
  --color-velvet-sky-200: #cdd6dc;
  --color-velvet-sky-300: #aeb9c1;
  --color-velvet-sky-400: #94a0a9;
  --color-velvet-sky-500: #7a8893;
  --color-velvet-sky-600: #67737c;
  --color-velvet-sky-700: #535c63;
  --color-velvet-sky-800: #3c4449;
  --color-velvet-sky-900: #292f32;
  --color-velvet-sky-950: #171b1e;
}

SCSS

$velvet-sky: #c5d3dd;
$velvet-sky-rgb: 197, 211, 221;
$velvet-sky-light: mix(#fff, $velvet-sky, 20%);
$velvet-sky-dark: mix(#000, $velvet-sky, 20%);

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