Tint of Turquoise

CSS

:root {
  --tint-of-turquoise: #41bfb5;
  --tint-of-turquoise-rgb: 65 191 181;
  --tint-of-turquoise-oklch: oklch(0.734 0.11 187.5);
}

.element {
  color: var(--tint-of-turquoise);
  background-color: hsl(175 50% 50%);
  border-color: oklch(0.734 0.11 187.5);
}

Tailwind CSS v4

@theme {
  --color-tint-of-turquoise: #41bfb5;
  --color-tint-of-turquoise-50: #d2fffc;
  --color-tint-of-turquoise-100: #bff4f0;
  --color-tint-of-turquoise-200: #9de4de;
  --color-tint-of-turquoise-300: #6fcac3;
  --color-tint-of-turquoise-400: #3db3aa;
  --color-tint-of-turquoise-500: #009d93;
  --color-tint-of-turquoise-600: #00857c;
  --color-tint-of-turquoise-700: #006a63;
  --color-tint-of-turquoise-800: #004e48;
  --color-tint-of-turquoise-900: #003632;
  --color-tint-of-turquoise-950: #00211e;
}

SCSS

$tint-of-turquoise: #41bfb5;
$tint-of-turquoise-rgb: 65, 191, 181;
$tint-of-turquoise-light: mix(#fff, $tint-of-turquoise, 20%);
$tint-of-turquoise-dark: mix(#000, $tint-of-turquoise, 20%);

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