A Pen By
Adobe Web Platform

` ````
<body onload="drawGradient()" onchange="drawGradient()">
<p>Midpoint: <input type="number" id="midPoint" min="5" max="95" value="50"></p>
<p>Color 1: <input type="color" id="c1" value="#ff0000"></p>
<p>Color 2: <input type="color" id="c2" value="#0000ff"></p>
<canvas id="c"></canvas>
<p id="formula"></p>
</body>
```

` ````
function getRgb(c){
c= c.toLowerCase();
if (/^[a-z]+$/.test(c)){
var colornames={
aqua:'#00ffff', black:'#000000', blue:'#0000ff', fuchsia:'#ff00ff',
gray:'#808080', green:'#008000', lime:'#00ff00', maroon:'#800000',
navy:'#000080', olive:'#808000', orange:'#ffa500', purple:'#800080',
red:'#ff0000', silver:'#c0c0c0', teal:'#008080', white:'#ffffff',
yellow:'#ffff00'
}
c= colornames[c];
}
if(/^#([a-f0-9]{3}){1,2}$/.test(c)){
if(c.length== 4){
c= '#'+[c[1], c[1], c[2], c[2], c[3], c[3]].join('');
}
c= '0x'+c.substring(1);
return [(c>>16)&255, (c>>8)&255, c&255];
}
else if(c.indexOf('rgb')== 0){
c= c.match(/\d+(\.\d+)?%?/g);
if(c){
for(var i= 0;i<3;i++){
if(c[i].indexOf('%')!= -1){
c[i]= Math.round(parseFloat(c[i])*2.55);
}
if(c[i]<0) c[i]= 0;
if(c[i]>255) c[i]= 255;
}
return c;
}
}
}
function drawGradient(){
var ctx = document.getElementById('c').getContext('2d');
var mid = document.getElementById('midPoint').valueAsNumber;
var c1 = getRgb(document.getElementById('c1').value);
var c2 = getRgb(document.getElementById('c2').value);
var exp = Math.log(.5)/Math.log(mid/100);
for(x = 0; x < 256; x++) {
var s = "rgb(";
s += Math.floor(c1[0] + Math.pow(x/255, exp)*(c2[0]-c1[0])) + ",";
s += Math.floor(c1[1] + Math.pow(x/255, exp)*(c2[1]-c1[1])) + ",";
s += Math.floor(c1[2] + Math.pow(x/255, exp)*(c2[2]-c1[2])) + ")";
ctx.fillStyle = s;
ctx.fillRect(x/256*ctx.canvas.width, 0, ctx.canvas.width, ctx.canvas.height);
}
var s = "gradient formula: c = c1 + (c2 - c1)^(log(.5)/log(" + mid + "/100)";
s += " = c1 + (c2 - c1)^" + exp;
$("#formula").text(s);
}
```

999px

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Loading
..................

Alt
Opt
Find & Replace

Also see: Tab Triggers