<div class="rainbow">
<div class="rainbow__band" style="--index: 0;"></div>
<div class="rainbow__band" style="--index: 1;"></div>
<div class="rainbow__band" style="--index: 2;"></div>
<div class="rainbow__band" style="--index: 3;"></div>
<div class="rainbow__band" style="--index: 4;"></div>
<div class="rainbow__band" style="--index: 5;"></div>
<div class="rainbow__band" style="--index: 6;"></div>
</div>
<style>
@property --hue {
initial-value: 0;
inherits: false;
syntax: '<number>';
}
*