File: color_info.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Color manager   color_info.html   Download  
File: color_info.html
Role: Example script
Content type: text/plain
Description: Example color info and formats
Class: Color manager
Parse, manipulate and convert color values
Author: By
Last change: credits changed
Date: 13 years ago
Size: 4,419 bytes
 

Contents

Class file image Download
<!-- /************************************************************* * 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'>&nbsp;</td> </tr> <tr> <td>Green: </td> <td id='green'>&nbsp;</td> </tr> <tr> <td>Blue: </td> <td id='blue'>&nbsp;</td> </tr> <tr> <td>Hue: </td> <td id='hue'>&nbsp;</td> </tr> <tr> <td>Saturation: </td> <td id='sat'>&nbsp;</td> </tr> <tr> <td>Light: </td> <td id='light'>&nbsp;</td> </tr> <tr> <td>Alpha: </td> <td id='alpha'>&nbsp;</td> </tr> <tr> <td>RGB: </td> <td id='rgb'>&nbsp;</td> </tr> <tr> <td>RGB aplha: </td> <td id='rgba'>&nbsp;</td> </tr> <tr> <td>HSL: </td> <td id='hsl'>&nbsp;</td> </tr> <tr> <td>HSL alpha: </td> <td id='hsla'>&nbsp;</td> </tr> <tr> <td>HEX: </td> <td id='hex'>&nbsp;</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>