Cold Snow

CSS

:root {
  --cold-snow: #fff7fd;
  --cold-snow-rgb: 255 247 253;
  --cold-snow-oklch: oklch(0.984 0.012 334.1);
}

.element {
  color: var(--cold-snow);
  background-color: hsl(315 100% 98%);
  border-color: oklch(0.984 0.012 334.1);
}

Tailwind CSS v4

@theme {
  --color-cold-snow: #fff7fd;
  --color-cold-snow-50: #f7f4f6;
  --color-cold-snow-100: #eae6e9;
  --color-cold-snow-200: #d8d2d6;
  --color-cold-snow-300: #bbb5ba;
  --color-cold-snow-400: #a39ca1;
  --color-cold-snow-500: #8b8389;
  --color-cold-snow-600: #766f74;
  --color-cold-snow-700: #5e595d;
  --color-cold-snow-800: #454144;
  --color-cold-snow-900: #302d2f;
  --color-cold-snow-950: #1c1a1c;
}

SCSS

$cold-snow: #fff7fd;
$cold-snow-rgb: 255, 247, 253;
$cold-snow-light: mix(#fff, $cold-snow, 20%);
$cold-snow-dark: mix(#000, $cold-snow, 20%);

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