Baltic Green

CSS

:root {
  --baltic-green: #3aa098;
  --baltic-green-rgb: 58 160 152;
  --baltic-green-oklch: oklch(0.645 0.094 187.8);
}

.element {
  color: var(--baltic-green);
  background-color: hsl(175 47% 43%);
  border-color: oklch(0.645 0.094 187.8);
}

Tailwind CSS v4

@theme {
  --color-baltic-green: #3aa098;
  --color-baltic-green-50: #d8fefb;
  --color-baltic-green-100: #c5f3ef;
  --color-baltic-green-200: #a6e2dd;
  --color-baltic-green-300: #7dc7c2;
  --color-baltic-green-400: #54b0a8;
  --color-baltic-green-500: #1a9a91;
  --color-baltic-green-600: #1b827b;
  --color-baltic-green-700: #166862;
  --color-baltic-green-800: #0e4d47;
  --color-baltic-green-900: #093531;
  --color-baltic-green-950: #00201d;
}

SCSS

$baltic-green: #3aa098;
$baltic-green-rgb: 58, 160, 152;
$baltic-green-light: mix(#fff, $baltic-green, 20%);
$baltic-green-dark: mix(#000, $baltic-green, 20%);

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