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