$(function(){function t(){$.each($(".palette ul li"),function(){var e=$(this);if(e.data("rgb")){e.css("background-color",e.data("rgb"))}});$(".palette ul li").click(function(){e=$(this).data("rgb")})}var e="";t();$("#more").click(function(){var e=prompt("Hex Color","");if(e!=null){$('<li data-rgb="'+e+'"></li>').appendTo(".palette ul");t()}});$("#new-art").click(function(){var e=prompt("Type number of rows and cols","32x32");if(e!=null){var t=e.split("x");var n='<table cellpadding="10" cellspacing="0">';for(var r=0;r<parseInt(t[0]);r++){n+="<tr>";for(var i=0;i<parseInt(t[1]);i++){n+="<td></td>"}n+="</tr>"}n+="</table>";$("#container").html("");$(n).appendTo("#container")}});$("#container").on("click","td",function(){$(this).css("background-color",e)});$("#done").click(function(e){e.preventDefault();var t="";var n={};$(".palette ul li").each(function(e){t+="$color"+e+": "+$(this).data("rgb")+";\n";n[$(this).data("rgb")]="$color"+e});console.log(n);t+="\nbody {\nbackground-color:#333;\n}\n\n.amazing-art {\nbackground-color: transparent;\nheight: 1em;\nposition: absolute;\nleft: 50%;\ntop: 50%;\nwidth: 1em;\n";t+="box-shadow: \n";$("#container tr").each(function(e){var r=$(this).find("td").length;var i=$(this).find("td").length;if(r>0)t+="\n// Linha "+e+"\n";$(this).find("td").each(function(r){var s=$(this).css("background-color");console.log(r+"/"+s);if(s!=="rgba(0, 0, 0, 0)"){t+=Math.floor(i/2)-(i-r)+"em "+e+"em 0 "+n[s]+",\n"}})});t+="}";var r={title:"amazing art created using gpedro.github.io/pixelarizator",html:".amazing-art",html_pre_processor:"haml",css_pre_processor:"scss",css:t};var i=JSON.stringify(r).replace(/"/g,"&quot;").replace(/'/g,"&apos;");$("#raw").attr("value",i);$("#codepen").submit()})})

@@ -252,11 +252,11 @@
 pt(%22
-Hex
+RGB
  Col
@@ -260,16 +260,30 @@
 Color%22,%22
+rgb(255, 0, 0)
 %22);if(e!

Update app.min.js