jFlat

Welcome to jFlat. This is the plugin to convert flat icons color. This plugin is only for HTML5 supported browsers. This plugin uses HTML5 canvas element to change flat icons color.
download jFlat

Concept of the plugin

1. jFlat plugin will identify the jFlat applied image elements.
2. It will create HTML5-canvas element with same height and width of applied image element
3. It will hide the applied image element
see our tool to convert flat icons color

Import the plugin

Import jQuery from google cdn and import jquery.jFlat.js plugin 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='/jquery.jFlat.js'></script>

using jFlat

jFlat needs two components
1. Color in hexadecimal format (example... #d4a967 )
2. Color conversion factor (limit value) (0 - 255)

Particular color will have particular color conversion factor (limit value). You can get this limit value of your favorite color by using tool change flat icons color online

html :
<img width="150px" height="150px" id="scream" src="/twitter.png" alt="The Scream">

script :
$('#scream').jFlat({
		def:"#1BA1E2;100",
		click:"#A05000;75",
		dblclick:"#0050EF;70",
		focusout:"#A20025;70",
		mousedown:"#1BA0E1;100",
		mousemove:"#D80073;115",
		mouseout:"#A2C139;167",
		mouseover:"#6A00FF;65",
		mouseup:"#339933;73"
	});

properties :
def default color and limit value
click on mouse click
dblclick on mouse double click
focusout focus out event
mousedown mouse out event
mousemove mouse move event
mouseout mouse out event
mouseover mouse over event
mouseup mouse up event

demo


original flat icon

def (default)

$('#flatIconDef').jFlat({

    def:"#1BA1E2;100"

});

click 

$('#flatIconClick').jFlat({

    click:"#15FFFF;210"

});

dblclick

$('#flatIconDblclick').jFlat({

    dblclick:"#A05000;75"

});

mousedown 

$('#flatIconMousedown').jFlat({

    mousedown:"#0050EF;70"

});

mousemove

$('#flatIconMousemove').jFlat({

    mousemove:"#A20025;70"

});

mouseout

$('#flatIconMouseout').jFlat({

    mouseout:"#1BA0E1;100"

});

mouseover

$('#flatIconMouseover').jFlat({

    mouseover:"#D80073;115"

});

mouseup

$('#flatIconMouseup').jFlat({

    mouseup:"#A2C139;167"

});

all at once

$('#flatIconAll').jFlat({
		def:"#1BA1E2;100",
		click:"#15FFFF;210",
		dblclick:"#0050EF;70",
		focusout:"#A20025;70",
		mousedown:"#1BA0E1;100",
		mousemove:"#D80073;115",
		mouseout:"#A2C139;167",
		mouseover:"#6A00FF;65",
		mouseup:"#339933;73"
	});

some color conversion factors (limit values)

color code limit value
#A05000 75
#1BA1E2 100
#0050EF 70
#A20025 70
#1BA0E1 100
#D80073 115
#A2C139 167
#6A00FF 66
#339933 73
#D8C101 180
#008A00 60
#F09609 115
#A05000 68
#339933 73
#765F89 70
#6D8764 90

download jFlat

Srinivas Dasari - Developer find me on facebook
follow me on twitter

Thank You