Little Blue Box

CSS

:root {
  --little-blue-box: #8ac5ba;
  --little-blue-box-rgb: 138 197 186;
  --little-blue-box-oklch: oklch(0.78 0.063 181.7);
}

.element {
  color: var(--little-blue-box);
  background-color: hsl(169 34% 66%);
  border-color: oklch(0.78 0.063 181.7);
}

Tailwind CSS v4

@theme {
  --color-little-blue-box: #8ac5ba;
  --color-little-blue-box-50: #e2fbf7;
  --color-little-blue-box-100: #d2efea;
  --color-little-blue-box-200: #b7ded7;
  --color-little-blue-box-300: #94c2bb;
  --color-little-blue-box-400: #74aba1;
  --color-little-blue-box-500: #539489;
  --color-little-blue-box-600: #477d74;
  --color-little-blue-box-700: #39645d;
  --color-little-blue-box-800: #284a43;
  --color-little-blue-box-900: #1b332e;
  --color-little-blue-box-950: #0b1f1b;
}

SCSS

$little-blue-box: #8ac5ba;
$little-blue-box-rgb: 138, 197, 186;
$little-blue-box-light: mix(#fff, $little-blue-box, 20%);
$little-blue-box-dark: mix(#000, $little-blue-box, 20%);

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