Using Color Scheme Designer to Create a Color Palette for Gimp

Color Scheme Designer 3 is an incredibly cool and very useful Javascript tool for developing a suite of colors that “play well together.” As you can see in the screenshot, the interface is sophisticated and complete.

Color Scheme Designer uses a color wheel to dynamically control color hues on the palette. The color wheel has a number of very interesting options. For example, you can select between 1, 2, 3, and 4 color schemes, labeled “Mono,” “Complement,” “Triad,” and “Tetrad.” The red arrow in the screenshot shows my choice of a “triad” scheme, which results in three circles on the color wheel. The black circle (purple arrow) is the main hue. The other two white circle (green arrows) represent the other two components of the triad. Selecting one of the white circles allows you to change the angles between the triad elements, resulting in marked differences in the color scheme. You can also specify the exact angle by clicking on the number.

Saturation and brightness are controlled on a dedicated pane selected below the color wheel (selection tab is left of red box highlighting the currently shown Hue pane). Saturation and brightness are applied globally, so that all the colors are affected equally and appropriately.

Exporting your color scheme

Once you’ve constructed an attractive palette, click on the Scheme Info tab shown in the blue box on screenshot to the right. You can export the palette to a self-contained HTML page, and to PhotoShop and Gimp palettes. The HTML file has an added benefit: the palette is encoded as a link on the page that takes you right back to that palette on the Color Scheme Designer website.

The Photoshop export is a download of the palette (presumably) in Adobe’s proprietary palette file format. I don’t have Photoshop so I can’t provide any further hints here.

The Gimp export produces web page with all the colors listed in RGB format. Copy the text of that web page into an ASCII text file with a .gpl filename using a text editor.

Importing palette into Gimp

Importing the color scheme palette is very easy, but it’s a bit obscure if you haven’t done it before. I had to poke around on the web a bit to figure it out. Proceeding stepwise:

1. Start GIMP, Menu item Window >> Dockable Tools >> Palette
2. Right click >> Import Palette, which brings up the dialog box as shown below.
3. Click radio button (red arrow in firgure) to import from file (“(None)” button shown in red box launches file dialog).

Color Scheme Designer has added benefits: it’s a lot of fun to play around with various colors while imagining how your website will look. It’s educational: the results of any change in hue, saturation and brightness are instantly shown in the Page Example pane on the right side of the first screenshot. If I had the time, I’d dig through the Javascript source code (non-commercial license) to learn how to build such a compelling application.

Tagged as: Color wheel, Complement, Gimp, Graphics, Palette, Tetrad, Triad, Unix