Cool Icicle

CSS

:root {
  --cool-icicle: #e1eee6;
  --cool-icicle-rgb: 225 238 230;
  --cool-icicle-oklch: oklch(0.937 0.017 159.1);
}

.element {
  color: var(--cool-icicle);
  background-color: hsl(143 28% 91%);
  border-color: oklch(0.937 0.017 159.1);
}

Tailwind CSS v4

@theme {
  --color-cool-icicle: #e1eee6;
  --color-cool-icicle-50: #f1f7f3;
  --color-cool-icicle-100: #e3eae6;
  --color-cool-icicle-200: #ced7d2;
  --color-cool-icicle-300: #b0bab4;
  --color-cool-icicle-400: #96a29b;
  --color-cool-icicle-500: #7d8a82;
  --color-cool-icicle-600: #6a756e;
  --color-cool-icicle-700: #555d58;
  --color-cool-icicle-800: #3e4440;
  --color-cool-icicle-900: #2a2f2c;
  --color-cool-icicle-950: #181c19;
}

SCSS

$cool-icicle: #e1eee6;
$cool-icicle-rgb: 225, 238, 230;
$cool-icicle-light: mix(#fff, $cool-icicle, 20%);
$cool-icicle-dark: mix(#000, $cool-icicle, 20%);

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