Baltic Turquoise

CSS

:root {
  --baltic-turquoise: #00a49a;
  --baltic-turquoise-rgb: 0 164 154;
  --baltic-turquoise-oklch: oklch(0.647 0.113 187.2);
}

.element {
  color: var(--baltic-turquoise);
  background-color: hsl(176 100% 32%);
  border-color: oklch(0.647 0.113 187.2);
}

Tailwind CSS v4

@theme {
  --color-baltic-turquoise: #00a49a;
  --color-baltic-turquoise-50: #d1fffc;
  --color-baltic-turquoise-100: #bdf5f0;
  --color-baltic-turquoise-200: #9be4de;
  --color-baltic-turquoise-300: #6ccac3;
  --color-baltic-turquoise-400: #38b4aa;
  --color-baltic-turquoise-500: #009d93;
  --color-baltic-turquoise-600: #00857c;
  --color-baltic-turquoise-700: #006b63;
  --color-baltic-turquoise-800: #004f48;
  --color-baltic-turquoise-900: #003732;
  --color-baltic-turquoise-950: #00211e;
}

SCSS

$baltic-turquoise: #00a49a;
$baltic-turquoise-rgb: 0, 164, 154;
$baltic-turquoise-light: mix(#fff, $baltic-turquoise, 20%);
$baltic-turquoise-dark: mix(#000, $baltic-turquoise, 20%);

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