Medium Turquoise

CSS

:root {
  --medium-turquoise: #48d1cc;
  --medium-turquoise-rgb: 72 209 204;
  --medium-turquoise-oklch: oklch(0.787 0.116 191.6);
}

.element {
  color: var(--medium-turquoise);
  background-color: hsl(178 60% 55%);
  border-color: oklch(0.787 0.116 191.6);
}

Tailwind CSS v4

@theme {
  --color-medium-turquoise: #48d1cc;
  --color-medium-turquoise-50: #d0ffff;
  --color-medium-turquoise-100: #bbf5f3;
  --color-medium-turquoise-200: #98e4e2;
  --color-medium-turquoise-300: #68cac8;
  --color-medium-turquoise-400: #2db4af;
  --color-medium-turquoise-500: #009d99;
  --color-medium-turquoise-600: #008582;
  --color-medium-turquoise-700: #006b68;
  --color-medium-turquoise-800: #004f4b;
  --color-medium-turquoise-900: #003734;
  --color-medium-turquoise-950: #00211f;
}

SCSS

$medium-turquoise: #48d1cc;
$medium-turquoise-rgb: 72, 209, 204;
$medium-turquoise-light: mix(#fff, $medium-turquoise, 20%);
$medium-turquoise-dark: mix(#000, $medium-turquoise, 20%);

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