Barthélémy Pedotti
turns into colors

Colors, a few landmarks

Blendings show that three "primaries" stand amongst the colors, which gave the idea to put a bit of order in all that!


ie. Chromaticity diagram: blue to red curve represents pure colors (full saturation), each point of the curve standing for one wavelenght color; bottom right, the purples line, virtual blending of extreme reds & blues. Dark colors are out of range.

Back to our 3 primaries (see Blendings); we're on screen, we consider then the RGB blending;
mix Red, Green & Blue two by two, you get the secondaries Cyan, Magenta & Yellow, mix again neighboring colors and each blending with white & black, you just made ...a painter palette!

Here is an example; Red, Green & Blue range from 0 to 255 and to get the palette it would be enough to increase/decrease the values regularly by using the same offset, but some problems occur, we then have to tweak the progression to get even brightnesses.

An Example with same offsets; primaries have darker gradients, secondaries are lighter.

Colors Sphere is another convenient way to organize the colors; it is also parted into 12 sectors (primaries + secondaries + tertiaries), pure colors (saturated) circling the equator, white and black at the poles. Left and right, chromatic circles as "slices".

One can thus browse through these circles (right, black curves) and get, for example, warm to cold hues gradients like here.

Screens pixel is composed of 3 tiny lights R, G & B*, from off to fully on, intensity spread over 256 steps: 0 = black, 255 = full color, giving a 16.777.216 hues (so called 24 bits) enough for a photo - especially as we can hardly distinguish the fourth part of the sixteen.
Nevertherless it is the minimum needed (even though we need a photo bigger than 4000 x 4000 pixels to have at least 1 pixel per hue), because gradients, as an example, need lots of colors to be smoothed.

Top picture is the original, containing 68254 colors, the contrasted image (contrast is a way to unsmooth gradients) has 13832, 5 times less (out of 390000 pixels for each 1000x390 image). Computing true for the working pictures, not the stamps you see on the page, because of the resizing process.

* OK, if you want the plain truth, most pixels are composed of 4 lights (2 green lights) because it's a wavelenght zone with many a hues - see Colors Spectrum

Time to summarize the three parameters characterizing a color:
  - Hue: the color per se (yellow, green, etc.)
  - Saturation: the purity of the color
  - Luminosity: the brightness or darkness of the color

On top the conventional tool to set these parameters, with a big square on the left for luminosity and saturation and in the middle a "rainbow" cursor for the hue - of course one can use the sliders alone (right side) but it is a bit counterintuitive!

Another tool getting straight to the point... it is possible to set only one component though (red, green or blue)

  • Page Top
  • Crédits:

  • graphics: Bathy PEDOTTI - ex Studio PiRAKI
  • webmaster:

  • CSS Pages (no javascript!) thanks to:
    - Eric, the "w3schools" and to all masters of CSS!