Crystal Clear

CSS

:root {
  --crystal-clear: #f4e9ea;
  --crystal-clear-rgb: 244 233 234;
  --crystal-clear-oklch: oklch(0.943 0.012 11);
}

.element {
  color: var(--crystal-clear);
  background-color: hsl(355 33% 94%);
  border-color: oklch(0.943 0.012 11);
}

Tailwind CSS v4

@theme {
  --color-crystal-clear: #f4e9ea;
  --color-crystal-clear-50: #f8f4f4;
  --color-crystal-clear-100: #ece6e7;
  --color-crystal-clear-200: #d9d2d3;
  --color-crystal-clear-300: #bdb5b5;
  --color-crystal-clear-400: #a59c9d;
  --color-crystal-clear-500: #8e8384;
  --color-crystal-clear-600: #786f70;
  --color-crystal-clear-700: #605959;
  --color-crystal-clear-800: #464141;
  --color-crystal-clear-900: #312d2d;
  --color-crystal-clear-950: #1d1a1a;
}

SCSS

$crystal-clear: #f4e9ea;
$crystal-clear-rgb: 244, 233, 234;
$crystal-clear-light: mix(#fff, $crystal-clear, 20%);
$crystal-clear-dark: mix(#000, $crystal-clear, 20%);

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