Baltic Trench

CSS

:root {
  --baltic-trench: #125761;
  --baltic-trench-rgb: 18 87 97;
  --baltic-trench-oklch: oklch(0.421 0.066 209.5);
}

.element {
  color: var(--baltic-trench);
  background-color: hsl(188 69% 23%);
  border-color: oklch(0.421 0.066 209.5);
}

Tailwind CSS v4

@theme {
  --color-baltic-trench: #125761;
  --color-baltic-trench-50: #e1fbff;
  --color-baltic-trench-100: #d0eef5;
  --color-baltic-trench-200: #b5dce5;
  --color-baltic-trench-300: #90c1cb;
  --color-baltic-trench-400: #6faab4;
  --color-baltic-trench-500: #4c929e;
  --color-baltic-trench-600: #417c86;
  --color-baltic-trench-700: #34636b;
  --color-baltic-trench-800: #24494e;
  --color-baltic-trench-900: #183336;
  --color-baltic-trench-950: #081e21;
}

SCSS

$baltic-trench: #125761;
$baltic-trench-rgb: 18, 87, 97;
$baltic-trench-light: mix(#fff, $baltic-trench, 20%);
$baltic-trench-dark: mix(#000, $baltic-trench, 20%);

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