Scaling oH oB Colours

Colours

:root { 
    --adv:4;
    --adv-max-scale:10;
    --scale-emphasis: 5;
    --median-hue: 60;
    --positive-hue: 120; 
    --negative-hue: 0;
}

Advantage Demo

Advantage Scale

Scale Emphasis

Median Colour Hue

Positive Colour Hue

Negative Colour Hue

Colour Calc

.adv {
      max-width:100%;
    text-align: center;
    --advr: var(--adv, 0); --abs:  max(var(--advr), calc(-1 * var(--advr)));
    --mod: calc(var(--advr) / var(--abs));

    --isNeg: calc(var(--mod) * -1); --isPos: calc(var(--mod));

    --actual-hue: calc(
        max(0, var(--isNeg) * var(--negative-hue), var(--isPos) * var(--positive-hue)) 
        * 1deg);
    --actual-median-hue: calc(var(--median-hue)* 1deg);
    --angle: calc(var(--mod) * 90deg);    
    --adv-rate-clamped: clamp(0, var(--abs), var(--adv-max-scale));
    
    --start: 50; --per: 1%;
    
    --mid-scalar: calc(var(--adv-rate-clamped) * (var(--start) / var(--adv-max-scale)));
    --high-scalar: calc(var(--adv-rate-clamped) * (var(--start) / var(--adv-max-scale)));

    --start-point: calc(var(--start) * var(--per));
    --mid-point: calc(min(100, (var(--start) + (var(--mid-scalar) * 0.2 ))) * var(--per) ); 
    --high-point: calc(min(100, (var(--start) + var(--high-scalar))) * var(--per));
     
    background: linear-gradient(var(--angle, 90deg),
           hsla(0deg, 50%, 50%, 0) var(--start-point),
           hsla(var(--actual-median-hue), calc(var(--abs) * 20%),  50%, calc(var(--abs) * 0.4 * var(--scale-emphasis) / var(--adv-max-scale))) var(--mid-point), 
           hsla(var(--actual-hue), calc(var(--abs) * 20%) , 50%, calc(var(--abs) * var(--scale-emphasis) / var(--adv-max-scale))) var(--high-point),
           hsl(0deg, 0%, 60%) calc(1px + var(--high-point)),
           hsla(0deg, 0%, 0%, 0) calc(2px + var(--high-point))); 
}

.demo::before{
    content: "Adv of "  var(--adv)  " on a scale of " var(--adv-max-scale) ;
}

.demo-square {
    background: linear-gradient(90deg,
           hsla(0deg, 50%, 50%, 0) 0%,
           hsl(calc(var(--median-hue) * 1deg), 90%,  50%) 50%, 
           hsl(calc(var(--hue) * 1deg), 90% , 50%) 95%,
           hsl(0deg, 0%, 60%) calc(4% + 95%),
           hsl(0deg, 0%, 0%, 0) calc(5% + 95%)); 
}