True Color Darkening and Lightening | JavaScriptSource

True Color Darkening and Lightening

Joseph Myers May 28, 2008


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

Original color:
Scale factor:

Original New


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


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


Paste this code into the BODY section of your HTML document

Leave a Response


How come this is no longer active? Is there another website I can use that will allow me to lighten or darken hex code colors? Thanks for your help.

Bruce Albert Apr 14, 2013

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