A basic introduction to digital color systems

In computer graphics we normally handle colors with the RGB color model, because monitors use light to produce a color (Additive color mixing). In this model colors can be described by numeric values indicating how much of the primary colors are included (RGB triplet).

The values vary from zero to a defined maximum. Most commonly you see a range from 0 to 255. In computers this range is the maximum that a single 8-bit byte can offer. With 8bits per color channel the resulting amount of colors is = 256 * 256 * 256 = 16,7 million. An image using 8bits per channel RGB results in a 24bit image. 1

A numeric range from 0 to 255 can be expressed as hexadecimal value with numbers form 0-9 and letters from A-F (10-15). To convert a numeric color value to hexadecimal, it is devided by 16 ignoring the remainder.

This gives us the first digit: for example 232 / 16 = 14 = E. There is a remainder of 8 giving us the second digit. 232 equals E8 expressed as hexadecimal value. With three color channels we need 3 hexadecimal values resulting in a 6-digit code or hex-triplet. 2

Color palette files can be as simple as a plain listing of RGB triplets or much more complex, storing colors of different colorspaces and additional metadata, like colornames and more. For this reason it is not always possible to convert the formats easily. Adobes Color Palette format (.aco) is an example of a complex palette. It is encoded in 16-bit and 32-bit integers and strings. This encoding makes it possible to store more informations. Contrary to Gimp’s palette file, Adobes format stores colors of different color spaces in one palette (eg RGB, CYMK, Lab). 3 4

Gimp Color Palette (.gpl)
GIMP Palette
Name: 02 Elements
Columns: 10
#
255 255 255 Water 001
145 155 161 Powder blue
120 134 140 Regent grey
110 124 131 Storm grey
 84 100 102 Limed spruce
255 255 255 Water 002
139 173 182 Nepal
107 143 152 Bermuda grey
 85 121 132 Breaker bay
 55  93 100 Untitled
Adobe Color Palette (.aco)
00000000h:|38 42 43 42|00 01|0B B8|00 00 00 23|00 24 00 24 ; 8BCB.......#.$.$
          +-----------+-----+-----+-----------+------------
00000010h: 00 24 00 2F 00 63 00 6F 00 6C 00 6F 00 72 00 62 ; .$./.c.o.l.o.r.b
          -------------------------------------------------
00000020h: 00 6F 00 6F 00 6B 00 2F 00 41 00 4E 00 50 00 41 ; .o.o.k./.A.N.P.A
          -------------------------------------------------
00000030h: 00 2F 00 74 00 69 00 74 00 6C 00 65 00 3D 00 41 ; ./.t.i.t.l.e.=.A
          -------------------------------------------------
00000040h: 00 4E 00 50 00 41 00 20 00 43 00 6F 00 6C 00 6F ; .N.P.A. .C.o.l.o
          ------------------------------+-----------+------
000000d0h: 00 41 00 64 00 50 00 72 00 6F|00 00 00 1F|00 24 ; .A.d.P.r.o.....$
          ------------------------------+-----------+------
000000e0h: 00 24 00 24 00 2F 00 63 00 6F 00 6C 00 6F 00 72 ; .$.$./.c.o.l.o.r

Overview of available software

Gpick

Gpick is my personal favorite to handle color palettes. It is probably not the most intuitive program, but once you have learned to use it, it’s a very powerful companion to manage colors.

Gpick UI

Basic Usage:
  • A “magazine” of 6 hexagons (top left corner), can be loaded with colors from the palette on the right side or from one of the secondary tools at the bottom (drag and drop). By pressing space, the color under the cursor (also shown in the middle hex), is added to the actually selected hexfield.
  • The button in the bottom right corner activates a floating color picker. To use it effectively, an action can be assigned to the color picker in the settings (menu » edit). Options are “Copy-to-Clipboard” or “Add to Palette”. The behaviour of the spacebar can also be changed in the settings.
  • Context sensitve right click menus help to manage, copy and edit Colorfields.
  • Drag and drop on the actual loaded palette to copy a colorfield, while holding shift and dragging, moves it. Hold ctrl to select multiple colors to move, delete or copy them.
Advanced Features:

  • Color Scheme Generation
  • Web Layout Colors with export to CSS funktion (it’s possible to customize the css selectors)
  • Create a Palette from an image
  • Color Blend Tool: Create Gradient by choosing start-, middle- and endpoint colors with a defined number of steps between
  • Customizable copy & paste functions (hex, rgb, hsl, CSS-color, CSS-background and more)
Supported Palette Formats:
  • .gpa (gpicks own format)
  • .gpl (gimp palettes)
  • .ase (adobe swatch exchange)

Agave

Agave is (by intention) much simpler than gpick. It’s main purpose and focus is to create color-schemes. It’s not really meant to create or manipulte palettes, but it has a function to favorite colors and export them as .gpl format. It’s a nice tool to “brainstorm” colors, because it’s so quick and easy to use.

It is possible to load custom palettes to be used with agave. By default they are stored in the users /home directory under .local/share/agave/palettes

Supported Palette Formats:
  • .gpl (gimp palettes)

Agave UI

KColorEdit

KColoredit has not as many features as Gpick, but for the single purpose of managing color palettes, it might be just all what you need or want. Everything is selfexplanatory and it’s easy to use out-of-the-box.

Kcoloredit UI

  • left: the actual palette in detail where you can modify colors, change the order, delete, add or rename colors
  • right: a preview of the complete palette and how you will see it in other applications
  • middle: choose a color selectors or tool
  • below the selected tool: the actual color (in the context of a chosen color-scheme)

Custom palettes to be used with KColorEdit are stored by default in the users /home directory under .kde4/share/config/colors (palettes used in the system-wide KDE color dialogue and other KDE apps like the KColorChooser)

Supported Palette Formats:
  • .gpl (gimp palettes)
  • .colors (kde’s palette format)

How to…

…convert an ACO Palette (Adobe) to a Gimp Palette

ACO is the standard palette format of Photoshop, using a 16bit encoding for the colors. This makes it possible to use different color spaces in one palette. Although Gimp is able to import .aco palettes in general, it can only handle the rgb color space. The import will only work correctly, when all colors are from the RGB color-space. The adobe swatch exchange format (.ase) can be used to bypass this problem. It is not supported in Gimp, but gpick can import the .ase format and export it as gimp palette.

  1. Export the .aco palette to .ase format with photoshop
  2. Import the .ase palette in Gpick: Menu » File » Import
  3. Export the the palette to .gpl: Menu » File » Export (.gpl format is the preselected default)

You can open the converted palette with a text editor to change the palette-name and the number of columns to be displayed to your likings.

…make a palette based on an image

This can be done with Gpick as well as with Gimp.

Gpick:

Menu » Tools » Palette from Image

Gimp:

  1. Open the Image to be used as source in Gimp.
  2. From the Palette Docker choose the Palette Menu » Import Palette
  3. Select Source: Image

…change the order/sorting of the colors in an existing palette

The best choice to do this is Gpick or KColorEdit. KColorEdit has the advantage that you can move colors up and down and see how the position in the palette changes in a specific layout (set by the number of columns). With this visual feedback it is much easier to make a palette with a special layout (eg colorwheel).

On the other hand you can modify multiple colors at once using Gpick. Hold ctrl to select a range of colors and shift to move them.

Hint: You can open two instance of Gpick and drag and drop colors between both windows.

…create a new palette from different existing palettes (Remix)

A nice feature of Agave is the possibility to select all available palettes from a dropdown menu. This is especially convenient when you use Agave in conjunction with Gpick. Quickly switch between palettes in agave and drag and drop colors over to gpick to create a new palette.

…merge two existing (Gimp-) palettes

Gimp palettes can be manipulated with any Text Editor. To merge two palettes you can just copy the color section of one palette at the end another one. Be sure not to copy the first 4 lines:

GIMP Palette
Name: 03 Copic
Columns: 16
#

You can also change the Name of the Palette and/or the number of Columns.

  1. Wikipedia - Color Depth: https://en.wikipedia.org/wiki/Color_depth

  2. Wikipedia - Web Colors: https://en.wikipedia.org/wiki/Web_colors

  3. Magnetiq - Adobe Color Book File Format Specification: http://magnetiq.com/pages/acb-spec/

  4. Adobe Photoshop Color File Format: http://www.nomodes.com/aco.html