Cold Well Water

CSS

:root {
  --cold-well-water: #c1e2e3;
  --cold-well-water-rgb: 193 226 227;
  --cold-well-water-oklch: oklch(0.889 0.035 198.8);
}

.element {
  color: var(--cold-well-water);
  background-color: hsl(182 38% 82%);
  border-color: oklch(0.889 0.035 198.8);
}

Tailwind CSS v4

@theme {
  --color-cold-well-water: #c1e2e3;
  --color-cold-well-water-50: #eaf8f9;
  --color-cold-well-water-100: #dbecec;
  --color-cold-well-water-200: #c4d9da;
  --color-cold-well-water-300: #a4bdbf;
  --color-cold-well-water-400: #87a5a6;
  --color-cold-well-water-500: #6b8e8f;
  --color-cold-well-water-600: #5b7879;
  --color-cold-well-water-700: #496061;
  --color-cold-well-water-800: #344646;
  --color-cold-well-water-900: #243131;
  --color-cold-well-water-950: #131d1d;
}

SCSS

$cold-well-water: #c1e2e3;
$cold-well-water-rgb: 193, 226, 227;
$cold-well-water-light: mix(#fff, $cold-well-water, 20%);
$cold-well-water-dark: mix(#000, $cold-well-water, 20%);

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