#A2CFD1

CSS

:root {
  --clear-water: #a2cfd1;
  --clear-water-rgb: 162 207 209;
  --clear-water-oklch: oklch(0.823 0.047 199.7);
}

.element {
  color: var(--clear-water);
  background-color: hsl(183 34% 73%);
  border-color: oklch(0.823 0.047 199.7);
}

Tailwind CSS v4

@theme {
  --color-clear-water: #a2cfd1;
  --color-clear-water-50: #e6f9fb;
  --color-clear-water-100: #d7edee;
  --color-clear-water-200: #bedbdd;
  --color-clear-water-300: #9cbfc2;
  --color-clear-water-400: #7ea7a9;
  --color-clear-water-500: #609092;
  --color-clear-water-600: #527a7c;
  --color-clear-water-700: #416163;
  --color-clear-water-800: #2f4848;
  --color-clear-water-900: #1f3232;
  --color-clear-water-950: #0f1e1e;
}

SCSS

$clear-water: #a2cfd1;
$clear-water-rgb: 162, 207, 209;
$clear-water-light: mix(#fff, $clear-water, 20%);
$clear-water-dark: mix(#000, $clear-water, 20%);

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