TIP JQAutoColorContrib is not installed on Foswiki.org.


Assign colors automatically based on text properties


Sometimes assigning colors manually is a tendious task. How about assigning colors to various elements on a web page automatically based on the text content? This is exactly what this javascript plugin does: you select an element and a source of text, which will then be mapped onto a color that is assigned to a css property of the target element. The kind of color may be parametrized using a range of saturations, lightness and hues. The source text is then hashed and mapped to a matching color.


Colored text box

Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima? Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius! Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Colored circles


Color icons




Color boxes



Radial Me


This is a pure javascript extension. So you need to use JQREQUIRE to load the library to a page where you want to use it. Then add the css class jqAutoColor to an HTML element, e.g.

<div class="jqAutoColor" data-saturation='...' data-lightness='...' ... >

Use HTML5 data parameters to specify parameters to the autoColor plugin. All parameters are optional.

Parameter Description Default
source jQuery selector of an element to extract text data from current element
target jQuery selector of the element to colorize current element
text string to derive a color from text content of the target element
seed additional string to be appended to the source text to seed the hash process when computing a color hue 0
property css property to apply the generated color to; if left undefined the background color will be changed while also setting the forground color to a matching value: dark or light based on the darkness of the background tint; if set to radial-gradient generate a two-color background gradient using the shift-color parameter to compute the second color background
dark whill be used to select a matching foreground color when the css property is left undefined #222
light whill be used to select a matching foreground color when the css property is left undefined #fff
hue-from hue range start which to select colors from 0
hue-to hue range end which to select colors from 359
saturation string or array of saturation values [50,65,80]
lightness string or array of lightness values [50,65,80]
shift-color array of rgb values to create a secondary color based on the first in gradient backgrounds [-10,-10,-20]

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)
cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.



Change History

04 May 2022 fix setting properties other than the background
18 Nov 2019 implement auto-generated gradient backgrounds
01 Jul 2019 skip auto-color if text is empty
28 Mar 2018 initial release

PackageForm edit

Author Michael Daum
Version 2.01
Release 04 May 2022
Description Assign colors automatically based on text properties
Copyright 2018-2022, Michael Daum, All Rights Reserved
License GPL (GNU General Public License)
Home https://foswiki.org/Extensions/JQAutoColorContrib
Support https://foswiki.org/Support/JQAutoColorContrib
Repository https://github.com/foswiki/JQAutoColorContrib
ExtensionClassification Interface and Visualisation
ExtensionType ContribPackage
ImageUrl example1.png
DemoUrl http://
SupportUrl JQAutoColorContrib
ModificationPolicy CoordinateWithAuthor
I Attachment Action Size Date Who Comment
JQAutoColorContrib.md5md5 JQAutoColorContrib.md5 manage 177 bytes 04 May 2022 - 16:24 MichaelDaum  
JQAutoColorContrib.sha1sha1 JQAutoColorContrib.sha1 manage 201 bytes 04 May 2022 - 16:24 MichaelDaum  
JQAutoColorContrib.tgztgz JQAutoColorContrib.tgz manage 79 K 04 May 2022 - 16:24 MichaelDaum  
JQAutoColorContrib.zipzip JQAutoColorContrib.zip manage 85 K 04 May 2022 - 16:24 MichaelDaum  
JQAutoColorContrib_installerEXT JQAutoColorContrib_installer manage 5 K 04 May 2022 - 16:24 MichaelDaum  
example1.pngpng example1.png manage 40 K 04 May 2022 - 16:23 MichaelDaum  
example2.pngpng example2.png manage 29 K 04 May 2022 - 16:24 MichaelDaum  
Topic revision: r4 - 04 May 2022, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy