#B4DCE4

CSS

:root {
  --tip-of-the-iceberg: #b4dce4;
  --tip-of-the-iceberg-rgb: 180 220 228;
  --tip-of-the-iceberg-oklch: oklch(0.868 0.043 211.1);
}

.element {
  color: var(--tip-of-the-iceberg);
  background-color: hsl(190 47% 80%);
  border-color: oklch(0.868 0.043 211.1);
}

Tailwind CSS v4

@theme {
  --color-tip-of-the-iceberg: #b4dce4;
  --color-tip-of-the-iceberg-50: #e8f9fd;
  --color-tip-of-the-iceberg-100: #d8ecf1;
  --color-tip-of-the-iceberg-200: #c0dadf;
  --color-tip-of-the-iceberg-300: #9fbec5;
  --color-tip-of-the-iceberg-400: #81a6ad;
  --color-tip-of-the-iceberg-500: #648e97;
  --color-tip-of-the-iceberg-600: #55787f;
  --color-tip-of-the-iceberg-700: #446066;
  --color-tip-of-the-iceberg-800: #31474a;
  --color-tip-of-the-iceberg-900: #213134;
  --color-tip-of-the-iceberg-950: #101d1f;
}

SCSS

$tip-of-the-iceberg: #b4dce4;
$tip-of-the-iceberg-rgb: 180, 220, 228;
$tip-of-the-iceberg-light: mix(#fff, $tip-of-the-iceberg, 20%);
$tip-of-the-iceberg-dark: mix(#000, $tip-of-the-iceberg, 20%);

.element {
  color: $tip-of-the-iceberg;
  box-shadow: 0 0 0 2px rgba($tip-of-the-iceberg, 0.35);
}