Well Water

CSS

:root {
  --well-water: #63adb9;
  --well-water-rgb: 99 173 185;
  --well-water-oklch: oklch(0.704 0.076 209);
}

.element {
  color: var(--well-water);
  background-color: hsl(188 38% 56%);
  border-color: oklch(0.704 0.076 209);
}

Tailwind CSS v4

@theme {
  --color-well-water: #63adb9;
  --color-well-water-50: #defcff;
  --color-well-water-100: #cceff6;
  --color-well-water-200: #b0dee7;
  --color-well-water-300: #8ac2cd;
  --color-well-water-400: #66abb6;
  --color-well-water-500: #3f94a1;
  --color-well-water-600: #377d88;
  --color-well-water-700: #2b646d;
  --color-well-water-800: #1e4a50;
  --color-well-water-900: #133337;
  --color-well-water-950: #051f22;
}

SCSS

$well-water: #63adb9;
$well-water-rgb: 99, 173, 185;
$well-water-light: mix(#fff, $well-water, 20%);
$well-water-dark: mix(#000, $well-water, 20%);

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