Colour Picker element

Jun 28, 2013
Colour Picker element

  • Form example (top)

    [​IMG]

    Click on the large coloured square to open up the colour picker window.
    Use the sliders to create the colour, or click on the small palette colours to automatically load a colour.


    Administration settings (top)

    There are no admin settings for this plug-in.

    As of 14th July 2011 there is the following option:

    • swatch - Allows you to select a swatch file to load up the preselectable colours. The rainbow swatch as shown in the image above is default.js.
    The format for the swatch file is json. Its an array, where each line of the array represents a line in the swatch output.

    The each swatch line is an object whose keys are the rgb colour and whose labels represent the colour name (leave blank not to show a colour name)

    Code (Javascript):

    [{"80,78,108":"indigo","128,141,181":"midnight","0,125,220":"cobalt","33,109,197":"allure","164,205,247":"bliss","84,100,131":"monsoon","160,197,207":"atlantic","81,133,133":"deep_end","111,182,164":"sea","160,231,213":"lagoon","177,229,237":"surf","211,239,205":"aloe","149,224,88":"lawn"},{"154,176,78":"marsh","181,179,105":"moss","249,243,204":"glow","230,218,169":"khaki","236,233,212":"oat","243,221,181":"ivory","231,215,187":"sable","192,165,122":"bark","151,91,49":"root","238,178,151":"blush","248,220,203":"powder_puff","220,215,199":"pewter","166,163,149":"noir"},{"221,221,220":"titanium","211,207,200":"thunder","224,224,215":"ash","214,230,230":"tide","218,226,226":"pond","212,231,224":"reef","255,255,255":"vapor","254,253,253":"ghost","255,255,255":"white_out","242,237,86":"marigold","240,228,137":"camel","255,191,74":"vitamin_c","232,139,0":"curry"},{"244,147,33":"oj","239,160,90":"rosé","232,86,10":"persimmon","255,136,72":"mai_tai","255,20,33":"cranberry","230,15,106":"diva","255,146,199":"sassy","162,28,49":"pomegranate","119,34,58":"black_cherry","131,66,120":"bewitched","208,167,161":"eggplant","205,190,189":"concord","193,177,213":"violet"}]