Crystalsong Blue

CSS

:root {
  --crystalsong-blue: #4fb3b3;
  --crystalsong-blue-rgb: 79 179 179;
  --crystalsong-blue-oklch: oklch(0.708 0.093 195.3);
}

.element {
  color: var(--crystalsong-blue);
  background-color: hsl(180 40% 51%);
  border-color: oklch(0.708 0.093 195.3);
}

Tailwind CSS v4

@theme {
  --color-crystalsong-blue: #4fb3b3;
  --color-crystalsong-blue-50: #d8fefe;
  --color-crystalsong-blue-100: #c5f2f3;
  --color-crystalsong-blue-200: #a6e1e2;
  --color-crystalsong-blue-300: #7cc6c8;
  --color-crystalsong-blue-400: #53b0b0;
  --color-crystalsong-blue-500: #169999;
  --color-crystalsong-blue-600: #198182;
  --color-crystalsong-blue-700: #146868;
  --color-crystalsong-blue-800: #0c4c4b;
  --color-crystalsong-blue-900: #083534;
  --color-crystalsong-blue-950: #002020;
}

SCSS

$crystalsong-blue: #4fb3b3;
$crystalsong-blue-rgb: 79, 179, 179;
$crystalsong-blue-light: mix(#fff, $crystalsong-blue, 20%);
$crystalsong-blue-dark: mix(#000, $crystalsong-blue, 20%);

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