Dark Turquoise

CSS

:root {
  --dark-turquoise: #045c5a;
  --dark-turquoise-rgb: 4 92 90;
  --dark-turquoise-oklch: oklch(0.43 0.073 192.2);
}

.element {
  color: var(--dark-turquoise);
  background-color: hsl(179 92% 19%);
  border-color: oklch(0.43 0.073 192.2);
}

Tailwind CSS v4

@theme {
  --color-dark-turquoise: #045c5a;
  --color-dark-turquoise-50: #defcfb;
  --color-dark-turquoise-100: #cdf0ef;
  --color-dark-turquoise-200: #b1dfdd;
  --color-dark-turquoise-300: #8cc4c2;
  --color-dark-turquoise-400: #69aca9;
  --color-dark-turquoise-500: #439593;
  --color-dark-turquoise-600: #3a7e7c;
  --color-dark-turquoise-700: #2e6563;
  --color-dark-turquoise-800: #204a48;
  --color-dark-turquoise-900: #153432;
  --color-dark-turquoise-950: #061f1e;
}

SCSS

$dark-turquoise: #045c5a;
$dark-turquoise-rgb: 4, 92, 90;
$dark-turquoise-light: mix(#fff, $dark-turquoise, 20%);
$dark-turquoise-dark: mix(#000, $dark-turquoise, 20%);

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