Blue Limewash

CSS

:root {
  --blue-limewash: #7fcce2;
  --blue-limewash-rgb: 127 204 226;
  --blue-limewash-oklch: oklch(0.803 0.082 218);
}

.element {
  color: var(--blue-limewash);
  background-color: hsl(193 63% 69%);
  border-color: oklch(0.803 0.082 218);
}

Tailwind CSS v4

@theme {
  --color-blue-limewash: #7fcce2;
  --color-blue-limewash-50: #dcfbff;
  --color-blue-limewash-100: #cbeffb;
  --color-blue-limewash-200: #aedded;
  --color-blue-limewash-300: #88c2d5;
  --color-blue-limewash-400: #62aabf;
  --color-blue-limewash-500: #3a93aa;
  --color-blue-limewash-600: #337c90;
  --color-blue-limewash-700: #286473;
  --color-blue-limewash-800: #1b4954;
  --color-blue-limewash-900: #11333b;
  --color-blue-limewash-950: #031f25;
}

SCSS

$blue-limewash: #7fcce2;
$blue-limewash-rgb: 127, 204, 226;
$blue-limewash-light: mix(#fff, $blue-limewash, 20%);
$blue-limewash-dark: mix(#000, $blue-limewash, 20%);

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