Dark Lagoon

CSS

:root {
  --dark-lagoon: #6a7f7d;
  --dark-lagoon-rgb: 106 127 125;
  --dark-lagoon-oklch: oklch(0.579 0.025 189.4);
}

.element {
  color: var(--dark-lagoon);
  background-color: hsl(174 9% 46%);
  border-color: oklch(0.579 0.025 189.4);
}

Tailwind CSS v4

@theme {
  --color-dark-lagoon: #6a7f7d;
  --color-dark-lagoon-50: #eef7f7;
  --color-dark-lagoon-100: #dfebea;
  --color-dark-lagoon-200: #c9d8d7;
  --color-dark-lagoon-300: #aabcba;
  --color-dark-lagoon-400: #8fa3a1;
  --color-dark-lagoon-500: #748c89;
  --color-dark-lagoon-600: #637674;
  --color-dark-lagoon-700: #4f5f5d;
  --color-dark-lagoon-800: #394544;
  --color-dark-lagoon-900: #27302f;
  --color-dark-lagoon-950: #151c1b;
}

SCSS

$dark-lagoon: #6a7f7d;
$dark-lagoon-rgb: 106, 127, 125;
$dark-lagoon-light: mix(#fff, $dark-lagoon, 20%);
$dark-lagoon-dark: mix(#000, $dark-lagoon, 20%);

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