Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Cross format color manager

Color manager class accepts different color formats like:

  • Named colors (like green),
  • Hex (like #fff or #ffffff or ffffff),
  • RGB (like rgb(255,255,255)),
  • RGB alpha (like rgba(255,255,255,1)),
  • HSL (like hsl(360,100,100)),
  • HSL alpha (like hsla(360,100,100,1)).

Thus making it compatible with different browsers.

After creating class instance with specified color format, it is possible to convert specified color to other formats, access each color channel separalty and modify rgb, hsl or alpha values.

Since it is possible to modify color channels and convert color to many formats, it makes possible to modify hsl values of rgb color and represent it in format which browser would understand.

Package contains color_manager.js and color_manager.packed.js (packed javascript), two example files: color_info.html(to see how you cen get color information and convert between formats) and modify_colors.html (to see how for example you can retrieve color in rgb and modify it in hsl and convert back to rgb).

Contents

Download

Example codes

<html>
<head>
<style type="text/css">
.test
{
    border: 1px solid black; 
    width: 100px; 
    height: 100px;
}
</style>
</head>
<body>
<div class="test" id="test"></div>
<script type="text/javascript" src="./color_manager.js" ></script>
<script type="text/javascript">
    var div = document.getElementById("test");
    
    //create class instance
    var cm = new color_manager("green");
    
    //applying color to element
    div.style.backgroundColor = cm.to_hex();
    
    //output different color formats
    alert(cm.to_hex() + "n" + 
    cm.to_rgb() + "n" + 
    cm.to_rgba() + "n" + 
    cm.to_hsl() + "n" + 
    cm.to_hsla());
    
    //modify hsl values
    cm.modify_hsl(cm.h + 30, cm.s, cm.l + 10);
    
    //applying color to element
    div.style.backgroundColor = cm.to_hex();
    
    //output different color formats
    alert(cm.to_hex() + "n" + 
    cm.to_rgb() + "n" + 
    cm.to_rgba() + "n" + 
    cm.to_hsl() + "n" + 
    cm.to_hsla());
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Property list

Check if color format was valid

Back to property list

Property nameis_color
Description

If color format provided to class instance was correct, then this value is set to true and all other class properties are generated and class methods can be applied. But if color format was incorrect or unsupported, then this properties value will be false, and you can't rely on any other class property or method

Example usage
if(cm.is_color)
{
	alert("Color format correct");
}
else
{
	alert("Incorrect color");
}

Red channel value

Back to property list

Property namer
Description

Red channel value of provided color

Example usage

alert(cm.r);

Green channel value

Back to property list

Property nameg
Description

Green channel value of provided color

Example usage

alert(cm.g);

Blue channel value

Back to property list

Property nameb
Description

Blue channel value of provided color

Example usage

alert(cm.b);

Hue value

Back to property list

Property nameh
Description

Hue value of provided color

Example usage

alert(cm.h);

Saturation value

Back to property list

Property names
Description

Saturation value of provided color

Example usage

alert(cm.s);

Light channel value

Back to property list

Property namel
Description

Light value of provided color

Example usage

alert(cm.l);

Alpha channel value

Back to property list

Property namea
Description

Alpha channel value of provided color

Example usage

alert(cm.a);

Method list

Constructor

Back to method list

Method namenew color_manager(color)
Description

Creates class instance with provided color definition

Supported color formats are:

  • Named colors (like green)
  • Hex (like #fff or #ffffff or ffffff)
  • RGB (like rgb(255,255,255))
  • RGB alpha (like rgba(255,255,255,1))
  • HSL (like hsl(360,100,100))
  • HSL alpha (like hsla(360,100,100,1))
Input parameters

string color - color definition in supported format

Example inputvar cm = new color_manager("green");

Convert to RGB

Back to method list

Method nameto_rgb();
DescriptionConvert provided color format to RGB format.
Example outputrgb(255,255,255)

Convert to RGB alpha

Back to method list

Method nameto_rgba();
DescriptionConvert provided color format to RGB alpha format.
Example outputrgba(255,255,255, 0.8)

Convert to HSL

Back to method list

Method nameto_hsl();
DescriptionConvert provided color format to HSL format.
Example outputhsl(360,100,100)

Convert to HSL alpha

Back to method list

Method nameto_hsla();
DescriptionConvert provided color format to HSL alpha format.
Example outputhsla(360,100,100,0.5)

Convert to HEX

Back to method list

Method nameto_hex();
DescriptionConvert provided color format to HEX format.
Example output#FFFFFF

Modify RGB values

Back to method list

Method namemodify_rgb(r,g,b);
DescriptionSet new RGB values
Input parameters

int r - red channel values from 0 to 255

int g - green channel values from 0 to 255

int b - blue channel values from 0 to 255

Example inputmodify_rgb(101,101,101);

Modify HSL values

Back to method list

Method namemodify_hsl(h,s,l);
DescriptionSet new HSL values
Input parameters

int h - hue values from 0 to 360. Values higher can be provided, they will be converted to proper angle of circle

int s - saturation values from 0 to 100 as representation of percentage of saturation

int l - light values from 0 to 100 as representation of percentage of light

Example inputmodify_hsl(720,50,20);

Modify Alpha channel

Back to method list

Method namemodify_alpha(a);
DescriptionSet new alpha value
Input parameters

int a - alpha channel value from 0 to 1. Float values are accepted

Example inputmodify_alpha(0.8);

Latest changes

None for now

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Scripts.com
RATE ME!

Try it out and Rate on JSclasses.org

Support

JS classes support forum or comments below


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus