Web Design - Colour Gradients
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.
If you think that you can assist with this project in any way, then please visit the Support section and leave a message.
- 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.
- Hyper Text Markup Language; the syntax / language used to write most documents on the internet.
- Cascading Style Sheets; the syntax / language used to describe how an HTML document should be presented to the user.
- 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.
- 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.
- Choose the number of individual colour steps that you require. This needs to be three or greater to be useful.
- Click the 'CalcResult' button below the input fields
- A 'Results Area' will be displayed below, containing a list of hex colour values.
- 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.)
- Press the 'Clear Results' button if you wish to discard the first results, otherwise further calculations will be added into the same area.
- Click the 'CalcResult' button again
- Click the 'Print Results' button to display all current results in a new, printable window.
© Copyright Mike Brockington 2004 - 2019 All Rights Reserved