Antigua Sand

CSS

:root {
  --antigua-sand: #83c2cd;
  --antigua-sand-rgb: 131 194 205;
  --antigua-sand-oklch: oklch(0.775 0.066 209.6);
}

.element {
  color: var(--antigua-sand);
  background-color: hsl(189 43% 66%);
  border-color: oklch(0.775 0.066 209.6);
}

Tailwind CSS v4

@theme {
  --color-antigua-sand: #83c2cd;
  --color-antigua-sand-50: #e1fbff;
  --color-antigua-sand-100: #d0eef5;
  --color-antigua-sand-200: #b5dce5;
  --color-antigua-sand-300: #90c1cb;
  --color-antigua-sand-400: #6faab4;
  --color-antigua-sand-500: #4c929e;
  --color-antigua-sand-600: #417c86;
  --color-antigua-sand-700: #34636b;
  --color-antigua-sand-800: #24494e;
  --color-antigua-sand-900: #183336;
  --color-antigua-sand-950: #081e21;
}

SCSS

$antigua-sand: #83c2cd;
$antigua-sand-rgb: 131, 194, 205;
$antigua-sand-light: mix(#fff, $antigua-sand, 20%);
$antigua-sand-dark: mix(#000, $antigua-sand, 20%);

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