This page looks at color models in general and then color models as used by Python and libraries, particularly matplotlib.

A goal in any graphic is that the graphic be scalable in such a way that (preferably) one and only one parameter in the program needs to be changed to rescale the graphic. This involves finding any dependencies and defining them in terms of that one parameter.

There are many models for representing color.

We will look at color as seen by humans in terms of the additive light model and the subtractive print model.

When presenting graphics using color, one must always keep in mind how other humans and humans in general see color, and not how you see color, which colors you prefer, etc.

Many humans have trouble distinguishing red and blue when juxtaposed. These colors (e.g., ultra-violet and infra-red) are at opposite ends of the color spectrum so dispersion of light in the eye is at a maximum. Remember, people see different colors differently. In general, for presentation purposes, try to use a high contrast between background and foreground (e.g., text) colors.

• (nothing) = Black



• Red + Green = Yellow
• Green + Blue = Cyan
• Blue + Red = Magenta
• Red + Green + Blue = White

The RGB (Red Green Blue) color model is an additive light-based color model that works well for screen displays. In a light-based model, all colors (i.e., red, white, and blue) make white. The background of the screen is assumed to be black and colors add to the color seen. The additive light model assumes that the absence of color is black and that adding all colors, as in light, results in the human eye seeing white.

• (nothing) = White



• Cyan + Magenta = Blue
• Magenta + Yellow = Red
• Yellow + Cyan = Green
• Cyan + Magenta + Yellow = Black

The CMYK (Cyan Magenta Yellow Black) color model is a subtractive pigment-based color model that works well for printed material. The background of the paper is assumed to be white and colors subtract from the color seen (by absorbing color that would otherwise be reflected).

Since, in practice, the combination of cyan, magenta, and yellow make a muddy brown rather than black, black is added in the printing process.

CMYK values go from 0.0 to 1.0 though sometimes they are specified from 0 to 100 and must be, therefore, each divided by 100.0 to map them into the range 0.0 to 1.0

The conversion between CMYK and RGB can be approximated using the above model. Here is one way using the CMYK as (C, M, Y, K) each from 0.0 to 1.0 to map to RGB as (R, G, B) each from 0 to 255.

A 24 bit RGB additive light model uses

• 1 byte (8 bits) for red,
• 1 byte (8 bits) for green, and
• 1 byte (8 bits) for blue.

(256 values)*(256 values)*(256 values) provides about 16.7 million colors. This is called a "true color" model since the human eye cannot distinguish between small changes in the colors.

RGB values go from 0 to 255 as they are for a byte-oriented architecture. How many values can be represented with 8 bits?

For review, here are the 16 base 16 (hexadecimal) numbers from 0 to 15.

HTML uses an RGB color model. Here are some HTML color literals.

• #000000 is black.



• #FF0000 is (pure) red .
• #00FF00 is (pure) green .
• #0000FF is (pure) blue .
• #00FFFF is (pure) cyan .
• #FF00FF is (pure) magenta .
• #FFFF00 is (pure) yellow .
• #FFFFFF is white.

Write the HTML hexadecimal literals for red, green, blue, and white. Hint: Black is #000000.

In the RGB color model, shades of gray go from black to white. Here are some values from black to white in hex.

• #000000
• #333333
• #666666
• #999999
• #CCCCCC
• #FFFFFF

Here is the Python code [#1]
import os import matplotlib as mpl import matplotlib.pyplot as plt from PIL import Image import matplotlib.colors as colors import matplotlib.patches as patches imagePos1 = 0 rlen1 = 1 clen1 = 1 dpi1 = 72 width1 = 640 height1 = 480 figSize1 = (width1 / dpi1, height1/dpi1) fig1, ax1 = plt.subplots(rlen1,clen1,figsize=figSize1,dpi=dpi1) def colorPlot1(colorList1, clen1=2, show1=0): colorLen1 = len(colorList1) rlen1 = colorLen1 // clen1 if show1 == 1: print("Colors: {0:d} colors as {1:d} x {2:d} grid".format(colorLen1,rlen1,clen1)) cellHeight1 = 24 fontSize1 = int(0.667*float(cellHeight1 + 0.5)) colorHeight1 = int(1.2*float(fontSize1)+0.5) colorOffset1 = int(0.5 * (float(cellHeight1) - float(colorHeight1))) textOffset1 = colorOffset1 + int(float(fontSize1)*0.667 + 0.5) margin1 = int(float(fontSize1)*0.5+0.5) textWidth1 = int(float(fontSize1)*7.0*0.9+0.5) colorWidth1 = int(float(textWidth1)*0.5) cellWidth1 = colorWidth1+textWidth1+3*margin1 imageWidth1 = cellWidth1 *clen1 - 2*margin1 imageHeight1 = cellHeight1*rlen1 - 1*margin1 dpi1 = 72 figSize1 = (imageWidth1 / dpi1, imageHeight1 / dpi1) fig1, ax1 = plt.subplots(figsize=figSize1, dpi=dpi1) ax1.set_xlim(0, cellWidth1*clen1) ax1.set_ylim(cellHeight1*rlen1, 0) ax1.yaxis.set_visible(False) ax1.xaxis.set_visible(False) ax1.set_axis_off() for i1,color1 in enumerate(colorList1): rpos1 = i1 % rlen1 cpos1 = i1 // rlen1 if show1 == 1: print("\t{0:s} {1:d}. r={2:d} c={3:d}".format(color1,i1,rpos1,cpos1)) cellTop1 = rpos1 * cellHeight1 left1 = cellWidth1*cpos1 right1 = left1 + colorWidth1 cellLeft1 = cellWidth1*cpos1 colorLeft1 = cellLeft1 colorRight1 = cellLeft1 + colorWidth1 rect1 = patches.Rectangle( (cellLeft1,cellTop1+colorOffset1), colorWidth1, colorHeight1, facecolor=color1, edgecolor="#000000", linewidth=1.0 ) ax1.add_patch(rect1) textLeft1 = cellLeft1+ colorWidth1 + margin1 textTop1 = cellTop1 + textOffset1 ax1.text( textLeft1, textTop1, color1, fontsize=fontSize1, horizontalalignment="left", verticalalignment="center" ) fig1.tight_layout() global imagePos1 imagePos1 += 1 saveFs1 = "./color1-1-0{0:d}.png".format(imagePos1) fig1.savefig(saveFs1,bbox_inches="tight") savedImage1 = Image.open(saveFs1) savedWidth1, savedHeight1= savedImage1.size (_, _, _, _, _, _, savedSize1, _, savedTime1, _) = os.stat(saveFs1) print("\t{0:s} : {1:d} x {2:d} , {3:,} bytes".format(saveFs1,savedWidth1,savedHeight1,savedSize1)) def hexPlot1(hexList1, show1=0): hexList2 = [] for hex0 in hexList1: for hex1 in hexList1: for hex2 in hexList1: color1 = "#" + hex2 + hex1 + hex0 hexList2.append(color1) colorPlot1(hexList2,clen1=2,show1=show1) hexList1 = ["00", "FF"] hexPlot1(hexList1,show1=1) hexList1 = ["CC", "FF"] hexPlot1(hexList1) hexList1 = ["00", "66"] hexPlot1(hexList1)
Here is the output of the Python code.
Colors: 8 colors as 4 x 2 grid #000000 0. r=0 c=0 #FF0000 1. r=1 c=0 #00FF00 2. r=2 c=0 #FFFF00 3. r=3 c=0 #0000FF 4. r=0 c=1 #FF00FF 5. r=1 c=1 #00FFFF 6. r=2 c=1 #FFFFFF 7. r=3 c=1 ./color1-1-01.png : 326 x 80 , 5,111 bytes ./color1-1-02.png : 326 x 80 , 4,877 bytes ./color1-1-03.png : 326 x 80 , 7,064 bytes

Here are 8 pure colors from the above program.

Here are the above colors in a lighter version as I like to use for background colors.

Here are the above colors in a darker version as I like to use for foreground colors (borders, font, etc.) to go along with the lighter colors as background.