demo · v133

Color Spectrum Generator

Chrome 133 adds sibling-index() and sibling-count() as CSS integer values usable inside calc(). This demo uses them to distribute hue across siblings purely in CSS — no per-item style attributes, no JS counting. Add or remove items; the spectrum reflows automatically because every hue is calc(sibling-index() * 360 / sibling-count()).

Checking sibling-index() / sibling-count() support…
55%
75%
Items: 8 — hue = calc(sibling-index() * 360 / sibling-count()) — all in CSS, zero JS per item
Generated CSS (live)

    

    

      
What changes when you add/remove items

      

        

          sibling-count() updates automatically — all hues rebalance without any JS.

          

          Each item's hue = calc(sibling-index() * 360 / sibling-count()).

          

          First item: hue 0° (red)

          Middle item: hue ≈ 180° (cyan)

          Last item: hue ≈ 340° (rose)

          

          Remove items → gap between hues grows.

          Add items → hues become more tightly packed.
        

      

    

  


  
/* Chrome 133: sibling-index() and sibling-count() in CSS */
.spectrum-item {
  /* Each item gets a different hue purely from its position */
  background: hsl(
    calc(sibling-index() * 360 / sibling-count()) /* hue */
    75%   /* saturation */
    55%   /* lightness */
  );
}

/* Size staircase — grows with position */
.size-item {
  font-size: calc(0.6rem + 0.1rem * sibling-index());
  padding-left: calc(4px * sibling-index());
}

/* Bar chart — width encodes position */
.bar-fill {
  width: calc(20px + 30px * sibling-index());
  background: hsl(calc(sibling-index() * 30) 70% 50%);
}


  

    
see also