How do I create a custom colour palette script ?

Creating a custom colour palette

To create a new colour palette, start with the following script layout:

/** {"name":"My Custom Colour Palette"} */

api.register({ type: "palette", name: "Palette Name", items: [ ] });

Replace 'My Custom Colour Palette' with a name of your choosing. This will be the wording that appears in the script listing : -

mceclip0.png

Also, replace 'Palette Name' with your own choice of palette name.


After 'items' enter an array (a comma separated list within square brackets) of your chosen colours in hexadecimal format e.g. "#d62728".

e.g.

/** {"name":"Acme Palette"} */

api.register({ type: "palette", name: "Acme Colours", items: [ [ "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22" ] ] });

(To convert colour codes from RGB into HEX you can use a website translator e.g. http://www.convertacolor.com/.)


If you want to add multiple variations of a colour scheme (e.g. Acme 6 colours, 10 colours, 14 colours), simply add multiple arrays to items:

/** {"name":"Acme Palette"} */

api.register({ type: "palette", name: "Acme Colours", items: [ [ "#1f77b4", "#ff7f0e", "#2ca02c", ], [ "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", ] ] });

 

This generates one palette per colour array. By default, these are named in OrgVue as “Palette Name {length of colour array}” – e.g., using the above example, “Acme Colours 3” and “Acme Colours 6”.

 

Setting the Default Colour

If you would like to set a default colour then you should add these two lines into your custom colour palette script : -

 defaultItem: "Acme Colours",
defaultColor: 0xf4972e

like this : -

/** {"name":"Acme Palette"} */

api.register({
type: "palette",
name: "Acme Colours",
items: [
[0xf4972e, 0xfdc894, 0x4f81be, 0x9fb4dd, 0x627070, 0xa5a9aa, 0x82c4cd, 0xbfe0e5, 0x94b762, 0xc5d8aa, 0x88508b, 0xb99bbb]
],
defaultItem: "Acme Colours",
defaultColor: 0xf4972e
});

Then, in the Colour control in OrgVue you will see this : -

mceclip0.png

Clicking on the 'Default' box switches the default colour to your choice : -

mceclip1.png

 

Using OrgVue's Default Colour Palette

If you would prefer not to write your script from scratch you could use the standard OrgVue default colour palette script and adapt that to your needs. See how to do that here.

 

Registering the Colour Palette Script

Once you have finalised your script you are now ready to register it either at dataset or whole tenant level.

Have more questions? Submit a request

Comments