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).

Download
Example codes
Examples in action
Property list
Method list
Latest changes
Rate us
Support

Download

Back to contents

JS classes - Color manager class

Example codes

Back to contents

<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

Back to contents

Example scripts provided with package in action:

Property list

Back to contents

Check if color format was valid
Red channel value
Green channel value
Blue channel value
Hue value
Saturation value
Light channel value
Alpha channel value

Check if color format was valid

Back to property list

Property name	is_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 name	r
Description	Red channel value of provided color
Example usage	alert(cm.r);

Green channel value

Back to property list

Property name	g
Description	Green channel value of provided color
Example usage	alert(cm.g);

Blue channel value

Back to property list

Property name	b
Description	Blue channel value of provided color
Example usage	alert(cm.b);

Hue value

Back to property list

Property name	h
Description	Hue value of provided color
Example usage	alert(cm.h);

Saturation value

Back to property list

Property name	s
Description	Saturation value of provided color
Example usage	alert(cm.s);

Light channel value

Back to property list

Property name	l
Description	Light value of provided color
Example usage	alert(cm.l);

Alpha channel value

Back to property list

Property name	a
Description	Alpha channel value of provided color
Example usage	alert(cm.a);

Method list

Back to contents

Constructor
Convert to RGB
Convert to RGB alpha
Convert to HSL
Convert to HSL alpha
Convert to HEX
Modify RGB values
Modify HSL values
Modify Alpha channel

Constructor

Back to method list

Method name	new 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 input	var cm = new color_manager("green");

Convert to RGB

Back to method list

Method name	to_rgb();
Description	Convert provided color format to RGB format.
Example output	rgb(255,255,255)

Convert to RGB alpha

Back to method list

Method name	to_rgba();
Description	Convert provided color format to RGB alpha format.
Example output	rgba(255,255,255, 0.8)

Convert to HSL

Back to method list

Method name	to_hsl();
Description	Convert provided color format to HSL format.
Example output	hsl(360,100,100)

Convert to HSL alpha

Back to method list

Method name	to_hsla();
Description	Convert provided color format to HSL alpha format.
Example output	hsla(360,100,100,0.5)

Convert to HEX

Back to method list

Method name	to_hex();
Description	Convert provided color format to HEX format.
Example output	#FFFFFF

Modify RGB values

Back to method list

Method name	modify_rgb(r,g,b);
Description	Set 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 input	modify_rgb(101,101,101);

Modify HSL values

Back to method list

Method name	modify_hsl(h,s,l);
Description	Set 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 input	modify_hsl(720,50,20);

Modify Alpha channel

Back to method list

Method name	modify_alpha(a);
Description	Set new alpha value
Input parameters	int a - alpha channel value from 0 to 1. Float values are accepted
Example input	modify_alpha(0.8);