It is a good idea to first read the article titled: "Automatic colours" in this documentation.
|couleur_extraire
The |couleur_extraire (extract_colour) filter is applied to an image tag (logo, typographical image...) and returns the hexadecimal RGB value of a colour shown in the image.
Operational method:
The filter starts by resizing the original image into a 20 pixel by 20 pixel square, so that the extracted colour is representative of the colours that are actually in the image (while avoiding picking just a single isolated pixel).
It then returns the value of the colour of the pixel located slightly above the centre of the image (by default at the 10,6 coordinates).
It is possible to force the selection of a particular pixel, i.e. to tell the filter in which part of the original image it should select the average colour.
To do so, we pass the pixel coordinates as an argument to the filter like: |couleur_extraire{x, y} where "x,y" must identify a sample zone from 0,0 (top left corner) to 20,20 (bottom right corner).
Example:
Start with the original image below:
The filter creates a temporary reduced image:
Blown up this looks like:
Then select the specific pixel (respectively below: "0, 0" ; "10, 6" ; "10, 10" ; "20, 20"):
Finally, the filter will return the colorimetric value of that pixel.
In this example:
554839 for |couleur_extraire{0, 0} ;
aa8454 for |couleur_extraire (by default) ;
995c2c for |couleur_extraire{10, 10} ;
544738 for |couleur_extraire{20, 20}.
Warning: the filter returns the raw value of the colour; to use this is a CSS stylesheet, remember to precede this value with a # symbol.
|couleur_eclaircirand|couleur_foncer
In association with the |couleur_extraire filter, the |couleur_eclaircir (lighter_colour) and |couleur_foncer (darker_colour) filters are used to generate (monochrome) variants of colours so that the combination of the three appear highly coherent together.
Starting with the colour extracted from an image (let’s say, the logo of a section, for example):
The following 3 code extracts:
[(#LOGO_RUBRIQUE|couleur_extraire)]
[(#LOGO_RUBRIQUE|couleur_extraire|couleur_eclaircir)]
[(#LOGO_RUBRIQUE|couleur_extraire|couleur_foncer)]
will return:
