Miscellaneous : True Color Darkening and Lightening / The JavaScript Source

Browse Doc JS's Tips!

Promotions

Free Announcements

General

This script will brighten or darken colors, preserving the true color hue. The color's hexadecimal numbers are displayed for further use.

Original

New

Notes

Created by: Joseph Myers
Web Site: http://www.codelib.net/
Posted: May 28, 2008

Enter the original hexadecimal color value, either as a three-digit or six-digit value. Enter the scale factor (as an integer or a decimal value), and click the "Output" button in order to find the new hexadecimal color value. To darken the original color, enter a scale factor less than 1, such as .5. To brighten the original color, enter a scale factor like 5, to bring it five times closer towards white. Clicking on the bottom color bar will provide the hexadecimal number for that color in the scale, displayed in the "Output" box.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: trueColor.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Joseph Myers | http://www.codelib.net/ */

function colorscale(hexstr, scalefactor) {
/* declared variables first, in order;
  afterwards, undeclared local variables */
  var r = scalefactor;
  var a, i;
  if (r < 0 || typeof(hexstr) != 'string')
    return hexstr;
    hexstr = hexstr.replace(/[^0-9a-f]+/ig, '');
    if (hexstr.length == 3) {
    a = hexstr.split('');
  } else if (hexstr.length == 6) {
    a = hexstr.match(/(\w{2})/g);
  } else
    return hexstr;
  for (i=0; i<a.length; i++) {
    if (a[i].length == 2)
      a[i] = parseInt(a[i], 16);
    else {
      a[i] = parseInt(a[i], 16);
      a[i] = a[i]*16 + a[i];
  }
}

var maxColor = parseInt('ff', 16);

function relsize(a) {
  if (a == maxColor)
  return Infinity;
  return a/(maxColor-a);
}

function relsizeinv(y) {
  if (y == Infinity)
  return maxColor;
  return maxColor*y/(1+y);
}

for (i=0; i<a.length; i++) {
  a[i] = relsizeinv(relsize(a[i])*r);
  a[i] = Math.floor(a[i]).toString(16);
  if (a[i].length == 1)
  a[i] = '0' + a[i];
}
return a.join('');
}

function showrainbow(f) {
  var colorcell, hex, i, nhex;
  hex = f.orig.value;
  hex = hex.replace(/\W/g, '');
  nhex = colorscale(hex, f.scalef.value-0);
  if (nhex != hex) {
    f.outp.value = nhex;
    colorcell = document.getElementById('origcolor');
    i = document.getElementById('newcolor');
    colorcell.style.background = '#' + hex;
    i.style.background = '#' + nhex;
    for (i=0; i<256; i++) {
      colorcell = document.getElementById('colorcell'+i);
      nhex = colorscale(hex, i/(256-i));
      colorcell.style.background = '#' + nhex;
      colorcell.nhexvalue = nhex;
    }
  }
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="trueColor.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div style="width: 400px;">
<form>
<p>
Original color: <input type="text" name="orig" value="339990"><br>
Scale factor: <input type="text" name="scalef" value="4"><br>
<input type="button" value="Output" onclick="showrainbow(this.form)">
<input type="text" readonly name="outp" style="border: none;">
</p>
</form>

<table width="150">
<tr>
<td width="50%" height="50" id="origcolor">Original</td>
<td width="50%" id="newcolor">New</td></tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<script type="text/javascript">
for (i=0; i<256; i++)
document.write('<td width="10" height="50" id="colorcell', i, '" onclick="document.forms[0].outp.value = this.nhexvalue"></td>');
</script>
</tr>
</table>

</div>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: Gord moscrip
not all hex colors work?
06/11/2008 15:33:19

3. From: Lee (Admin)
10/31/2008 14:40:58

1. From: Wayne
True Color Darkening and Lightening
06/02/2008 19:35:44

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: Gord moscripnot all hex colors work?06/11/2008 15:33:19

3. From: Lee (Admin)10/31/2008 14:40:58

1. From: WayneTrue Color Darkening and Lightening06/02/2008 19:35:44

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

2. From: Gord moscrip
not all hex colors work?
06/11/2008 15:33:19

3. From: Lee (Admin)
10/31/2008 14:40:58

1. From: Wayne
True Color Darkening and Lightening
06/02/2008 19:35:44