Scaling oH oB Colours
Colours
:root {
--adv:4;
--adv-max-scale:10;
--scale-emphasis: 5;
--median-hue: 60;
--positive-hue: 120;
--negative-hue: 0;
}
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%));
}
HTML
CSS
Output