Needed Escape

CSS

:root {
  --needed-escape: #b1d6de;
  --needed-escape-rgb: 177 214 222;
  --needed-escape-oklch: oklch(0.852 0.041 212.3);
}

.element {
  color: var(--needed-escape);
  background-color: hsl(191 41% 78%);
  border-color: oklch(0.852 0.041 212.3);
}

Tailwind CSS v4

@theme {
  --color-needed-escape: #b1d6de;
  --color-needed-escape-50: #e9f8fc;
  --color-needed-escape-100: #d9ecf0;
  --color-needed-escape-200: #c2d9df;
  --color-needed-escape-300: #a1bdc4;
  --color-needed-escape-400: #83a5ad;
  --color-needed-escape-500: #678e96;
  --color-needed-escape-600: #57787f;
  --color-needed-escape-700: #466066;
  --color-needed-escape-800: #32464a;
  --color-needed-escape-900: #223133;
  --color-needed-escape-950: #111d1f;
}

SCSS

$needed-escape: #b1d6de;
$needed-escape-rgb: 177, 214, 222;
$needed-escape-light: mix(#fff, $needed-escape, 20%);
$needed-escape-dark: mix(#000, $needed-escape, 20%);

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