2

I'm a developer trying to learn more and practice better graphic design. One of the tools I love to use is Shaun Chapman's http://0to255.com as it easily let's you pick good variations on a base color for use in highlights, borders, etc.

I've always been interested in how the range of colors that is output is created. From the about page on 0to255.com:

Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design.

Can anybody give me a clue what this interval would be or some guidelines? I'd love to know just for personal growth how these are calculated so I can get some practice picking good color variations manually instead of relying on a tool that I don't quite understand the inner workings of.

Improve this question
1
  • 2
    "interval optimized for web design" seems more like a marketing buzzword than anything meaningful.
    – DA01
    Commented Oct 16, 2012 at 21:14

2 Answers 2

Reset to default
1

The main page states '9,540,279 colors and counting', so I guess it isn't just based on web colors. It seems like the intervals are pretty arbitrary, and the site just makes it easy for you to pick a spot along the continuum. Can't think of anything else really.

It looks like this site focuses on light and shadow, which mostly happens by playing with the brightness (and saturation) of a color.

I recommend Adobe Kuler, a free webservice, if you want to experiment with this stuff and find some nice color schemes. It has an interface which allows you to find complementing colors based on a whole range of constraints. (Hue, brightness, etc.)

Improve this answer
4
  • I don't really think this addresses the OPs question, does it? Also, where did you get that 9.5 million colors? The number is actually much greater than that. The 16 million number comes from 256 x 265 x 256 for RGB values. Add an alpha channel to that (RGBA) and the ways to work with color increase even more!
    – Ananda Mahto
    Commented Oct 17, 2012 at 16:55
  • I agree that the second part wasn't addressing his needs (I somehow got it into my head that this guy was making a website), but otherwise I don't really know what you mean. The 9,5 million colors quote comes directly from the homepage. I agree that RGB values does produce more colors, but that doesn't answer his question either.
    – Maarten
    Commented Oct 18, 2012 at 18:40
  • 2
    Ah... I didn't see the 9+ million statement on the homepage. Now where did the author of that page come up with that number? At least we know the mathematics behind 16 million ;) Kuler is nice, but I've always been somewhat partial to the color scheme designer if only because of the ability to quickly preview colors for the colorblind as well as the rest of us and its ease of exporting the color pallet to be used in different applications.
    – Ananda Mahto
    Commented Oct 18, 2012 at 18:54
  • Nice, I didn't know that one.
    – Maarten
    Commented Oct 18, 2012 at 19:03
0

The statement itself is somewhat a "gimmick" in that it has nothing to do with being optimized for web design; modern browsers are capable of displaying millions of colors.

However, it is not too difficult to understand what the author is doing.

One way of representing colors is the HSL (hue, saturation, and lightness) model, and it seems like the author of the site you've linked to is using that model to divide the lightness parameter (which ranges from 0 to 100%) into 31 units.

You can see, for instance, that the page for the color represented by the hex value #483D8B, when you hover over the color, it mentions "39%". Compare the color to that found on this page: http://www.colorcodehex.com/483d8b/. Note also the HSL value: 248°, 39%, 39%. It's that last value that needs to change to change the lightness or darkness of the color.

Check out this site and try entering the following HSL values: { 248, 39, 0 }, { 248, 39, 10 }, { 248, 39, 20 } etc

Modern web browsers should allow you to use HSL values in your CSS as follows:

p {
    background-color:hsl(248,39%,75%)
}

Otherwise, the site you linked to is more of a convenience for grabbing the hex values for the colors.

Improve this answer
3
  • Awesome answer! Thanks very much. If you don't mind a follow up question - when you are putting together a design and need highlights, borders, etc what is your strategy like? Do you just kind of click around on the color picker? Do you adjust the HSL values with a slider? I'll give you a concrete example - say you have a button with a background color of #89B4CE and you want a darker border on it...how do you pick that color? I know it's probably an inexact science and you use your eye but the software engineer in me is looking for a concrete, repeatable formula that I can use! :-)
    – Craig Koster
    Commented Oct 17, 2012 at 13:49
  • Sorry - the above was a bit of a long winded way of asking if you use the technique you showed of just altering the lightness to get color variations.
    – Craig Koster
    Commented Oct 17, 2012 at 13:50
  • @CK1, you're right. A lot of times you just use your eye. For the scenario you described, this technique might be useful. To be honest, I don't usually use this technique much at all; essentially, this is useful if you are creating a monochromatic design, but I find subtle two- to four-color palettes a bit more interesting to look at.
    – Ananda Mahto
    Commented Oct 17, 2012 at 17:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.