American Anthem

CSS

:root {
  --american-anthem: #7595ab;
  --american-anthem-rgb: 117 149 171;
  --american-anthem-oklch: oklch(0.654 0.049 238.5);
}

.element {
  color: var(--american-anthem);
  background-color: hsl(204 24% 56%);
  border-color: oklch(0.654 0.049 238.5);
}

Tailwind CSS v4

@theme {
  --color-american-anthem: #7595ab;
  --color-american-anthem-50: #e9f7ff;
  --color-american-anthem-100: #daeaf7;
  --color-american-anthem-200: #c3d8e7;
  --color-american-anthem-300: #a2bbce;
  --color-american-anthem-400: #84a3b8;
  --color-american-anthem-500: #688ba3;
  --color-american-anthem-600: #58768a;
  --color-american-anthem-700: #475e6e;
  --color-american-anthem-800: #324551;
  --color-american-anthem-900: #223039;
  --color-american-anthem-950: #111c23;
}

SCSS

$american-anthem: #7595ab;
$american-anthem-rgb: 117, 149, 171;
$american-anthem-light: mix(#fff, $american-anthem, 20%);
$american-anthem-dark: mix(#000, $american-anthem, 20%);

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