<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Fee free to distribute and modify code, but keep reference to its creator
*
* Color manager class aaccepts multiple color formats,
* allows to modify color properties like rgb, hsl and alpha values,
* and allows to convert colors back to different color formats
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Cross-format-color-manager
**************************************************************/
-->
<html>
<head>
</head>
<body>
<table border='1' cellpadding='5'>
<tr>
<td>Input color: </td>
<td><input type='text' id='new_color' size='30' value='rgba(35,9,34,0.8)'/> <input type='submit' value='Get color info' onclick='get_info();'/></td>
<td rowspan='14' style='width:400px; text-align: center;'>
<div style='width:300px; text-align:left; margin: 0 auto 0 auto;'>
<p>Input color definition. Accepted color formats:</p>
<ul>
<li>Named colors (like green)</li>
<li>Hex (like #fff or #ffffff or ffffff)</li>
<li>RGB (like rgb(255,255,255))</li>
<li>RGB alpha (like rgba(255,255,255,1))</li>
<li>HSL (like hsl(360,100,100))</li>
<li>HSL alpha (like hsla(360,100,100,1))</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Color example: </td>
<td>
<div style='border: 1px solid black; width: 100px; height: 100px; float: left; margin-right: 10px;' id='example'></div>
<p>Apply as (not all browsers support all formats):</p>
<select id='aplly' onchange='apply_color(this);'>
<option value='hex'>HEX</option>
<option value='rgb'>RGB</option>
<option value='rgba'>RGB alpha</option>
<option value='hsl'>HSL</option>
<option value='hsla'>HSL alpha</option>
</select>
</td>
</tr>
<tr>
<td>Red: </td>
<td id='red'> </td>
</tr>
<tr>
<td>Green: </td>
<td id='green'> </td>
</tr>
<tr>
<td>Blue: </td>
<td id='blue'> </td>
</tr>
<tr>
<td>Hue: </td>
<td id='hue'> </td>
</tr>
<tr>
<td>Saturation: </td>
<td id='sat'> </td>
</tr>
<tr>
<td>Light: </td>
<td id='light'> </td>
</tr>
<tr>
<td>Alpha: </td>
<td id='alpha'> </td>
</tr>
<tr>
<td>RGB: </td>
<td id='rgb'> </td>
</tr>
<tr>
<td>RGB aplha: </td>
<td id='rgba'> </td>
</tr>
<tr>
<td>HSL: </td>
<td id='hsl'> </td>
</tr>
<tr>
<td>HSL alpha: </td>
<td id='hsla'> </td>
</tr>
<tr>
<td>HEX: </td>
<td id='hex'> </td>
</tr>
</table>
<script type="text/javascript" src="./color_manager.packed.js" ></script>
<script type="text/javascript">
var cm;
function get_info()
{
//create rating instance
cm = new color_manager(document.getElementById("new_color").value);
if(cm.is_color)
{
var div = document.getElementById("example");
//applying color to div element
apply_color(document.getElementById("aplly"));
document.getElementById("red").innerHTML = cm.r;
document.getElementById("green").innerHTML = cm.g;
document.getElementById("blue").innerHTML = cm.b;
document.getElementById("hue").innerHTML = cm.h;
document.getElementById("sat").innerHTML = cm.s;
document.getElementById("light").innerHTML = cm.l;
document.getElementById("alpha").innerHTML = cm.a;
document.getElementById("rgb").innerHTML = cm.to_rgb();
document.getElementById("rgba").innerHTML = cm.to_rgba();
document.getElementById("hsl").innerHTML = cm.to_hsl();
document.getElementById("hsla").innerHTML = cm.to_hsla();
document.getElementById("hex").innerHTML = cm.to_hex();
}
else
{
alert("Invalid color format");
}
}
function apply_color(ob)
{
var value = ob.options[ob.selectedIndex].value;
var div = document.getElementById("example");
try{
switch(value)
{
case "rgb": div.style.backgroundColor = cm.to_rgb(); break;
case "rgba": div.style.backgroundColor = cm.to_rgba(); break;
case "hsl": div.style.backgroundColor = cm.to_hsl(); ;break;
case "hsla": div.style.backgroundColor = cm.to_hsla(); break;
default: div.style.backgroundColor = cm.to_hex(); break;
}
}
catch(e){alert("Browser does not support this color fomrat");}
}
get_info();
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
