Blog Color

I couldn’t decide what color I wanted my blog to be next. First it was orange, then green, but what could be better than green? So I decided that I would have it be all the colors of the rainbow, one at a time. So now my blog will cycle through the entire color wheel every 5 minutes. I’m sure at some point I’ll add a little widget so you can make it stop, or make it go slower or faster. I tried to choose a nice, easy medium speed that would allow you to actually see the color changing without making you seasick.

I love the way it shows how cool PNG images are by allowing the color to come through the PNG at the top of the page. Now that’s a dynamic background.

I wrote the code to do it completely by hand without looking anywhere on the ‘Net for tips. The algorithm that makes it work is especially interesting, and I must say it’s probably the most difficult one I’ve done lately. Those colors are not pre-programmed. They’re calculated based on the logic of how red, green, and blue combine to create color, and what the pattern would look like for each of those colors if you moved your current color along the rim of the color wheel, as I’m doing. Check out my color shift javascript if you’re a geek, and see if you can figure out how it works. I left some comments in there to help you out. It’s really beautifully simple. I’m proud to say it worked the first time I tried it. w00t for good planning!

I can’t tell you how tempted I was to put this into effect and not mention it for awhile, and see if people made comments like “I think something is wrong with my monitor…” and so on. That would’ve been hilarious.

The deep purple is my favorite.

11 thoughts on “Blog Color

  1. WOW! I love love love love it! Except the poopy brownish-orangish color. I love the pea green and the raspberry and the orange colors. Suddenly I feel hungry. Gotta go eat something. Wait! All we have to eat is 3 eggs and some canned corned beef. Ewwwwwww…..



  2. Whoever said people that work at apple are boring, they need to come to this site. I don’t think they could handle the excitement that this will generate. One word describes this….PANDEMONIUM.

    I think this is very cool. I agree steph on this on the brown could be better…..wait what is coming out of my mouth, I think the fact that you can set it up to do this is rockin.

  3. My only suggestion would be that you store the current color on unLoad into a cookie or something, so that way as you move page to page it doesn’t shift back to the default green.

    Overall very nice. Good work.

  4. Perhaps I missed it on my pass through the code, but I don’t see a way that any RGB value can go above 145, hence no yellow. Yellow would be (255, 255, 0), but the closest this code can get is (145, 145, 0) which is kind of a yellow-brown.

    Still, nice work Josh.

  5. Now that I’ve had my morning caffine, may I ask why you went for an RGB cycle rather than using an HSV cycle and converting to RGB for display?

  6. Wow, thanks for all the supportive comments, guys! I’ll respond quickly here.

    Mike, that’s a perfect idea. I wanted to do it last night, but I didn’t have the time, and I’ve never done cookies with javascript so I couldn’t just whip it out. The current thing took me 1 hour, so I guess I’ll have to spend a little more time than that to get the “color memory” feature. It annoys me that the page goes back to green, too. The other interesting thing that feature would implicitly add is the appearance that the site starts at a random place each time you re-visit it. If you left the site on Wednesday and it was purple at the moment, it would start at purple when you came back on Friday, right? That would make it more interesting, I think.

    Regarding the poopy brown/not-quite-yellow/not-quite-orange color, that issue actually relates to what Nathan noticed. The color wheel usually goes up to 255 for each of red, green, and blue, but I’ve artificially limited it to 145. The reason I did that was to tone the colors down a bit. If I let it go all the way to 255 for each color, the site would constantly be a horrible array of electric neon colors that are just not palatable to the human eye. I don’t want my visitors to be blinded, I just want a cool color-shift effect. I can make a sample page of what it would look like if I went up to 255 if you’d like to see it. 😉 Otherwise, Nathan hit the nail on the head in that this particular algorithm simply can’t do a nice bright orange and yellow because it’s being toned down.

    Nathan, regarding your HSV question, the reason I didn’t use HSV is threefold. One, I know nothing about HSV. I can see now, having peeked at it for a moment, that it would be a much better choice if I knew how to easily convert to RGB, etc. Two, as you know, CSS assumes RGB, and it would involve an extra conversion step. Three, I was genuinely interested in the pattern that the RGB lines create while your current color moves around the edge of the circle, and I wanted to see if I could generate that pattern algorithmically in a simple way. HSV is almost “too straightforward” from that perspective, since I would just be incrementing and looping one value. 🙂 However, it looks like HSV might solve the poopy brownish/yellowish/orangish problem I’m seeing (maybe) so if I see proof that it will, I’ll try to use that instead.

  7. I’d like to second all the nice things said. Also, I got to reading the title line of the relevant mainpage entry only the first moment I noticed the color changing. It was very cool timing.

    Finally, do not feed the Gosses. It is for your own protection.

  8. Quite simply the coolest thing I’ve ever seen on a web page.

    As for the HSV(HSB) -> RGB conversion, from http://www.easyrgb .com/math.php?MATH=M21#text21

    if ( S == 0 ) //HSV values = From 0 to 1
    R = V * 255 //RGB results = From 0 to 255
    G = V * 255
    B = V * 255
    var_h = H * 6
    var_i = int( var_h ) //Or … var_i = floor( var_h )
    var_1 = V * ( 1 – S )
    var_2 = V * ( 1 – S * ( var_h – var_i ) )
    var_3 = V * ( 1 – S * ( 1 – ( var_h – var_i ) ) )

    if ( var_i == 0 ) { var_r = V ; var_g = var_3 ; var_b = var_1 }
    else if ( var_i == 1 ) { var_r = var_2 ; var_g = V ; var_b = var_1 }
    else if ( var_i == 2 ) { var_r = var_1 ; var_g = V ; var_b = var_3 }
    else if ( var_i == 3 ) { var_r = var_1 ; var_g = var_2 ; var_b = V }
    else if ( var_i == 4 ) { var_r = var_3 ; var_g = var_1 ; var_b = V }
    else { var_r = V ; var_g = var_1 ; var_b = var_2 }

    R = var_r * 255 //RGB results = From 0 to 255
    G = var_g * 255
    B = var_b * 255

Leave a Reply

Your email address will not be published. Required fields are marked *