2-15-2024: Picking up colors from raster images
Picking up colors from raster images
This post about color picking, with eyedroppers or color picking tools. Raster images are just images in forms of arrays of pixels as manipulated by computer programs. The post is also about saying that eyedroppers can help color blind people, but, more generally, they can help every one. It is also about color mixing and color coding by using color coordinates in different color spaces.A color picker can help the color blind
I have been exposed to the question of color analysis being color blind -as a color blind person-. Color Blindness, is in fact relatively common, talking about the difficulty of naming colors with a clear and universal name. The daily experience is usually to elaborate about the name of a color, especially when the color is not saturated (I trained myself recently about coolness, warmness, saturation and neutrality of tints and tones of colors). Artistic clubs frequently produce lots of people disserting about colors and their names (purple, pink, violet, red violet, blue violet, plum, berry, and so on, whatever…).
Color Blindness is a call for the topic and people want to know what the other see(s). My Color Blindness is about the special composition of my eye cells, rods and cones, the cells that help to identify colors. The funny side is that people love colors, usually, but, not two individuals perceive colors exactly in the same way for the reason that the characteristics of these cells differ from one individual to the other. However, an average seems to emerge and everybody knows what is “a” yellow, or in fact, everybody knows that a lemon is yellow, a plum, plum, ahah, a watermelon, red-60…
Personally, I am not very comfortable with the exercise of mixing colors, especially from a scratch primary Red, Yellow, Blue set of colors. Thus, I am not very comfortable either with copying a color picked up from another external input (painting, picture, …). I mean it’s easy to pick up and use with a computer, but it’s not easy to reproduce a color from a painting or a drawing.
Nor, I am a theory specialist of colors for the reasons mentioned above. My recent intention, described in these notes, was to do the exercise of creating a palette with the help of the computer. Two major reasons are: 1. I have not been with a lot of money and I have felt that a digital work could save some money -so, to exercise playing or mixing colors from a fine art point of view-; 2. The computer has pushed color workers to rationalize colors and involve some kind of theory that has ended with equations and conversion equations between different approaches (RGB, CMYK, HSL, …) avoiding or at least, minimizing confusion among different viewpoints. Thus, the latter is interesting for the color blind person because the exercise of approaching a certain shade is instead an exercise to approach a certain code number (given by a color picker, for instance).
Below, I try to explain why approaching a color following an artistic method, or miming an artistic method , like artists do, is useful. I realize that I use the word “artist” , but, I am not an artist myself. However, I know how grandPa can do with his color tubes and brushes, mixing and ending up with a desired tint.
GrandPa might end up with something similar to the palette shown below.
Marc Chagall, palette at the Metropolitan Museum of Art (MET): https://www.metmuseum.org/art/collection/search/493731
Color pickers and eyedroppers
These tools are usually present in digital art-related apps (or softs). The very “pro” is that it is very common and easy to get the color of somewhere on a digital image. This type of tool, in fact, returns the attribute of a pixel (one pixel), called color, that can be a name or a code (example, RGB).
That is very useful for the color blind.
The picture editing apps, and the users, do not use necessarily the same codes to manipulate colors:
The very common color code in terms of RGB for Red, Green, Blue is the more generally used by computer users; values are between 0 to 255, they can be scaled between 0 to 100;
A more convenient fine artist way of coding colors is in terms of HSL, Hue, Saturation and Light; Hue is defined between 0॰ -red, usually said warm (?)- to 360॰ -blue, usually said cold- and Saturation and Light between 0 to 100% -the MS paint app scales values between 0 to 240-;
A variant of the HSL is HSV (V for value) or HSB (B for Brightness), LCh, C for Chroma. RGB code can eventually be coded as a word (hexadecimal value);
A combination of RGB and HSL can be convenient -RGB in terms of a basic set of colors and their resulting combination in terms of Hue (warm and cool), saturation and light (tints with more white, tones with more gray)-;
CMYK (Cyan, Magenta, Yellow, Black) is also used;
CIE 1931 has been defined as a basis for an international colorimetric system
Even if you are not very experienced, you may have your own way to navigate a color system. My method is to use the 6 values (R,G,B,H,S,L).
This way of doing allows to work in the RGB color system as well as being able to undertake artistic treatments.
For instance, just add some light (L defined from 0 black to 100 white) to tune to tints (more white), shades (more black) or tones (more gray) in the color space using HSL (a 50% light fits a saturated color).
Note: Another way to shade an RGB color is also to reduce the values; increasing the values (when some margin is still available) changes the tint.
In my area color picking method, described further, I use a color system based on the primary colors Red, Yellow, Blue defined as:
Red: (RGB,HSL) =(255,0,0, 0॰,100,50)
Yellow: (RGB,HSL) =(255,255,0, 60॰,100,50)
Blue: (RGB,HSL) =(0,0,255, 240॰,100,50)
It can be seen as a subset of the 6 possibilities seen on the wheel below:
Examples of color codes usage:
Gimp (an open source picture editor): uses a set of RGB, LCh (or HSV). Below a fully saturated Red, matching (RGB,HSL)=(255,0,0,0,100,50);
Krita (a free and open source painting program): uses RGB and HSL. A fully saturated red is shown by the settings on the snip(s) below;
MS Windows Paint (a usually available app under Windows) uses RGB and HSL; HSL scaled from 0 to 240 for the three H, S and L. The snip below shows the settings for a fully saturated red;
MS Windows Paint 3D (sometimes available app under Windows) uses RGB color code;
RawTherapee (a free open source raw photo processing system) uses RGB (0 to 100%), HSV, Lab;
(“The Lab color space, also known as CIELAB, is a three-axis color system that expresses color as three values: L: For perceptual lightness, with values ranging from 0 to 100, a: For the greenness-to-redness value, with values ranging from -128 to +127, b: For the blueness-to-yellowness value, with values ranging from -128 to +127”);
Inkscape (a free drawing software) uses RGB, HSL and CMYK color spaces as shown on the snip below (set for a saturated red);
Blender (a free animated films creation software) uses RGB set between 0 to 1, or HSV color spaces; A saturated red is set in the snapshot below:
Color picking subregions
Introduction
I needed recently to figure out about zones and regions and I questioned and developed myself about what I can do in the domain of picking a subregion of a picture and having an idea of the overall shade of the area.
Perhaps, I am not the only one to have the concern. Nonetheless, I have found a website relating the topic of the colors or set of colors -palette- to any human trait, like the mood -artists say-. For instance, the following link illustrates how colors can be extracted from a -digital- material and result in some kind of analysis about moods:
https://digitalsynopsis.com/design/cinema-palettes-famous-movie-colors/
I give an example of what I have done. I have used a raster image editor, or say, an image editor app, of the type of the ones being used to display and edit picture files of format jpeg or png (paint or paint 3D app for instance).
paint displays images in terms of arrays of pixels on the screen (also seen as an array of pixels). At this point, I have figured out that a pixel of an image does not necessarily match a pixel of the screen. In fact, other factors are involved (zoom factor of/in the app itself -when I manipulate the image-, zoom factor between the app and the device environment -configuration of the desktop-, and finally zoom factor between the device environment and the screen).
By the way, paint clearly tells at what scale the user works within the paint context, and within the image frame of reference itself.
I show below an example of paint displaying a picture of 10 pixels longitudinally by 10 pixels vertically. This simple array (black and white and gray) is shown at a zoom factor of 800% -in paint- (as specified at the right bottom corner of the app interface).
There is also the scaling of the snip to this blog paragraph as it is shown below.
Just to mention that I have improved my skill in paint, for using it to know the overall tint of a subregion of a picture; I can now use the following capabilities:
I know how to open and display an image in jpeg or png format; I can also save in jpeg or png format; I know that the pictures are defined at 96dpi (dots per inch); I can see the difference between the two formats (jpeg and png), in terms of storage size (using windows functionalities) and image quality;
I can select an area or a subregion using a rectangle or a lasso, that I can cut or copy to another “canvas” in another app window, or somewhere else on the same “canvas”;
I know how to resize the picture, meaning change longitudinal and vertical number of pixels;
I know the tools “pencil” and “Fill with color”; I know the difference between the “pencil” tool and the “natural pencil” (brushes) tool and how to use them; I know how to change the stroke width of the pencil or the natural pencil;
I know the different “brushes” and the differences of their attributes aspects and strokes options;
I know how to add a shape and how to set the foreground color (the outline) and the background color (second color) and fill the shape;
I know how to edit colors and how to set new values, HSL or RGB;
I have figured out that paint uses a scale between 0 to 240 for HSL code values; I know how to rescale to standard values (H=Hpaint x 360/240; S=Spaint x 100/240; L=Lpaint x 100/240);
I know how to add a new color to the palette after editing (Custom Colors>Select a cell, set color code values, add to custom colors, OK)
Pixel-averaging mixing method
The idea of this method is to use the capability of the software (presently, MS Paint) to average properties of a subregion of pixels to one pixel.
The method uses the resize option in MS Paint (Image>Resize>Toggle “pixels”>Unselect “Maintain aspect ratio”)
Thus, from any picture size, downsize to 1 pixel by 1 pixel. Doing this action, allows to average pixels attributes, in our case, color attribute, onto the resulting pixel;
This second step can be used to resize the pixel at a bigger size (for instance, 50x50 or 100x100 pixels);
In the example below, the yellow background sprayed with indigo should result in a green average, right?
Example
Getting information at a third party website (https://icolorpalette.com/color/d5cc2c) leads to the following, converted onto the different color spaces:
“icolorpalette” website says (213, 204, 44, 57⁰, 66.7%, 50.4%) is a led green (similar).
Color Mixing: some RGB algebra
This section is about the maths used behind the step-by-step of the previous paragraph. Steps forward are, how to be more predictive about the resulting color of the mix?
Color of a compound area
This paragraph explains how to compute the average color (on the right, below) of the compound area (on the left, below) -six regions of different colors-.
As a preliminary step, I show below a plot to illustrate how the step by step method fits perfectly with the derived math that are presented after:
On the X-axis, step-by-step value, a longitudinal coordinate is derived from a number depending on the RGB value of the resulting average color (in fact, a conversion of the hexadecimal value to decimal value, rescaled for the plot) after the step-by-step;
On the Y-axis, computed value, the resulting RGB code, converted to a decimal value, result of some weight averaging based on the area covered by each color;
In addition, the different dots correspond to different cases (number of areas and surface area)
Math for the six regions compound area, presented at the beginning of the section, and shown again below:
In MS Paint, I identify surface size, width by height, in pixels, using a rectangular selection box and the resulting width and height at the bottom of the window;
The color picker can help to obtain the color code of each zone;
The results are presented in the next table, screenshot of a google sheet, (first set of HSL are standard MS Paint values scaled between 0 to 240).
Notes:
I have found out that the area-weighted average method works with the RGB codes. HSL color codes can be tricky to manipulate. For instance, certain types of reds have big Hue value and some others have small Hue values, but both can have close Red codes (RGB) or values. For example, a hue red of 350⁰ and a hue red of 5⁰ or 10⁰, have an average of 180⁰ which is not a hue red. However, they will average correctly in the RGB space, Red of 242 and Red of 0 result in an average of 121, still in RGB space, still a Red -a Red 121 may be difficult to see red, but adding some light, rebalance the red in the visible (it is also rebalancing to higher value of red)-. This example gives sense to an RGB algebra.
Conversion formulas from RGB to HSL, of HSL to RGB are implemented in the google sheet, above, based on the wikipedia article: https://en.wikipedia.org/wiki/HSL_and_HSV/
On the screenshot above, line 88 is for the “One pixel” method;
Line 89 shows the results of the area-weighted average method;
Column P (resp, col Q, col R), line 89 formula (red average, resp. green average, blue average):
=ROUND((C82*P82+C83*P83+C84*P84+C85*P85+C87*P87+C86*P86)/C88)
The formula above is an implementation of:
For the six regions compound, the one pixel method and the area-weighting average give same average value HSLMSPaint= (35,118,124) for the use of MSPaint.
Proportions on a basis of colors: example of a simple HSL,RGB palette
Keeping on the idea of the primary RYB basic set, I now want to match a color with the RYB in certain proportions.
In the following, I carry out the exercise manually, using MS Paint, following the “one” pixel averaging procedure (to get the average value of the color of the area that I have covered), iteratively, changing areas of Red, Yellow or Blue.
I initiated the process with small areas, and, gradually, the weight of each area converges to a certain proportion in regard to the overall area.
Example
In this example, the target color is defined below in terms of (HSL,RGB) values:
Target: (HSL,RGB) = (55.5⁰, 17.1%, 56.7%, 164, 161, 126)
I show three ways of coloring the overall surface:
The first way of coloring was to find the closest proportion of Blue and Red, the proportion of Green depending on both Yellow and Red. Also, a certain proportion of black is needed to lower the values of RGB at the same time, and adding a certain color changes the proportions as well.
Increasing the Yellow area, gets both the Green and the Red values of the overall bigger.
Increasing the Blue or Red areas, gets the Blue or the Red bigger.
The snapshot below shows the resulting proportions of Red, Yellow, Blue and Black (on the left). On the right the squared area is the result and above the target (very close, visually speaking, at least for me).
Result: (HSL,RGB) = (60.0⁰, 17.9%, 67.9%, 164, 164, 124)
Comment: Referring to the color wheel earlier in this article, it might be possible to reduce the Hue (60.0⁰ to 55.5⁰) a little further by adding more red. However, it would not be enough because the proportion of red (RGB) is already on target. In parallel, it would be necessary to add an additional band with some blue, to increase a little bit the proportion of blue, black to reduce the light, and the overall RGB, a little of red to rebalance on the red (what is lost by adding some black), and the rest of yellow.
This second way is a hatching, similar to the method used for the Van Gogh Shoes (next paragraph). The first way (above) is very helpful to figure out the sizes of the different areas. This second method is not iterative at all, or less.
Result: (HSL,RGB) = (60⁰, 13.7%, 56.7%, 160, 160, 130)
This third way is another type of canvas preparation. This example has not been iterative. For the purpose of explaining, it is anticipated that the yellow area is too big (meaning too much Red and Green, at the same time). In this situation, the possible further steps are adding more black (to reduce the light) if possible on blue spots (to reduce the proportion of blue).
To mention that the overall Hue is not dependant a lot on the proportions used. Also, in the Van Gogh Shoes the Hue is basically the same on the overall picture.
Here, the result: (HSL,RGB) = (60⁰, 30.4%, 68%, 198, 198, 148)
How to use the weight-averaging formulas?
Example 1
I presented the math equivalence to the “one pixel” method for averaging in the previous paragraph.
In this paragraph, I have matched the surface areas of components Red, Yellow, and Blue, results of the previous manual iteration, by an iterative procedure using the weight-averaged formula.
Iteratively, the weights of the components are determined to match a desired mix. For instance, I have matched the mix of the part about the first way of coloring of the previous paragraph.
I have used the iterative procedure to determine the weights of each color Red, Yellow and Blue. I find that the snip, on the left below, can be weighted by 0.5% of Red, 49.9% of Yellow, 35.0% of Blue and 14.6% of white. The amount of white is due to the non-uniform coating. In the new estimation, I have not used black to rebalance the underlying white.
On the right below, the schematic colored areas are shown.
The resulting mixes appear very close, RGB values are within 1% to 2%, the Hue value is within 5%, 57⁰ for 60⁰ (same saturation and light) -patches corresponding to each color code are shown-.
Left:
(HSL,RGB) = (60⁰, 18%, 57%, 164, 164, 124)
Right:
Van Gogh Shoes(HSL,RGB) = (57⁰, 18%, 57%, 166, 164, 127)
Example 2
Drill: How to create the palette below?
Tip: One or the other of the previous brown is used as a starting point. I changed the proportions of Red, Yellow and Blue, only by adding a new component of neutral dark red (0.00⁰, 50.00%, 33.33%,128,43,43), resulting in a (25⁰, 23%,48%,151,118,95), to the overall mix.
With the new component into account, the mix shown below is 0.3% of saturated red, 31% of saturated yellow, 22% of saturated blue, 10% of white, and 37.5% of dark red.
The background is a mathematical complementary of the mix (max-colori).
Van Gogh Shoes
Goals of the exercise: I wanted to start from a RYB primary set of colors as a starting point and make my own colors. The aim was to copy the colors of the Van Gogh Shoes.
I used the method described previously to have a rough idea of the palette to use and, in what proportions of Red, Yellow and Blue. Eventually, the same exercise can be reproduced in reality, and create the same colors based on the primary set Red, Yellow, Blue.
I guess real painters sometimes use a palette on the canvas, directly, (not on a palette). This is, in fact, what I tried to imitate..
Software: MS Paint, plus mouse
Tool: Natural Pencil of different widths (in MS Paint, tools are predefined with settings different than Paint 3D; it is worth to know that the natural pencil is predefined with a certain amount of transparency in MS Paint, transparency that the user can control further in Paint 3D).
Methodology:
After picking up color values on a few key regions of the original (lower part, upper part, shadow, inside the shoe, outside the shoe…), I have figured out that the overall palette has been tan and brown. The previous paragraph explains that these colors are mainly a mix of yellow and blue, shaded by a certain amount of black, with a touch of red eventually.
For my copy, I have started over the surface of the canvas with hatching of blue and yellow, mostly. The lower part has an additional hatch of red.
The picture at the beginning (I started to mix on the upper shoe, though) looks like the left snapshot of the next figure.
The idea is to mix the hatching, gradually, with neighbors and to spread the -new- colors. I used the eyedropper.
The method is, one, to pick up a color, second to spread over (it does not spread the color, strictly speaking, but a new coat with the new tint to the pre-existing background where the pencil is applied) . Coating after coating the color mixes.
Remember that the natural pencil tool allows me to do that because it (the tool) is designed (in terms of computer program) with a certain amount of transparency.
Illustrations:
In the figure below, the last state of the copy, achieved so far (at the time of writing these notes) is shown by the right snapshot.
The starting point is shown on the left. Hatching put over all the surface of the canvas.
Above: first version and last version (so far…).
Below, comparison of the last version of the copy achieved (left), with the original Van Gogh Shoes picture (both sizes 1200 by 1000 pixels) -right-.
The reader can be able to see that the actual version is very good, remembering the goal of the exercise (starting over from a scratch of primary colors), and spreading the color gradually;
Of course, discrepancy is still seen (not only in unmixed regions (where hatching is still seen), but also in mixed region);
The mixed regions can be improved by picking up colors in the most advanced parts, or more converged and applying in less converged parts;
The overall impression is still a yellow dominant (too bright, maybe);
Perhaps, at this standpoint, it is worth to pixellized at a broader definition to get the average impression given by subregions (next illustration);
Below, pixellized version on a 36 by 30 “pixels” canvas (of the original canvas of 1200 by 1000 pixels) helping to identify converged subregions and less converged. As expected the upper part, where I put more effort and time, looks more converged.
Conclusion
Color blind people can play with colors as well. The help of electronic devices and the use of mathematical coordinates in the different color spaces can help to reconverge with non-color blind people.
This comment has been removed by the author.
ReplyDeleteLink to the article on the website:
ReplyDeletehttps://sites.google.com/view/artgraphic-db/in-work/technical-notes