Blue Light

CSS

:root {
  --blue-light: #acdfdd;
  --blue-light-rgb: 172 223 221;
  --blue-light-oklch: oklch(0.868 0.053 193.2);
}

.element {
  color: var(--blue-light);
  background-color: hsl(178 44% 77%);
  border-color: oklch(0.868 0.053 193.2);
}

Tailwind CSS v4

@theme {
  --color-blue-light: #acdfdd;
  --color-blue-light-50: #e5fafa;
  --color-blue-light-100: #d5eeed;
  --color-blue-light-200: #bbdcdb;
  --color-blue-light-300: #99c0c0;
  --color-blue-light-400: #7aa9a7;
  --color-blue-light-500: #5b9190;
  --color-blue-light-600: #4e7b7a;
  --color-blue-light-700: #3e6361;
  --color-blue-light-800: #2c4847;
  --color-blue-light-900: #1e3231;
  --color-blue-light-950: #0d1e1d;
}

SCSS

$blue-light: #acdfdd;
$blue-light-rgb: 172, 223, 221;
$blue-light-light: mix(#fff, $blue-light, 20%);
$blue-light-dark: mix(#000, $blue-light, 20%);

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