Pale Shale

CSS

:root {
  --pale-shale: #cacfdc;
  --pale-shale-rgb: 202 207 220;
  --pale-shale-oklch: oklch(0.855 0.019 269.1);
}

.element {
  color: var(--pale-shale);
  background-color: hsl(223 20% 83%);
  border-color: oklch(0.855 0.019 269.1);
}

Tailwind CSS v4

@theme {
  --color-pale-shale: #cacfdc;
  --color-pale-shale-50: #f3f5fb;
  --color-pale-shale-100: #e5e8ee;
  --color-pale-shale-200: #d1d4dd;
  --color-pale-shale-300: #b4b7c1;
  --color-pale-shale-400: #9a9eaa;
  --color-pale-shale-500: #818693;
  --color-pale-shale-600: #6d717c;
  --color-pale-shale-700: #575b64;
  --color-pale-shale-800: #3f4249;
  --color-pale-shale-900: #2c2e33;
  --color-pale-shale-950: #191b1e;
}

SCSS

$pale-shale: #cacfdc;
$pale-shale-rgb: 202, 207, 220;
$pale-shale-light: mix(#fff, $pale-shale, 20%);
$pale-shale-dark: mix(#000, $pale-shale, 20%);

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