Star of David

CSS

:root {
  --star-of-david: #0000f7;
  --star-of-david-rgb: 0 0 247;
  --star-of-david-oklch: oklch(0.441 0.306 264.1);
}

.element {
  color: var(--star-of-david);
  background-color: hsl(240 100% 48%);
  border-color: oklch(0.441 0.306 264.1);
}

Tailwind CSS v4

@theme {
  --color-star-of-david: #0000f7;
  --color-star-of-david-50: #ccf3ff;
  --color-star-of-david-100: #b8e5ff;
  --color-star-of-david-200: #97cdff;
  --color-star-of-david-300: #6da9ff;
  --color-star-of-david-400: #3b88ff;
  --color-star-of-david-500: #0e5cff;
  --color-star-of-david-600: #0e50ff;
  --color-star-of-david-700: #0b40e0;
  --color-star-of-david-800: #0030a9;
  --color-star-of-david-900: #002178;
  --color-star-of-david-950: #000c55;
}

SCSS

$star-of-david: #0000f7;
$star-of-david-rgb: 0, 0, 247;
$star-of-david-light: mix(#fff, $star-of-david, 20%);
$star-of-david-dark: mix(#000, $star-of-david, 20%);

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