Back of Beyond

CSS

:root {
  --back-of-beyond: #015f7f;
  --back-of-beyond-rgb: 1 95 127;
  --back-of-beyond-oklch: oklch(0.455 0.09 230.1);
}

.element {
  color: var(--back-of-beyond);
  background-color: hsl(195 98% 25%);
  border-color: oklch(0.455 0.09 230.1);
}

Tailwind CSS v4

@theme {
  --color-back-of-beyond: #015f7f;
  --color-back-of-beyond-50: #dcfaff;
  --color-back-of-beyond-100: #cbeeff;
  --color-back-of-beyond-200: #aedcf5;
  --color-back-of-beyond-300: #88c0de;
  --color-back-of-beyond-400: #62a9ca;
  --color-back-of-beyond-500: #3a91b7;
  --color-back-of-beyond-600: #337b9a;
  --color-back-of-beyond-700: #29627c;
  --color-back-of-beyond-800: #1a485b;
  --color-back-of-beyond-900: #113240;
  --color-back-of-beyond-950: #031e29;
}

SCSS

$back-of-beyond: #015f7f;
$back-of-beyond-rgb: 1, 95, 127;
$back-of-beyond-light: mix(#fff, $back-of-beyond, 20%);
$back-of-beyond-dark: mix(#000, $back-of-beyond, 20%);

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