Web Design - Colour Gradients

Introduction:

This page allows you to
Click on any of the links at the top of the page to reveal (or hide) more information about this calculator.

Caveats:

If you are reading this paragraph, then you probably don't have JavaScript installed/enabled on your computer.
At this point in time the calculators on this site are entirely dependent on JavaScript. Given enough time and money it is hoped to develop a version in the future which will be able to operate independently. Since JavaScript runs on your own computer, rather than on this server, it has been possible to set up this site much more quickly than if a server-side language was used, and it is possible to serve far more pages with the available bandwidth.
If you think that you can assist with this project in any way, then please visit the Support section and leave a message.

Definitions:

Hexadecimal (Hex)

A numbering system using a base of 16, which uses the numbers 0 through 9 plus letters A to F to represent the 16 possible digits.

Hex Colour

As used in HTML / CSS, this uses three pairs of Hexadecimal digits to represent the 256 possible values each, of Red, Blue & Green components of a colour.

HTML

Hyper Text Markup Language; the syntax / language used to write most documents on the internet.

CSS

Cascading Style Sheets; the syntax / language used to describe how an HTML document should be presented to the user.

Formulae:

• There are no real formulae used in this calculator - all that is done is to split the two colour values into the three components, calculate a 'difference' between the two values for each colour component, and divide that value by the number of steps required in the gradient. The final calculated values are then rounded off, and converted into Hexadecimal notation.

Instructions

1. Fill in both of the first two boxes, with the value of the colours at either end of your gradient. It doesn't matter which way round they go, or whether the colour is in decimal format, hex format, or even hex shorthand.
2. Choose the number of individual colour steps that you require. This needs to be three or greater to be useful.
3. Click the 'CalcResult' button below the input fields
4. A 'Results Area' will be displayed below, containing a list of hex colour values.
5. To do further calculations simply change the values in the input fields and click the 'CalcResult' button again. (Press the 'Clear Form' button if you want to empty all of the input fields.)
6. Press the 'Clear Results' button if you wish to discard the first results, otherwise further calculations will be added into the same area.
7. Click the 'CalcResult' button again
8. Click the 'Print Results' button to display all current results in a new, printable window.