{"id":4027,"date":"2020-03-10T07:00:36","date_gmt":"2020-03-10T11:00:36","guid":{"rendered":"https:\/\/blogs.mathworks.com\/steve\/?p=4027"},"modified":"2020-08-18T09:09:48","modified_gmt":"2020-08-18T13:09:48","slug":"how-to-display-color-swatches","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/steve\/2020\/03\/10\/how-to-display-color-swatches\/","title":{"rendered":"How to Display Color Swatches"},"content":{"rendered":"

When working on the \"Color Image Processing\" chapter of DIPUM3E<\/b><\/a>, I found myself often wanting to display square blocks (or swatches) of color, like this:<\/p>

\"\" <\/p>

Eventually, I wrote a function, colorSwatches<\/tt>, to display a bunch of color squares using a single patch object. This function is used in DIPUM3E<\/b><\/a>, and it is included in the MATLAB code files for the book<\/a>. To call it, start with a set of RGB color values arranged in a Px3 matrix, where P is the number of colors. The lines<\/tt> functions returns the colors used by the MATLAB plot function:<\/p>

c = lines(7)\r\n<\/pre>
\r\nc =\r\n\r\n         0    0.4470    0.7410\r\n    0.8500    0.3250    0.0980\r\n    0.9290    0.6940    0.1250\r\n    0.4940    0.1840    0.5560\r\n    0.4660    0.6740    0.1880\r\n    0.3010    0.7450    0.9330\r\n    0.6350    0.0780    0.1840\r\n\r\n<\/pre>
Now just call colorSwatches<\/tt>, passing in the set of colors, and optionally passing in the desired size of the color grid.<\/p>
grid_size = [3 3];\r\ncolorSwatches(c,grid_size)\r\n<\/pre>\"\" 
The color swatches in the above figure are not quite square, and that's because the data aspect ratio in the axes is not 1:1. But we can easily change that using the daspect<\/tt> function.<\/p>
daspect([1 1 1])\r\n<\/pre>\"\" 
Let's look under the hood and see this all works using just a single patch object.<\/p>
p = colorSwatches(c,grid_size)\r\n<\/pre>
\r\np = \r\n\r\n  Patch with properties:\r\n\r\n    FaceColor: 'flat'\r\n    FaceAlpha: 1\r\n    EdgeColor: 'none'\r\n    LineStyle: '-'\r\n        Faces: [9×5 double]\r\n     Vertices: [45×2 double]\r\n\r\n  Use GET to show all properties\r\n\r\n<\/pre>\"\" 
For us, the key properties are Vertices<\/tt>, Faces<\/tt>, and FaceVertexCData<\/tt>. The Vertices<\/tt> property is 45x2, indicating that the patch has 45 vertices. Here they are:<\/p>
hold on<\/span>\r\nplot(p.Vertices(:,1),p.Vertices(:,2),'*'<\/span>)\r\nhold off<\/span>\r\n<\/pre>\"\" 
The Faces<\/tt> property is 9x5, indicating that there are 9 faces, each of which connects 5 vertices. Here is the second row of the Faces<\/tt> property:<\/p>
face2 = p.Faces(2,:)\r\n<\/pre>
\r\nface2 =\r\n\r\n     6     7     8     9    10\r\n\r\n<\/pre>
These are indices into the Vertices<\/tt> property. Below, I'll use the Faces<\/tt> and Vertices<\/tt> properties to draw a black line around the second face.<\/p>
x = p.Vertices(face2,1);\r\ny = p.Vertices(face2,2);\r\nhold on<\/span>\r\nplot(x,y,'k'<\/span>,'LineWidth'<\/span>,3)\r\nhold off<\/span>\r\n<\/pre>\"\" 
The FaceVertexCData<\/tt> property controls the color of each face. Note that each face has a constant color because the FaceColor<\/tt> property is 'flat'<\/tt>.<\/p>
p.FaceVertexCData\r\n<\/pre>
\r\nans =\r\n\r\n         0    0.4470    0.7410\r\n    0.8500    0.3250    0.0980\r\n    0.9290    0.6940    0.1250\r\n    0.4940    0.1840    0.5560\r\n    0.4660    0.6740    0.1880\r\n    0.3010    0.7450    0.9330\r\n    0.6350    0.0780    0.1840\r\n       NaN       NaN       NaN\r\n       NaN       NaN       NaN\r\n\r\n<\/pre>
If we change the numbers on the second row of the FaceVertexCData<\/tt> property, then the color of the second face will change.<\/p>
p.FaceVertexCData(2,:) = [1 1 0];\r\n<\/pre>\"\" 
Another application of colorSwatches<\/tt> is to draw a color ramp. For example, we can visualize the parula colormap by using a single row of color swatches, setting the gap between each swatch to 0, and controlling the data aspect ratio to make it look like a long, thin bar.<\/p>
parula_colors = parula(256);\r\ngap = 0;\r\ncolorSwatches(parula_colors,gap,[1 256])\r\ndaspect([30 1 1])\r\naxis off<\/span>\r\n<\/pre>\"\" 
One final note: when I wrote colorSwatches<\/tt>, I didn't want it to have any side effects on the axes properties, and that's why I didn't write it to automatically set the axes DataAspectRatio<\/tt>. I do think, though, that having color swatches that are actually square is sufficiently common to write a function for it, so I have added squareColorSwatches<\/tt> to MATLAB Color Tools<\/i><\/a>. Here it is in action:<\/p>
squareColorSwatches(c,[3 3])\r\n<\/pre>\"\"