Web-Safe Swatch Collections

A visual comparison...

Default ImageReady swatches
Default swatch collection for
Adobe ImageReady
Striking but incomplete.

Lynda Weinman's swatches
Lynda Weinman's classic
browser-safe swatch collection.
Complete but jumbled.

VisiBone's swatches
VisiBone Swatch Collection #1
VisiBone.aco.

VisiBone2_clut.gif (11542 bytes)
VisiBone Swatch Collection #2
VisiBone2.aco.

 

 

 

 

Webmaster's Palette Poster -- Second Edition
Second Edition of the Poster
is now available!  Much better
color matching and decimal
RGB color codes.

 VisiBone swatch collections are available for the following fine graphics packages:

BBEdit by Bare Bones Software (Mac)
Canvas by ACD (Windows, Mac)
Fireworks
by Macromedia (Windows)
Flash MX
GIMP (Linux, Windows)
GoLive by Adobe
HomeSite by Allaire or CF Studio (Windows)
Illustrator by Adobe (Windows, Mac)
ImageReady by Adobe (Windows)
Paint Shop Pro by Jasc (Windows)
Painter by MetaCreations (Windows, Mac)
Photoshop or Elements by Adobe (Windows, Mac)
TopStyle by Bradbury Software (CSS Editor for Windows)

Downloadable* swatches are available here for most of these formats.

For Adobe Photoshop (including Photoshop Elements) and ImageReady:

Windows users:

The VisiBone2 swatch collection ships with Adobe Photoshop (and ImageReady and Illustrator and GoLive — but not Photoshop Elements). To access it:

  1. Window | Show Swatches
  2. Click the black right-arrow triangle near the Swatches tab. Select Replace Swatches
  3. Go looking for the file, it may be one of these places:
    C:\Program Files\Adobe\Photoshop X.X\Goodies\Color Swatches
    C:\Program Files\Adobe\Photoshop Elements X.X\Presets\Color Swatches

Earlier instructions for downloading the swatches for Photoshop, Photoshop Elements, and ImageReady:

  1. Download VisiBone.aco or VisiBone2.aco
  2. Save right into c:\program files\adobe\photoshop\goodies\color palettes or c:\program files\adobe\imageready 2.0\swatches.  Make sure you save it with an .aco extension.  Netscape hint: hold down the shift key when you click on the hyperlink. 
  3. Swatches window, import arrowBring up the swatches collection in your Adobe software.   ImageReady hint: pull down the Windows menu and click Show Swatches.
  4. Click on the big black arrow in the upper right corner of the swatch collection pane (photo on right).
  5. Click on Replace Swatches (or if no such option, Load Swatches).  Specify where you stored the file.

To make these swatches come up automatically each time you run ImageReady, you can rename the file to default.aco.  This isn't necessary in Photoshop — just put the .aco file in the same directory as default.aco (you'll see where that is after you hit the arrow).

Mac users:

  1. Download VisiBone.aco.zip or VisiBone2.aco.zip, provided in ZIP format to retain the resource fork (many thanks to Joe Gillespie and Freek Dijkstra).  
  2. Unzip.
  3. Drag the file from its new folder to whichever of these folders makes the most sense:
         
    Macintosh HD/Applications/Adobe Photoshop CS/Presets/Color Swatches
         Macintosh HD/Applications/Photoshop/Goodies/Color Palettes
     
  4. Restart Photoshop and load the new palette.

Thanks to Sally, Alex, Sara, Steve C., Ross N., and many other good folk who have helped out with instructions and server settings.

 

For Jasc Paint Shop Pro

  1. Copy the file (PSP8: VisiBone2_km.psppalette, PSP5: VisiBone2_km.pal) file into Paint Shop Pro's Palettes folder (in a default Windows installation this would be C:\Program Files\Paint Shop Pro 5\Palettes\ ). Check that the extension hasn't changed (.psppalette or .pal) Windows/Internet Explorer users: right-click on the file name and choose "Save Target As".  If your file ends up named VisiBone2_km.psppalette.txt or some other fascinating aberration, you will want to correct it.  You should check after you save it on disk.  Mac/Internet Explorer users: control-click on the file name and choose "Save Target As" (please correct my Mac ignorance if I have this wrong).   Netscape users: click on the file name.
  2. To use the VisiBone palette, open the image you want to edit (or create a new one) and click on ImagePaletteLoad Palette (PSP5: Colors | Load Palette). Choose VisiBone2_km.pspalette (or .pal) from the list of palette files and select how you want the palette applied to the image (if necessary, PSP will reduce the colors in the image to a depth of 256 and gives you the option of either using dithering or the nearest palette color as it reduces the number of colors). Click Open.
  3. Click on the foreground or background Color Switcher to bring up the palette dialog window. If the Sort Order isn't "Palette Order", change it to "Palette Order" in order to see the colors in the VisiBone arrangement (note for more help using Palettes, check out PSP's help file).

There appears to be no way of making VisiBone_km the default palette. With PSP, the default color depth is 16 million so the default color scheme is the full spectrum. However, once you've loaded the VisiBone palette for an image, it will always come up for that image (unless you load a different palette or increase the color depth).

Format and instructions by the copious generosity and thoughtful precision of Kitty MacAlpine.  Around the same time Kitty contributed this, Anna Cochran sent in a PSP version also, that her son had derived from The GIMP version.  Comparing, they both had tiny flaws.  The file above has them fixed. Instructions thoughtfully updated for PSP8 by Mark Kaprielian.

 

For Allaire HomeSite 4.0 or CF Studio

  1. Download VisiBone1_ap.hpl or VisiBone2_ap.hpl(If you see the text contents, try File | Save As.  Remove the .txt extension if any. Thanks to Jon Humphrey for this tip.)
  2. Copy one or both into c:\Program Files\Allaire\HomeSite4\UserData\Palettes (or wherever HomeSite is installed on your system).
  3. Start (or restart) HomeSite.
  4. Click on the Palette icon and select Options (the little Palette symbol at the bottom of the window).
  5. Choose "VisiBone1_ap" or "VisiBone2_ap" from the menu to use either swatch collection #1 or #2.

Adapted from The GIMP version and generously provided here for HomeSite users by Anne Parker, Cambridge England. 

 

For Adobe Illustrator 8

VisiBone2_vaccc.aiAdobe included this starting Illustrator 8.  It shows hexadecimal HTML, decimal RGB and VACCC color names.  If you don't have already, here are the instructions for Windows:

  1. Download VisiBone2_vaccc.ai.
  2. Store it in the Swatch Libraries folder, e.g. C:\Program Files\Adobe\Illustrator 8.0\Swatch Libraries.
  3. In Illustrator, choose  Window > Swatch Libraries > VisiBone2_vaccc
  4. You may need to resize the window until it's 16 squares wide so the swatches line up.
  5. Click the black triangle and select Persistent to keep it there next time you start Illustrator.


Original Illustrator swatch collections...

VisiBone2_gy.ai (149K) courtesy of Gary Yuen, for Windows
VisiBone2_sc.ai (179K) for Windows from Sandee Cohen

  1. Within Illustrator choose menu option Window > Swatch Libraries > Other Library
  2. There's a list of libraries including one for the web.   You could rename the file Web.ai and replace the default so when you select web these swatches will come up.

VisiBone1_scai.sit (50K) and VisiBone2_scai.sit (50K) courtesy of author Sandee Cohen, for the Mac:

  1. Open the file as a swatch library and then adjust the size so the palette looks correct.

 

For The Gimp

  1. Download VisiBone.gimp or VisiBone2.gimp into your ~/.gimp/palettes directory (or ~/.gimp-2.2/palettes, etc.).
  2. Choose File | Dialogs | Palette (or hit Ctrl-P).
  3. Select VisiBone.gimp from the palette list on the top right of the Color Palette dialog.

Do you get the error "Fatal parse error in palette file - missing magic header. Does this file need converting from DOS?"  First reported by Keith B.  Solution appears to be to convert the line terminators in the file from CRLF to LF. Keith writes:

A dos2unix utility comes with many linux distributions, e.g. Fedora. Otherwise in vi do ":%s/.$//g" (or similar with sed) - i.e. delete the last character of every line, which is in this case ^M.

Thanks to Patricia R. for reporting these swatches work for the Windows version of The GIMP as well as for Linux.

Conversion and instructions courtesy of Jeff Hoffman, in magnanimous Linux style.  Corrections and conversion of arrangement #2, with RGB and hex codes, courtesy of the eminently meticulous Carey Bunks (cbunks@bbn.com).

 

For Macromedia Fireworks

  1. Download VisiBone.act.   See variations below...
  2. Save it in the Fireworks folder or make a swatches subfolder.
  3. In Fireworks, click Window | Swatches
  4. Fireworks swatch palette windowClick on the arrow in the upper right corner of the swatches window (photo on right).
  5. Choose Replace Palette or Replace Swatches.
  6. Browse around for your downloaded VisiBone.act file.
  7. Resize the swatch window so the colors line up (drag a corner of the window). The color wheel will look right when there are 16 squares to a row.  (Some of the files below are 23 squares wide.)

Thanks, Nancy, for your persistence in making the above file for Fireworks fans everywhere.

Here are some handy variations from the industrious Mr. Daniel Staver:

In all cases, the swatch window must be resized to a width of 16 or 23.  Otherwise the colors will be jumbled.

23 Dec 99 — Jason has thoughtfully demonstrated there is still a problem in Fireworks 3.   I have written the good folks at Macromedia about this, offering a free poster to any developer who at will look at Jason's page.  No takers so far...
18 Apr 00 — Jason took his screen-captures away.
14 Jun 00 — Contacted by alert Macromedian Doug Benson! Screen captures restored for his viewing pleasure.

Rich Fuester contributed this variation for Fireworks MX:

 

For MetaCreations Painter

VisiBone2_mamcp.txt courtesy of Mark Anderson should look like this.   Info from Mark:

"I did the the palette in v5.5 for Win but my guess is it would work in version 4.x thru 6 for Windows. Not sure about Macs. Painter is really an app to work in true color but you can set up 'color set' swatches as you would your artist's palette and as of v5.5 the app shipped with a '216 web color' color set.

Under Windows, the color set (swatch) palette is a simple .TXT file. These live in C:\Program Files\Painter 5.5\Extra Art Material\ if you've used a default install. To load the color set/swatch from another folder simply open the 'Art Materials' palette, click 'Color' menu and then click 'Load color Set'

My guess is the folder name within the 'Painter' folder will be the same for other Windows versions of the program or a Mac."

 

For Flash MX

VisiBone2.clr

Thanks to Marc Castles.

For ACD Canvas:

Windows users:

  1. Place the RGB_VisiBone_websafe_216.pal file in the Canvas "Color Inks" folder. On Windows, using Canvas X, this folder is in:
    C--> Program Files --> ACD Systems --> Canvas X --> Color Inks
  2. Relaunch Canvas.

This file will work in versions 9 and X of Canvas. The palette is 16x16 color inks. Drag the "Presets" palette open to that dimension (see screen shot).

Thanks to Ken Petri.

 

Use Tips

Both VisiBone collections include the entire 216-color Webmaster's Palette of colors, with each color shown exactly once, except for white and gray in the corners and black in the holes.  Within the confines of these grids, the palette is not precisely symmetrical by hue.  But all opposite colors are diametrically opposite the center.

For black click in the center.  This avoids hitting some of the really dark colors by mistake.  If you look really close in collection #1 you can see Obscure Weak Yellow (#333300) in the fourth row down, third column from the left.  Obscure Weak Blue (#000033) is similarly exposed toward the lower right, as is Obscure Gray (#333333) on the inboard end of each corner gray series.  The other really dim colors are surrounded by color and not exposed like this.  On some systems these colors are very hard to distinguish from black.

 

Feedback from Customers

Jeffrey Zeldman (Dr. Web, and A List Apart, www.alistapart.com): "There are Web-safe color palettes, and then there are Web-safe color palettes. VisiBone.com makes one of the best..."

Joe Gillespie (Web Page Design For Designers, www.wpdfd.com):   "I just wanted to say how very useful your VisiBone swatch has been to me personally."

Jason Cranford Teague (www.webbedenvironments.com):   "I use your colour palette daily."

Nancy S:  "I absolutely love the VisiBone swatch."+

 

Permission has been graciously requested and cheerfully granted for the following products to include VisiBone color arrangements:

Adobe Photoshop
VERSION 5.5
AND LATER
Adobe Illustrator
VERSION 9
AND LATER
Adobe GoLive
VERSION 7
AND LATER
The GIMP for Linux
VERSION 1.2
AND LATER
   
BBEdit HTML editor for the Mac
VERSION 5.1.1
AND LATER
Bradbury Software's TopStyle "A Touch Of Style" article by Dave Raggett
CSS Intro by
Dave Raggett
at w3c.org

VisiBone swatch collections are distributed by:

Simtel Collection
visib02.zip

*Usage guidelines:  You're more than welcome to download the swatch collections on this page and use them for fun or profit to your heart's content on the same computer on which you downloaded them.  Please do not reproduce, derive or distribute without advance permission from VisiBone.

VisiBone Announcements Mailing List:
For significant VisiBone news, such as new layouts, formats, resources
and products (see archive), please enter your e-mail address here:


This mailing list is strictly private and sparingly used (4 times in 2000-2001).
Solicitations screaming in all caps and tasteless colors are not available.