Turquoise Panic

CSS

:root {
  --turquoise-panic: #30d5c8;
  --turquoise-panic-rgb: 48 213 200;
  --turquoise-panic-oklch: oklch(0.79 0.129 186.7);
}

.element {
  color: var(--turquoise-panic);
  background-color: hsl(175 66% 51%);
  border-color: oklch(0.79 0.129 186.7);
}

Tailwind CSS v4

@theme {
  --color-turquoise-panic: #30d5c8;
  --color-turquoise-panic-50: #ccfffc;
  --color-turquoise-panic-100: #b6f7f0;
  --color-turquoise-panic-200: #91e7df;
  --color-turquoise-panic-300: #5ccdc4;
  --color-turquoise-panic-400: #00b7ab;
  --color-turquoise-panic-500: #00a094;
  --color-turquoise-panic-600: #00877d;
  --color-turquoise-panic-700: #006d64;
  --color-turquoise-panic-800: #005048;
  --color-turquoise-panic-900: #003832;
  --color-turquoise-panic-950: #00221e;
}

SCSS

$turquoise-panic: #30d5c8;
$turquoise-panic-rgb: 48, 213, 200;
$turquoise-panic-light: mix(#fff, $turquoise-panic, 20%);
$turquoise-panic-dark: mix(#000, $turquoise-panic, 20%);

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