Auto hex value calculator?

July 24, 2011 3:44 PM

Color-value calculation. What's my most efficient way to come up with the hex values of 30 discrete colors that fade as evenly as possible from 220088 to DDCCFF?

In other words: the first color is 220088; the thirtieth color is DDCCFF, and I want to figure out the 28 specific values in between those two values that fade as smoothly as possible in between them.

Does not have to be perfect mathematically. End purpose: 30 words on a page of HTML that are each going to have a span tag with a different color, so the visual effect is this gradual fade.

(I'm open to other coding suggestions too, but I do want to accomplish this with code, not just with an image of the 30 words faded graphically.)

posted by kalapierson to Media & Arts (9 answers total)

The word you want is 'gradient'.
posted by empath at 3:53 PM on July 24, 2011

Response by poster: Empath, that's exactly the auto-calculator I was hoping existed on the web.

Resolved in one answer!
posted by kalapierson at 3:59 PM on July 24, 2011

They even make these specifically to do this to text. Like this. (Very popular back in the days of GeoCities and html-based chat rooms...)
posted by anaelith at 4:08 PM on July 24, 2011 [2 favorites]

Response by poster: Ha. Even more efficient. :)
posted by kalapierson at 4:10 PM on July 24, 2011

You can generate your own hex gradient with R:

> my.palette <> > my.palette(28)
[1] "#220088" "#28078C" "#2F0F90" "#361695" "#3D1E99" "#44259E" "#4B2DA2"
[8] "#5234A6" "#593CAB" "#6044AF" "#674BB4" "#6E53B8" "#755ABC" "#7C62C1"
[15] "#8269C5" "#8971CA" "#9078CE" "#9780D2" "#9E88D7" "#A58FDB" "#AC97E0"
[22] "#B39EE4" "#BAA6E8" "#C1ADED" "#C8B5F1" "#CFBCF6" "#D6C4FA" "#DDCCFF"
>
posted by Blazecock Pileon at 4:15 PM on July 24, 2011

Let's try that again:

> my.palette <- colorRampPalette(c("#220088", "#DDCCFF"), space="rgb")
> my.palette(28)
[1] "#220088" "#28078C" "#2F0F90" "#361695" "#3D1E99" "#44259E" "#4B2DA2"
[8] "#5234A6" "#593CAB" "#6044AF" "#674BB4" "#6E53B8" "#755ABC" "#7C62C1"
[15] "#8269C5" "#8971CA" "#9078CE" "#9780D2" "#9E88D7" "#A58FDB" "#AC97E0"
[22] "#B39EE4" "#BAA6E8" "#C1ADED" "#C8B5F1" "#CFBCF6" "#D6C4FA" "#DDCCFF"
>

posted by Blazecock Pileon at 4:16 PM on July 24, 2011

One last time, for 30 values between the two endpoints, inclusive:

> my.palette <- colorRampPalette(c("#220088", "#DDCCFF"), space="rgb")
> my.palette(30)
[1] "#220088" "#28078C" "#2E0E90" "#351594" "#3B1C98" "#42239C" "#482AA0"
[8] "#4F31A4" "#5538A8" "#5C3FAC" "#6246B1" "#684DB5" "#6F54B9" "#755BBD"
[15] "#7C62C1" "#8269C5" "#8970C9" "#8F77CD" "#967ED1" "#9C85D5" "#A28CDA"
[22] "#A993DE" "#AF9AE2" "#B6A1E6" "#BCA8EA" "#C3AFEE" "#C9B6F2" "#D0BDF6"
[29] "#D6C4FA" "#DDCCFF"
>
posted by Blazecock Pileon at 6:27 PM on July 24, 2011

If it will help, you know that you don't need to define your colors using hex values, right? RGB works too.
posted by misterbrandt at 8:44 PM on July 24, 2011

In case it isn't obvious from the previous answers, you just treat your six-digit hex number as three RGB values: red: 22 fades to DD, green: 00 fades to CC, and blue: 88 fades to FF.

For red, take the distance between the two red values, DD minus 22, and divide by 30 (1E hex). This value is a one-thirtieth step between 22 and DD. Just add up the steps, rounding to the nearest integer. Do the same for the green and blue values.

You could just as easily do the calculations as decimal instead of hex.
posted by JackFlash at 10:01 PM on July 24, 2011