Beyond the Sea

CSS

:root {
  --beyond-the-sea: #005784;
  --beyond-the-sea-rgb: 0 87 132;
  --beyond-the-sea-oklch: oklch(0.437 0.102 241.1);
}

.element {
  color: var(--beyond-the-sea);
  background-color: hsl(200 100% 26%);
  border-color: oklch(0.437 0.102 241.1);
}

Tailwind CSS v4

@theme {
  --color-beyond-the-sea: #005784;
  --color-beyond-the-sea-50: #ddf9ff;
  --color-beyond-the-sea-100: #ccedff;
  --color-beyond-the-sea-200: #afdafd;
  --color-beyond-the-sea-300: #89bee8;
  --color-beyond-the-sea-400: #64a6d5;
  --color-beyond-the-sea-500: #3e8ec3;
  --color-beyond-the-sea-600: #3678a5;
  --color-beyond-the-sea-700: #2b6084;
  --color-beyond-the-sea-800: #1b4762;
  --color-beyond-the-sea-900: #123145;
  --color-beyond-the-sea-950: #041d2c;
}

SCSS

$beyond-the-sea: #005784;
$beyond-the-sea-rgb: 0, 87, 132;
$beyond-the-sea-light: mix(#fff, $beyond-the-sea, 20%);
$beyond-the-sea-dark: mix(#000, $beyond-the-sea, 20%);

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