Thin Air

CSS

:root {
  --thin-air: #c6fcff;
  --thin-air-rgb: 198 252 255;
  --thin-air-oklch: oklch(0.955 0.055 200.5);
}

.element {
  color: var(--thin-air);
  background-color: hsl(183 100% 89%);
  border-color: oklch(0.955 0.055 200.5);
}

Tailwind CSS v4

@theme {
  --color-thin-air: #c6fcff;
  --color-thin-air-50: #e4fafc;
  --color-thin-air-100: #d4eef0;
  --color-thin-air-200: #badcde;
  --color-thin-air-300: #97c0c4;
  --color-thin-air-400: #78a9ab;
  --color-thin-air-500: #589195;
  --color-thin-air-600: #4b7b7e;
  --color-thin-air-700: #3c6265;
  --color-thin-air-800: #2b4849;
  --color-thin-air-900: #1d3233;
  --color-thin-air-950: #0d1e1f;
}

SCSS

$thin-air: #c6fcff;
$thin-air-rgb: 198, 252, 255;
$thin-air-light: mix(#fff, $thin-air, 20%);
$thin-air-dark: mix(#000, $thin-air, 20%);

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