At first, I was using the hexagonal color-cube in WORD to create gradients, but that didn't have the resolution nor flexibility that I wanted. This PHP app takes 3 input parameters: beginning color, ending color, and the number of steps requested and interpolates between them. Step 0 is always the beginning color, and step n is the ending color.

theory of operation

The beginning and ending colors are captured from the GET request to the server. After range checking of the colors and the number of steps requested, a loop is run and the RGB components are linearly interpolated according to the current step of the loop. The color generated is used as the background of the table row.

The color values are provided on each row in both decimal and hexadecimal. The ordering for the values in black text are: index number, percentage of interpolation, decimal value of the background color, hexadecimal value of the background color. The ordering of the white text is a mirror of the ordering of the black text. Obviously, the black and white provide enough redundancy so that at least one set of values is readable (having high enough contrast with the background to be read) no matter what begin and end colors are chosen.

Source code for the color gradient generator may be found here. It's a PHP file, but it has a .txt final extension to make it easier to download from the web server. A final caveat: the html, head, and body tags are not included in this file. The file was meant to be included into a host document. In fact, this document hosts the source file directly with a PHP include.

usage

Provide values for color begin, color end, and number of steps, and click on the 'generate color gradient' button.

variable: number type minimum maximum value
color begin: hex 0x000000 0xFFFFFF
color end: hex 0x000000 0xFFFFFF
number of steps: dec 1 255

values are: (color begin: 0xB5E1FF), (color end: 0x00092E), (number of steps: 6)

00%11919871B5E1FFB5E1FF119198710%0
116%987900496BDDC96BDDC987900416%1
233%79036737899B97899B9790367333%2
350%59283425A75965A7596592834250%3
466%39530113C51733C5173395301166%4
583%19774241E2C501E2C50197742483%5
6100%235000092E00092E2350100%6

Privacy Policy