Clean Pool

CSS

:root {
  --clean-pool: #4ec0ed;
  --clean-pool-rgb: 78 192 237;
  --clean-pool-oklch: oklch(0.761 0.12 227.8);
}

.element {
  color: var(--clean-pool);
  background-color: hsl(197 82% 62%);
  border-color: oklch(0.761 0.12 227.8);
}

Tailwind CSS v4

@theme {
  --color-clean-pool: #4ec0ed;
  --color-clean-pool-50: #d3fdff;
  --color-clean-pool-100: #bff0ff;
  --color-clean-pool-200: #9edffe;
  --color-clean-pool-300: #72c3e9;
  --color-clean-pool-400: #40acd6;
  --color-clean-pool-500: #0094c4;
  --color-clean-pool-600: #007da5;
  --color-clean-pool-700: #006485;
  --color-clean-pool-800: #004a62;
  --color-clean-pool-900: #003345;
  --color-clean-pool-950: #001f2c;
}

SCSS

$clean-pool: #4ec0ed;
$clean-pool-rgb: 78, 192, 237;
$clean-pool-light: mix(#fff, $clean-pool, 20%);
$clean-pool-dark: mix(#000, $clean-pool, 20%);

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