Slashdot Mirror

← Back to Stories (view on slashdot.org)

Visibone Adds "Unsafe" Color Chart

Posted by michael on from the useful-and-pretty-too dept.

proub writes "If you're one of the zillions of designers who love your Visibone web-safe-palette mouse pads or posters, thought I'd mention that they seem to have added an "unsafe palette" poster as well. If you haven't seen them before, suffice to say it's a great way to find safe color combinations that work (the Color Lab doesn't suck, either). I refer to the web-palette poster constantly when doing www work, nice to have a similar version for GUI design where you have the whole big messy world of colors available."

35 comments

  1. Advertising on /. by PD · · Score: 0, Flamebait

    Methinks the ads are not restricted to the previously defined advertising boxes...

    --
    If tits were wings it'd be flying around.
  2. The original was a good idea, but... by realgone · · Score: 3, Insightful
    Heck, I've got a years-old copy of the "safe" poster hanging on my office wall right now. But this new "unsafe" version really seems like it's fulfilling a need that doesn't exist.

    The "safe" poster was truly handy for picking common palettes along HSB (hue/saturation/brightness) lines. e.g., "Wow, that's the perfect web-safe shade of blue. Now if I could only find a more subdued version of the same exact hue to use elsewhere in my site."

    Once you break free of those 216-color constraints, however, you're probably much better off using any color picker's HSB sliders to create your site palette. Not only do you give yourself more flexibility, but you avoid potential problems caused by picking a color that looks great on a CMYK printed poster, but looks entirely different on an RGB monitor.

    1. Re:The original was a good idea, but... by BobSteinVisiBone · · Score: 2, Informative

      Just to clarify, Mr. RealGone, the poster was never printed using 4-color process CMYK. I invented an 8-color process to match screen colors, had some inks custom blended by Superior Ink. If you got the first edition of the original poster (Feb-Dec 1999) I made a pretty big improvement after that in the color matching. 4D iterative interpolation was involved but of course I'm showing off to say so. (In short, ink color doesn't add or subtract, it multiplies.) So, have you held up one of the recent color references (poster, mouse pad, card) next to the screen? I think you'll be pleasantly surprised. -- Bob Stein, VisiBone, stein@visibone.com

      --
      Bob Stein, http://bobste.in
    2. Re:The original was a good idea, but... by realgone · · Score: 2
      If you got the first edition of the original poster (Feb-Dec 1999)...

      Yup, bought mine from ya back in the summer of '99. Like I said, it's still on my office wall and still pretty damned handy. I even import the Visibone palette into all my design apps. =)

      Honest, I've got the utmost respect for your products, but I just feel this one is a little off the mark for your target audience (of which I am a member). You've extended the metaphor of that safe poster, which is successful in representing a full range of discrete values, to the much broader set of unsafe colors. You can, by neccessity, represent only a sampling these values on the poster, which limits its usefulness as a production tool. I can find a color that's kinda sorta close to what I'm looking for, but I'll still need to go into a desgn app and tweak the color on-screen until it's exactly what I need. In that case, it'd probably be easier to use the app's HSB picker to begin with.

      I agree there's a niche that needs to be filled, but maybe a different approach is necessary? For example, I often refer to the Designer's Guides to Color while developing palettes for print projects. I'd kill for a product that takes a similar approach to "unsafe" web colors.

      Anyway, didn't mean to come off as a carping ingrate there. I thoroughly appreciate your products, use them daily, and owe you untold amounts of gratitude. Thanks for all the hard work!

    3. Re:The original was a good idea, but... by BobSteinVisiBone · · Score: 2, Interesting

      Really!? Oh boy, do I have a pleasant surprise for you. The newer poster (since 12/99) has much brighter dark colors, like burnished ceramic instead of sunbleached roadkill. And it has decimal codes on each chip. And the logo is MUCH brighter!

      Please write me and tell me where to send it. I am certain you'll find it more accurate in the darker shades.

      Do I understand correctly, you're saying that 1068 colors is not enough to be useful? Obviously it's a subset by a factor of 16,000. The whole of 24-bit color would take a foot-ball-field size poster.

      What I tried to do in the KiloChart was spread the colors out even perceptually not mathematically. Notice how quickly the web safe colors transition from red to yellow? And how many limey greens there are that all look alike? I tried to correct that. I've tried picking from it a few times and have only once found the need to do the tweaking you mention. Once I did want a really subtle pastel color. I didn't find it on the KiloChart and had to tweak.

      So my question is, can a paper color picker be useful even with only 1000 colors. (If you'll grant me for the time being, until you see it at least, that it's accurate.) Can it get you to a color that's good enough say more than half the time?

      Have I understood your point right?

      Say thanks for all the kind words. I'm really glad you found the poster useful. Please don't be too polite to tell me straight. I really want to get this right. If not this batch the next one. All the email I get is so schmaltzy I need to hear some thoughtful criticism.

      Did I say I really want to get you the newer poster?

      -- Bob Stein, VisiBone, stein@visibone.com

      --
      Bob Stein, http://bobste.in
    4. Re:The original was a good idea, but... by smartfart · · Score: 1
      Ok, neat.

      Mr. Stein, have you guys considered putting this new palette on your page as a download for Photoshop? I use the web-safe ones, and like them very much. I'd like to play with this new colorset you have, too.

      --
      Need a Linux consultant in New Orleans?
    5. Re:The original was a good idea, but... by BobSteinVisiBone · · Score: 1
      You know, I've been thinking about that, Mr. Smart...Guy. :-x :-D It will be hard fitting them with only 16 squares across, plus it's hard to get a triangle thing going, but maybe I can do something. The colors fit into shading series and there are 5,4,4,3,3,2,2,1,1 in each row. So in 15x9 I can fit four trinagles, kinda back-to-back, with black in between. That means the thing would have about 99 rows to fit the 42 hues.

      Are you sure that would be useful? Having to scroll through all the hues? It would be hard to tell looking at the screen and the KiloChart which mapped to which, you know. (Unlike the VisoBone2 swatches in Photoshop matching the web-safe Color Chart for example, which map exactly.)

      -- Bob Stein, VisiBone, stein@visibone.com

      --
      Bob Stein, http://bobste.in
  3. I would like to know... by OneFix · · Score: 4, Insightful

    How is a list of unsafe colors going to help you more than a safe color palette?

    And why are these so freaking popular? Lets see...

    Just do what I did and do a search on google for "web safe colors"...

    It turns up tons of pages like This One...

    And in this case, it is simply much easier to look up the color you want and just do a Copy and Paste...

    The other thing I don't quite get with this is that it if you use a web page with the "safe color" palette to find colors, wouldn't that be a more accurate interpretation of the end result (monitor instead of a poster)?

    I know some ppl claim they are helpful...however, I personally think they are just an excuse for a decoration.

    By all means, if you want a poster to hang on your wall, go for it...as for me, I'm gonna save the $$$ and use a web page...

    1. Re:I would like to know... by BobSteinVisiBone · · Score: 2, Informative

      (1) OneFix said: "How is a list of unsafe colors going to help?" Just to have a quick way to get a color you have in mind with more choices, that's what I was hoping. Web safe colors give short shrift to earth-tones and pastels for example.

      (2) Re looking up a color is easier online. For me, sometimes it is easier online, sometimes it isn't. I make both (color lab). Most software when it is running and in front of you still takes twiddling to get what you want. Personally, when I have a poster in front of me I just happen to use it to pick colors. It's like the HTML Popup reference I give away for free versus the HTML Card I sell. When I have both in front of me, I reach for the card. (Was that a shameless self-promotion? Ok, I know, but do you think it was an effective shameless self-promotion?)

      A chart is one way to envision all the options at once. Personally I like seeing the totality of a thing. I've never seen a color picker that does that. The best show a 2D pattern (HS or SB) with a knob for the 3rd dimension (B or H). So you can only see one slice of the choice-space at a time.

      (3) Accuracy of poster versus monitor. I think you'll find the stuff I made using 8 inks matches screen colors far better than anything else. Have you seen one next to a monitor? It's way more faithful than Pantone's ColorWeb for example. First I picked six inks to match the extremes, R,Y,G,C,B,M, and added a seventh because pink is too hot to make with just red and magenta (my pink ink is very close to process magenta actually). Four of those colors were custom blended by Superior Ink. They assigned 6-character pseudo-Pantone numbers for them. The rest are PMS spot colors. Then whenever I print something I'm in the pressroom the whole time and after wrestling with the registration I get the pressman to tweak the 7 colors (plus process black) so they look like the colors between a PC and a Mac but favoring the PC. I've read a lot about monitor gamma, but actually the PC distortion of colors isn't modeled well by a gamma curve, it's very linear with a discontinuity. I wrote about that a while back here. Anyway, after the first print-run I got colorimeter measurements for all the inks and then I modelled the multiplicative effects of offset printing in order to determine the best screen percentages of two inks and black to get a specific RGB color. Ok, more information than you wanted? I just wish you would *see* the thing next to its monitor redition and tell me if you don't think it matches well enough to be useful.

      (4) An excuse for decoration? Exactly! What, your walls are pristine white and free of marks or something?

      -- Bob Stein, VisiBone, stein@visibone.com

      --
      Bob Stein, http://bobste.in
  4. Re:How fucking pedanitc by Profane+Motherfucker · · Score: 0

    Ha! Here's the deal: I won't touch the BSD shit. Until you have established your fucking sorry copycat ass as someone who can dish out the fucking vulgarities with the same with and fucking charm that dozens of hapless bitches have come to expect, you cannot be officially infuckingdoctrinated to the Way. Start there. I will monitor your fucking progress from a distance.

  5. Flaw in the Visibone concept by Gryffin · · Score: 3, Insightful

    One big problem with this chart, and all the Visibone products: reflective (printed) color is *never* gonna match up well to screen color. Big show stopper there.

    To make matters worse, they overlay text, in white or black, over the color samples, which alters the perception of the colors.

    What I'd *love* to see them produce is an on-screen version of their charts, sans labels. See a color you like, roll your cursor over it, and up pops the HTML color value. You could do this with a big GIF on a Web page, with a big honkin' image map over it to supply the pop-up values. Even better, make it so if you click a color, it'll take you to another page that gives you useful options such as viewing text in the chosen color against backgrounds of another color, or v/v. Now THAT I could use.

    --
    Learn from the mistakes of others. You won't live long enough to make them all yourself.
    1. Re:Flaw in the Visibone concept by OneFix · · Score: 2

      You mean like This one?

      Right there you go 7k of JavaScript goodness :)

      This is even viewable in your browser so you can see how it'll look in Mozilla/IE/Konq...

      BTW, do what I did and find the page that has a list of all of the colors and their names and use an array to list the name of the color too :) So you can say "I like the Fuschia background" :)

    2. Re:Flaw in the Visibone concept by Gryffin · · Score: 1

      Ah, but it *doesn't* work in Opera, my browser of choice. Still, thanks, it's a Good Link.

      If I get really bored sometime, I might try to build that GIF I described. I think it'd be a very useful tool. And I can't believe no one else has done so yet.

      --
      Learn from the mistakes of others. You won't live long enough to make them all yourself.
    3. Re:Flaw in the Visibone concept by OneFix · · Score: 1

      They have, it's out there...check the search I suggested in a reply to the parent. Just don't use quotes...I think it's on the first 3 pages returned :)

    4. Re:Flaw in the Visibone concept by Anonymous Coward · · Score: 0

      or like this one:

      Visibone Colorlab

  6. This is bullshit by Anonymous Coward · · Score: 0

    If you are too cheap to have 24 bit color, you should not be surfing the web. Anyway, equilibrium software's DeBabelizer has been available for this kind of task for years and years.

  7. No hex? by avij · · Score: 1

    It doesn't even have the colours in hexadecimal (see here). Sorry, I'll just use the colour picker in Paint Shop Pro, it'll give out the colour in hex and I can easily cut and paste that value to my web pages. I guess I could use the RGB values as well, but I'm not used to using them yet :)

    --

    Follow your Euro bills at EBT
  8. Let the "web safe" palette die by Tom7 · · Score: 2

    Everything already looks crappy on a 256-color display, so why do we care if we use unsafe colors? Dithering your .GIFs to the web-safe palette makes them look bad. Don't do it!

    Now, for this "unsafe palette"... well, color charts are fine, but the HSB color picker in photoshop is much nicer and is interactive. It also contains many colors that are impossible to reproduce in print. Not that I wouldn't like to see even more color models on the computer, but what's the point of this?

  9. bookmarklet by koogydelbbog · · Score: 1

    this always impressed me:
    http://www.bookmarklets.com/tools/design/inde x.pht ml (the top one)

    a few lines of javascript that can be saved as a bookmark and runs anytime you pick it from your favourites - generates all 216 safe colours.

    andy

  10. Stealing Gryffin's Color Lab idea by BobSteinVisiBone · · Score: 2, Informative
    Maybe I'm missing something, Gryffin, but it sounds like you described shockingly precisely the Color Lab I made. Why OneFix, how flattering of you. That color lab is exactly choice #3 when you search Google for "web safe colors". :-D

    It has a GIF with plain colors and nothing over them (unlike the site OneFix mentioned at internet.com which has little dots in each color sample). It has a big positively honkin' JavaScript image map so you can pick any of those, and while you're hovering over them you can see the codes in the status bar. Then when you pick colors you see all their combinations of text on background on the right (no new page, same page).

    Isn't this darn tootin' close to what you were describing? It gets about 10,000 users a week.

    -- Bob Stein, VisiBone, stein@visibone.com

    --
    Bob Stein, http://bobste.in
    1. Re:Stealing Gryffin's Color Lab idea by OneFix · · Score: 2

      Actually the gif image I was talking about was this one.

      The only image I found on the colorlab site doesn't have codes that can be copied and pasted (it goes directly to the purchase page).

      Something like this would be easier to use in that case.

      I'm not saying someone couldn't find your posters useful, just that (given the options) I don't see why anyone would choose a paper product over a digital solution.

      The only reason I see to have a poster is to decorate a workspace...or possibly (very limited) to use in a board room where design decisions were being made.

    2. Re:Stealing Gryffin's Color Lab idea by BobSteinVisiBone · · Score: 1

      The gif image I was talking about was this one That's the image on the left side of the Color Lab at www.visibone.com/colorlab/. It shows each of the web-safe colors in a wheel. When you hover over them, the hex code shows up in the status bar. When you click on a color it shows up on the right, along with the 8 most recent colors clicked, along with clipboardable codes and all combinations of text / background for those 8 colors.

      I also make hex and decimal color tables with paste-able codes on top of each color like the one you mention at web-source.net. The hex version is here.

      However I will confess that your color references have features mine don't:

      • Scrambled up by hue. A great improvement on the color wheel. It's far more useful to sort colors by number.
      • Spanning eight pages so you get to lubricate your scroll-wheel looking for your color. I don't know why I didn't think of this. Showing all the colors at once does not challenge users nearly enough.
      --
      Bob Stein, http://bobste.in
    3. Re:Stealing Gryffin's Color Lab idea by Gryffin · · Score: 1

      Ah!! That's pretty similar to what I was thinking of, yes. Except for the layout; the one I had in mind used the hexagonal layout of your mousepad. What I like about the hex is that you see every color adjacent to all it's "neighbors," which makes it easier to see the minor differences between them. Your Color lab layout is more haphazard.

      I *have* bookmarked the Color Lab, though, and I'll be passing it around to my cow-orkers. Thanks!

      --
      Learn from the mistakes of others. You won't live long enough to make them all yourself.
  11. But have you *seen* them, good sir? by BobSteinVisiBone · · Score: 1
    Gryffin said: "reflective (printed) color is *never* gonna match up well to screen color."

    Want to see a sample? Bet ya it matches close enough to be very useful even to your discerning eye.

    The first print run (Feb 99) didn't do dark colors well. And the print run in April 2000 had the pinks a little too hot, cyans a little too weak. Those problems are still in the mouse pads and the Color Chart that are shipping today I confess. But the latest Color Poster, Color Card, and the new Color KiloChart are really great color matches.

    -- Bob Stein, VisiBone, stein@visibone.com

    --
    Bob Stein, http://bobste.in
  12. Hex is on me by BobSteinVisiBone · · Score: 1

    For what it's worth, the Color KiloChart shows examples of using decimal instead of hex for precisely this reason:

    <font color="#D2AB4D">
    <span style="color:rgb(210,171,77)">

    But thanks for your implicit vote for a hex reference. I am considering a Color KiloFoldout like the HTML Foldouts. Maybe one all hex and one all decimal. Any suggestions?

    -- Bob Stein, VisiBone, stein@visibone.com

    --
    Bob Stein, http://bobste.in
    1. Re:Hex is on me by FuzzyBad-Mofo · · Score: 1

      I do not understand why you are using the deprecated font tag for your hex example, when you may use either hex or decimal in style sheet definitions?

      E.G.

      <span style="color:#d2ab4d;">

      I found it odd that the color chart only has decimal representation.

      Fuzzy
    2. Re:Hex is on me by BobSteinVisiBone · · Score: 1
      Very clear point, Fuzzy One. I used the scandalous font tag only as the "before" portion of the example. Figure that makes it helpful to anyone using hex, whether in HTML or CSS. So I gather you agree that in every syntax that is not deprecated, it's possible to use decimal. The only syntaxes where someone is locked into hex have been deprecated.

      The chart has only one type of code in order to fit a thousand colors on it. I chose decimal because more software accommodates it. There is no case I can think of where software accepts hex codes but not decimal, can you? With PhotoShop and ImageReady for example, the decimal windows are only a double-click away if I'm not mistaken.

      Does that make sense and answer your implicit questions?

      -- Bob Stein, VisiBone, stein@visibone.com

      --
      Bob Stein, http://bobste.in
    3. Re:Hex is on me by FuzzyBad-Mofo · · Score: 1

      That does make sense, I had forgotten that the old color assignment method only allowed hex. And I understand about the lack of space for both numbering systems on your chart.

      It would be nice if the chart was available in hex, tho. I for one find that hex colors are easier to work with, perhaps due to familiarity.

      Fuzzy
    4. Re:Hex is on me by BobSteinVisiBone · · Score: 1

      Thanks for your vote for a hexadecimal poster, Fuzzy, you're not the only one. I am hoping perhaps one day I can make a pair of Color KiloFoldouts, one in decimal and one in hex. Would you prefer a wall poster or a foldable reference?

      --
      Bob Stein, http://bobste.in
  13. Websmithing with paper tools -- why? by BobSteinVisiBone · · Score: 1

    "I don't see why anyone would choose a paper product over a digital solution."

    It's a funny thing. Reminds me of that Spaceman Spiff cartoon where Calvin tries to fire his blasters with a Windows-like pull-down menu interface.

    Computers are still really cumbersome to use, like building a ship in a bottle with buttery boxing gloves. The thing I have found is that when I have an accurate color chart nearby, I'll use it, every single time, before fiddling with an electronic color picker.

    -- Bob Stein, VisiBone, stein@visibone.com

    --
    Bob Stein, http://bobste.in
    1. Re:Websmithing with paper tools -- why? by Gryffin · · Score: 1

      But there's no denying the differences in color gamut. Designing for the Web means designing for the screen, and even Hexachrome printing doesn't really have the range to do so accurately. What your posters *can* be useful for is comparing colors on a *relative* basis, but there's still no subsitute for seeing your colors on a monitor.

      Of course, even previewing colors on screen is somewhat approximate, thanks to the widely varying color accuracy of commodity monitors. Now, if you can help with *that* issue, I'm all ears ;{D

      --
      Learn from the mistakes of others. You won't live long enough to make them all yourself.
    2. Re:Websmithing with paper tools -- why? by BobSteinVisiBone · · Score: 1
      Nope, can't begin to pretend to imagine to solve the diversity-of-displays problem. But I can offer you a screen-color-matching system far superior to Hexachrome. In fact, that's not saying much. Although Hexachrome is what Pantone used in their ColorWeb product, it was certainly never designed to improve Web color matching (better skin tones and Irish-vivid foliage was its primary goals). It essentially adds vivid orange and green which are no help at all for the screen color furthest outside the CMYK gamut: electric blue. My eight-color system on the other hand was specifically designed to match computer screen color and does have a pretty darn decent electric blue (to wax technical). It doesn't compare to screen blue, you're very right. The physics can't support it. But I think if you can get a look you'll be at least a little surprised how good a job it does in the *relative* basis you speak of. That is, taking advantage of the eye-brain's ability to compensate for the ambient.

      -- Bob Stein, VisiBone, stein@visibone.com

      --
      Bob Stein, http://bobste.in