Fire JS Bin - ColorBlendy

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

/* IE patch. :( */
if(typeof String.prototype.trim !== 'function') {
    String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, '');
    }
}
/***/

function rgb_to_hex(rgb) {
    /* [255,255,255] -> "FFFFFF" */
    var r = (rgb[2] | (rgb[1] << 8) | (rgb[0] << 16)).toString(16);

// Pad 0's
    for(var i=0, stop=6-r.length; i<stop; i++) r += "0";

return r;
}

function css_to_rgb(s) {
    /* "rgb(255, 255, 255)" or "#ffffff" -> [255,255,255] */
    if(s[0] == '#') return hex_to_rgb(s); // NOTE: IE8 does not always return rgb
    return $.map(s.substring(4,s.length-1).split(','), function(o) { return parseInt(o.trim()) });
}

function rgb_to_css(rgb) {
    /* [255,255,255] -> "rgb(255, 255, 255)" */
    return 'rgb(' + rgb[0] + ',' + rgb[1] +',' + rgb[2] + ')';
}

function apply_filter(c1, c2, fn) {
    return [fn(c1[0], c2[0]),
            fn(c1[1], c2[1]),
            fn(c1[2], c2[2])]
}

function blend(filter, c1, c2) {
    var c = apply_filter(c1, c2, blend_filters[filter])
    return [Math.min(Math.round(c[0]), 255), Math.min(Math.round(c[1]), 255), Math.min(Math.round(c[2]), 255)];
}

function render_blend() {
    var blend_mode = $("#blend-mode li.active").text().toLowerCase();
    try {
        $("#color-bottom-preview").css('background-color', assure_hash_prefix($("#color-bottom").val()));
        $("#color-top-preview").css('background-color', assure_hash_prefix($("#color-top").val()));

var c1 = css_to_rgb($("#color-bottom-preview").css('background-color'));
        var c2 = css_to_rgb($("#color-top-preview").css('background-color'));
        var blended = blend(blend_mode, c1, c2);

$("#color-blended-preview").css('background-color', rgb_to_css(blended));
        $("#color-blended").val("#" + rgb_to_hex(blended));
    } catch(err) {
        alert("Unsupported color format.");
    }
}
  
$(document).ready(function() {
    var active = $("#blend-mode li.active");
    $("#blend-mode li").click(function(e) {
        if(active) $(active).removeClass('active');
        active = $(this).addClass('active');
        render_blend();
    });
    $(document).keydown(function(e) {
        if(e.which == 38 || e.which == 75) { // Down
            $(active).prev().click();
        } else if(e.which == 40 || e.which == 74) { // Up
            $(active).next().click();
        }
    });
});

<!DOCTYPE html> 
 
<html lang="en"> 
<head>
  <meta charset="utf-8" /> 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
  <meta name="description" content="Ever fire up Photoshop just to multiply a couple of colors? No more." /> 
  <title>ColorBlendy - Blend colors with different modes like multiply, overlay, dodge.</title>  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 
 
<form onsubmit="render_blend(); $('#color-blended').select(); return false;" action="#"> 
  <div style="height: 550px; width: 100%; text-align: center;"> 
    <div id="color-bottom-preview"> 
      <h1>ColorBlendy</h1>
      <div style="float: left; width: 50%; margin: 50px 0 0 0;"> 
        <p><input type="text" id="color-bottom" value="#aabbcc" onchange="render_blend();" tabindex="1" /></p> 
      </div> 
      <div id="color-blended-preview"> 
        <p><input type="text" id="color-blended" value="#222529" readonly="readonly" /></p> 
        <ul id="blend-mode"> 
          <li class="active">Multiply</li> 
          <li>Screen</li> 
          <li>Overlay</li> 
          <li>Dodge</li> 
          <li>Burn</li> 
        </ul> 
      </div> 
    </div> 
    <div id="color-top-preview"> 
      <p><input type="text" id="color-top" value="#333333" onchange="render_blend();" tabindex="2" /></p> 
    </div>
  </div>
</form>
<div id="footer">A <a href="http://10k.aneventapart.com/">10K Apart</a> project by <a href="http://twitter.com/shazow">shazow</a> and <a href="http://twitter.com/limedaring">limedaring</a>.</div>

</body></html>

html {
    background-color:#000;
}
body {
    font-family:"Lucida Grande", Arial, Helvetica, sans-serif;
    padding: 25px 0 0 0; margin: 0;
    height: 100%;
    min-width: 760px;
}
 
h1 {
    font-weight:normal;
    color:#fff;
    font-size:0.9em;
    color: #444b52;
    line-height:50px; height:50px; margin:0; float:right; width:50%;
    text-transform:uppercase;
    letter-spacing:0.2em;
}
 
select, input {
    font-size: 20px;
    width: 200px;
    text-align: center;
    margin-top:30px;
    padding:0.5em 0.2em;
    color:#888;
    border:0;
    outline:10px solid rgba(0,0,0,0.1);
}
 
input {
    font-family:monospace;
}
 
select {
    padding:0;
    height:185px;
    width:215px;
    margin-top:105px;
    overflow: hidden;
}
 
select option {
    padding:0.3em 0;
}
#color-bottom-preview {
    float: left; width: 66.6%; height: 100%;
    background: #abc;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
 
#color-top-preview {
    float: left; width: 33.3%; height: 82%; margin: 50px 0 0 0;
    background: #333;
}
#color-blended-preview {
    float: right; width: 50%; min-width: 200px; height: 82%; margin: 0 0 0 0;
    background: #222529;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
 
#color-blended-preview ul {
    width:226px;
    margin:150px auto 0 auto;
    background-color:rgba(255,255,255,0.1);
    list-style-type:none;
    padding:0;
    color:rgba(0,0,0,0.8);
}
 
#color-blended-preview ul li {
    padding:0.5em 0;
    text-transform:uppercase;
    letter-spacing:0.1em;
    cursor:pointer;
    font-size:0.9em;
}
 
#color-blended-preview ul li.active, #color-blended-preview ul li:hover {
    background-color:rgba(255,255,255,0.5);
}
 
#footer {
    text-align: center;
    font-size: 10px;
    line-height: 50px;
    height: 50px;
    color: #444;
}
#footer a {
    color: #666;
    text-decoration: none;
}

Pop out