pSBC Example
A quick example of the shading and blending capabilities. This example does not cover the conversions.
by PimpTrizkit
HTML
<br>
<table><tbody><tr><td>Shade From:</td><td><input type="text" value="rgb(114,93,20)" /></td><td><span class="myButton">Shade</span></td></tr><tr><td>Blend To:</td><td><input type="text" value="rgb(20,93,114)" /></td><td><span class="myButton">Blend</span></td></tr><tr><td>Blend Math:</td><td><input type="radio" name="math" id="math1" checked /><label for="math1">Log</label></td><td><input type="radio" name="math" id="math2" /><label for="math2">Linear</label></td></tr></tbody></table>
<br><br>
<table style="float:left">
<thead>
<tr>
<th>To White :</th>
<th>To Black :</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Left to Right :</th>
<th>Right to Left :</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
<br><hr><br>
Booyah!CSS
.myButton:hover {color:#FFFF00;}
.myButton:active{color:#FF7777;}
.myButton {
margin:0;
padding:1px 4px 1px 3px;
border-width:1px;
border-style:outset;
border-color:#999999;
background:linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
border-radius:5px;
color:#FFFFFF;
cursor:pointer;
white-space:nowrap;
text-shadow: 0px 0px 3px #000000;
}
#table td {
height:30px;
width:200px;
padding:0px 0px 0px 5px;
}
#table td+td, th+th {
color:white;
background-color:black;
}
label {
cursor:pointer;
}JavaScript
//Version 4.0
const pSBC=(p,c0,c1,l)=>{
let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string";
if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
if(!this.pSBCr)this.pSBCr=(d)=>{
let n=d.length,x={};
if(n>9){
[r,g,b,a]=d=d.split(","),n=d.length;
if(n<3||n>4)return null;
x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
}else{
if(n==8||n==6||n<4)return null;
if(n<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(n>4?d[4]+d[4]:"");
d=i(d.slice(1),16);
if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=m((d&255)/0.255)/1000;
else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
}return x};
h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=pSBCr(c0),P=p<0,t=c1&&c1!="c"?pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
if(!f||!t)return null;
if(l)r=m(P*f.r+p*t.r),g=m(P*f.g+p*t.g),b=m(P*f.b+p*t.b);
else r=m((P*f.r**2+p*t.r**2)**0.5),g=m((P*f.g**2+p*t.g**2)**0.5),b=m((P*f.b**2+p*t.b**2)**0.5);
a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P+t*p:0;
if(h)return"rgb"+(f?"a(":"(")+r+","+g+","+b+(f?","+m(a*1000)/1000:"")+")";
else return"#"+(4294967296+r*16777216+g*65536+b*256+(f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
}
const theShadeButton =(e)=> {
let t, i=0, l, tr, td, d = document.getElementsByTagName("tbody")[1], f = document.getElementsByTagName("input")[0].value, m = document.getElementById("math2").checked;
tr = d.getElementsByTagName("tr");
for ( l = tr.length ; i < l ; i++ ) {
td = tr[i].firstElementChild;
td.style.backgroundColor = pSBC(i/10,f,false,m);
td.innerHTML = (i/10) + " == " + pSBC(i/10,f,false,m);
td = td.nextSibling;
td.style.backgroundColor = pSBC(-i/10,f,false,m);
td.innerHTML = (-i/10) + " == " + pSBC(-i/10,f,false,m);
}
}
const theBlendButton =()=> {
let t, i=0, l, tr, td, d = document.getElementsByTagName("tbody")[2], f =...