JavaScript Color Object: Create and manipulate color values

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 27 All time: 530 This week: 5Up
Version License JavaScript version Categories
color 1.0.0GNU General Publi...6Graphics
Description 

Author

Chris Jeffries

This object can create and manipulate color values.

It can create color values using strings in different formats that can use HSL or RGB models in hexadecimal code, CSS, URL or array format.

The object can manipulate color values to change hue, saturation or lightness, as well convert colors between HSL and RGB models.

Picture of Chris Jeffries
Name: Chris Jeffries <contact>
Classes: 2 packages by
Country: United Kingdom
Age: 76
All time rank: 1728 in United Kingdom
Week rank: 6 Up1 in United Kingdom Up

Example

<!DOCTYPE HTML>
<html>
<head>
<title>Test Colour object</title>
<script src='Colour.class.js'></script>
<script>

	function showit(e)
	{
		var target = document.getElementById('target');
		
		c = new Colour(e.value, 'rgb');
		
		var result;
		result =  '<dl>';

		result += '<dt style="background-color:'+c.rgbS+ '">rgbA</dt><dd>' + c.rgbA[0] + ',' + c.rgbA[1] + ',' + c.rgbA[2] + '</dd>';

		c.changeHue(120);

		result += '<dt style="background-color:'+c.rgbS+ '">rgbA+120</dt><dd>' + c.rgbA[0] + ',' + c.rgbA[1] + ',' + c.rgbA[2] + '</dd>';

		c.changeHue(120);

		result += '<dt style="background-color:'+c.rgbS+ '">rgbA+240</dt><dd>' + c.rgbA[0] + ',' + c.rgbA[1] + ',' + c.rgbA[2] + '</dd>';

		c.changeHue(120);

		result += '<dt style="background-color:'+c.rgbS+ '">rgbA+360</dt><dd>' + c.rgbU + '</dd>';

		c.setSaturation(20);
		result += '<dt style="background-color:'+c.rgbS+ '">rgbA+360 saturation=20%</dt><dd>' + c.rgbA[0] + ',' + c.rgbA[1] + ',' + c.rgbA[2] + '</dd>';

		var d = c.getRelative([0,100,20]);
		result += '<dt style="background-color:'+d.rgbS+ '">rgbA+50 s and l unchanged</dt><dd>' + d.rgbA[0] + ',' + d.rgbA[1] + ',' + d.rgbA[2] + '</dd>';
		
		result += '</dl>';
		
	
		target.innerHTML = result;
	}
</script>
</head>
<body>
 <input onchange='showit(this);' value='#FF0000'><br>
 <div id='target'></div>
</body>
</html>

  Files folder image Files (2)  
File Role Description
Plain text file Colour.class.js Class The complete class
Accessible without login Plain text file testColor.html Example example of use

Downloadcolor-2017-10-20.zip 3KB
Downloadcolor-2017-10-20.tar.gz 3KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:27
This week:0
All time:530
This week:5Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.