Artesian Well

CSS

:root {
  --artesian-well: #5eb2aa;
  --artesian-well-rgb: 94 178 170;
  --artesian-well-oklch: oklch(0.708 0.083 187.4);
}

.element {
  color: var(--artesian-well);
  background-color: hsl(174 35% 53%);
  border-color: oklch(0.708 0.083 187.4);
}

Tailwind CSS v4

@theme {
  --color-artesian-well: #5eb2aa;
  --color-artesian-well-50: #dbfdfa;
  --color-artesian-well-100: #c9f1ee;
  --color-artesian-well-200: #ace0dc;
  --color-artesian-well-300: #85c6c0;
  --color-artesian-well-400: #60afa7;
  --color-artesian-well-500: #359890;
  --color-artesian-well-600: #2f807a;
  --color-artesian-well-700: #256761;
  --color-artesian-well-800: #1a4c46;
  --color-artesian-well-900: #113531;
  --color-artesian-well-950: #03201d;
}

SCSS

$artesian-well: #5eb2aa;
$artesian-well-rgb: 94, 178, 170;
$artesian-well-light: mix(#fff, $artesian-well, 20%);
$artesian-well-dark: mix(#000, $artesian-well, 20%);

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