Sea of Atlantis

CSS

:root {
  --sea-of-atlantis: #2d535a;
  --sea-of-atlantis-rgb: 45 83 90;
  --sea-of-atlantis-oklch: oklch(0.417 0.045 210.7);
}

.element {
  color: var(--sea-of-atlantis);
  background-color: hsl(189 33% 26%);
  border-color: oklch(0.417 0.045 210.7);
}

Tailwind CSS v4

@theme {
  --color-sea-of-atlantis: #2d535a;
  --color-sea-of-atlantis-50: #e7f9fd;
  --color-sea-of-atlantis-100: #d8ecf1;
  --color-sea-of-atlantis-200: #c0dae0;
  --color-sea-of-atlantis-300: #9ebec5;
  --color-sea-of-atlantis-400: #80a6ad;
  --color-sea-of-atlantis-500: #638f97;
  --color-sea-of-atlantis-600: #547980;
  --color-sea-of-atlantis-700: #436166;
  --color-sea-of-atlantis-800: #30474b;
  --color-sea-of-atlantis-900: #203134;
  --color-sea-of-atlantis-950: #101d1f;
}

SCSS

$sea-of-atlantis: #2d535a;
$sea-of-atlantis-rgb: 45, 83, 90;
$sea-of-atlantis-light: mix(#fff, $sea-of-atlantis, 20%);
$sea-of-atlantis-dark: mix(#000, $sea-of-atlantis, 20%);

.element {
  color: $sea-of-atlantis;
  box-shadow: 0 0 0 2px rgba($sea-of-atlantis, 0.35);
}