Orbit color palette

body {
  
}

HTML

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-2" style="border: none">
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-red-black)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-orange-black)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-yellow-black)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-green-black)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-cyan-black)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-blue-black)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-indigo-black)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-purple-black)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-pink-black)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-gray-black)"></o-arc>
    </div>
    <div class="orbit-3" style="border: none">
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-red-darker)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-orange-darker)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-yellow-darker)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-green-darker)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-cyan-darker)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-blue-darker)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-indigo-darker)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-purple-darker)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-pink-darker)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-gray-darker)"></o-arc>
    </div>
    <div class="orbit-4" style="border: none">
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-red-dark)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-orange-dark)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-yellow-dark)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-green-dark)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-cyan-dark)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-blue-dark)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-indigo-dark)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-purple-dark)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-pink-dark)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-gray-dark)"></o-arc>
    </div>
    <div class="orbit-5" style="border: none">
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-red)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-orange)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-yellow)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-green)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-cyan)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-indigo)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-purple)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-pink)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-gray)"></o-arc>
    </div>
    <div class="orbit-6" style="border: none">
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-red-light)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-orange-light)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-yellow-light)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-green-light)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-cyan-light)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-blue-light)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-indigo-light)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-purple-light)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-pink-light)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-gray-light)"></o-arc>
    </div>
    <div class="orbit-7" style="border: none">
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-red-lighter)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-orange-lighter)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-yellow-lighter)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-green-lighter)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-cyan-lighter)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-indigo-lighter)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-purple-lighter)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-pink-lighter)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-gray-lighter)"></o-arc>
    </div>
    <div class="orbit-8" style="border: none">
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-red-white)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-orange-white)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-yellow-white)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-green-white)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-cyan-white)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-blue-white)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-indigo-white)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-purple-white)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-pink-white)"></o-arc>
      <o-arc class="shrink-10 gap-2" style="--o-color: var(--o-gray-white)"></o-arc>
    </div>


</div>