True Color Darkening and Lightening

Joseph Myers May 28, 2008

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://www.javascriptsource.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>

Leave a Response

(3 comments)

Try using 3 digits, e.g., f00 or ff0.

Lee Oct 31, 2008

Hi, when I get this to work is a handy tool.[br /]Does not seem to like initial colors startinf with "f".[br /]like ff0000, ffff00, etc..[br /]e seems to be ok.[br /]any help here?

Gord moscrip Jun 11, 2008

What an excellent tool for web page designers! It should be featured in every web design software as an alternative. It provides greater variety for those who manually create their own html than any other html colour selector that I am aware of. My rating: 10 out of 10.

Wayne Jun 2, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details