MediaWiki:Gadget-RainbowHeaders.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

$('tr.rainbow').each(function(e){
    var colors = [36, 72, 108, 144, 180, 216, 252, 288, 324];
    var tr = $(this);
    if(!(tr.css('position') in ['relative', 'absolute'])){
        tr.css('position', 'relative');
    }
    var trWidth = tr.width();
    $(this).children('th').each(function(e){
        var th = $(this);
        var Hs = Math.round(th.position().left / trWidth * 360);
        var He = Math.round((th.position().left + th.width()) / trWidth * 360);

        var Ps = Math.floor(Hs / 36);
        var Pe = Math.ceil(He / 36);
        var color = colors.slice(Hs, He - Hs - 1);

        Hs = Math.max(0, Hs);
        He = Math.min(359, He);

        if(!color[0] || color[0] != Hs) color.unshift(Hs);
        if(!color[color.length] || color[color.length] != He) color.push(He);

        var colorString = color.map(function(H){
            return 'hsl(' + H + ', 80%, 80%)';
        }).join();
        colorString = 'linear-gradient(to right, ' + colorString + ')';
        th.css('background-image', colorString);
        console.log(colorString, th);
    });
});