Tiffany Blue

CSS

:root {
  --tiffany-blue: #7bf2da;
  --tiffany-blue-rgb: 123 242 218;
  --tiffany-blue-oklch: oklch(0.885 0.114 178.6);
}

.element {
  color: var(--tiffany-blue);
  background-color: hsl(168 82% 72%);
  border-color: oklch(0.885 0.114 178.6);
}

Tailwind CSS v4

@theme {
  --color-tiffany-blue: #7bf2da;
  --color-tiffany-blue-50: #d3fff7;
  --color-tiffany-blue-100: #bff5ea;
  --color-tiffany-blue-200: #9de5d7;
  --color-tiffany-blue-300: #70cbba;
  --color-tiffany-blue-400: #40b49f;
  --color-tiffany-blue-500: #009e87;
  --color-tiffany-blue-600: #008672;
  --color-tiffany-blue-700: #006b5b;
  --color-tiffany-blue-800: #004f41;
  --color-tiffany-blue-900: #00372d;
  --color-tiffany-blue-950: #00221a;
}

SCSS

$tiffany-blue: #7bf2da;
$tiffany-blue-rgb: 123, 242, 218;
$tiffany-blue-light: mix(#fff, $tiffany-blue, 20%);
$tiffany-blue-dark: mix(#000, $tiffany-blue, 20%);

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