Pool Blue

CSS

:root {
  --pool-blue: #67bcb3;
  --pool-blue-rgb: 103 188 179;
  --pool-blue-oklch: oklch(0.739 0.084 186.7);
}

.element {
  color: var(--pool-blue);
  background-color: hsl(174 39% 57%);
  border-color: oklch(0.739 0.084 186.7);
}

Tailwind CSS v4

@theme {
  --color-pool-blue: #67bcb3;
  --color-pool-blue-50: #dbfdfa;
  --color-pool-blue-100: #c9f2ed;
  --color-pool-blue-200: #ace0db;
  --color-pool-blue-300: #84c6c0;
  --color-pool-blue-400: #5fafa6;
  --color-pool-blue-500: #33988f;
  --color-pool-blue-600: #2e8179;
  --color-pool-blue-700: #246761;
  --color-pool-blue-800: #194c46;
  --color-pool-blue-900: #103530;
  --color-pool-blue-950: #03201d;
}

SCSS

$pool-blue: #67bcb3;
$pool-blue-rgb: 103, 188, 179;
$pool-blue-light: mix(#fff, $pool-blue, 20%);
$pool-blue-dark: mix(#000, $pool-blue, 20%);

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