How to customize Confluence Data Center editor's color palette

Purpose

In some cases, you might like to change or edit the default Confluence editor's text color palette. Be it by limiting to certain colors only, or maybe add additional custom colors. This is how it looks like by default:

There is no simple configuration to change this, but it is still can be implemented by following the steps below.

Solution

1. Edit the following files

   For Confluence 4.x

   1  <confluence-install>/confluence/WEB-INF/classes/com/atlassian/confluence/setup/atlassian-bundled-plugins.zip/atlassian-editor-plugin-x.x.jar/templates/color-picker.vm

   For Confluence 5.x

   1  <confluence-install>/confluence/WEB-INF/atlassian-bundled-plugins.zip/atlassian-editor-x.x.jar/templates/color-picker.vm

2. You might either use a decent archiving tools that can auto update the ZIP/JAR files upon modification (e.g. WinRAR, 7zip in Windows, or GNOME Archiver tool in Linux), or follow How to edit files in Confluence JAR files

3. Modify these lines:

   1 2 3 4 5 #set ($colors = ['000000','993300','333300','003300','003366','000080','333399','333333', '800000','FF6600','808000','008000','008080','0000FF','666699','808080', 'FF0000','FF9900','99CC00','339966','33CCCC','3366FF','800080','999999', 'FF00FF','FFCC00','FFFF00','00FF00','00FFFF','00CCFF','993366','C0C0C0', 'FF99CC','FFCC99','FFFF99','CCFFCC','CCFFFF','99CCFF','CC99FF','FFFFFF'])
   This site http://www.colorpicker.com/ can be handy in getting the hex color code you are looking for.

4. For example, this change:

   1 2 #set ($colors = ['000000','993300','333300','003300','003366','000080','333399','333333', '817339','827B60','C9C299','C8B560','ECD672','FFE87C','ECE5B6','FFF8C6'])

   will change the colour picker to be like this:

   

5. Save it.

6. Clear Confluence plugins cache

1. Edit the following file

   For Confluence 5.7 and Above

   1  <confluence-install>/confluence/WEB-INF/atlassian-bundled-plugins/atlassian-editor-x.x.jar/templates/color-picker.soy 

   For Confluence 8.x

   1 <confluence-install>/confluence/WEB-INF/atlassian-bundled-plugins/com.atlassian.plugins.atlassian-editor-x.x.jar/templates/color-picker.soy 

2. Locate the following block:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 {let $colors: [ [ 'hex' : '000000', 'name' : getText('tinymce.colorpicker.black') ], [ 'hex' : '993300', 'name' : getText('tinymce.colorpicker.burntOrange') ], [ 'hex' : '333300', 'name' : getText('tinymce.colorpicker.darkOlive') ], [ 'hex' : '003300', 'name' : getText('tinymce.colorpicker.darkGreen') ], [ 'hex' : '003366', 'name' : getText('tinymce.colorpicker.darkAzure') ], [ 'hex' : '000080', 'name' : getText('tinymce.colorpicker.navyBlue') ], [ 'hex' : '333399', 'name' : getText('tinymce.colorpicker.indigo') ], [ 'hex' : '333333', 'name' : getText('tinymce.colorpicker.veryDarkGray') ], [ 'hex' : '800000', 'name' : getText('tinymce.colorpicker.maroon') ], [ 'hex' : 'FF6600', 'name' : getText('tinymce.colorpicker.orange') ], [ 'hex' : '808000', 'name' : getText('tinymce.colorpicker.olive') ], [ 'hex' : '008000', 'name' : getText('tinymce.colorpicker.green') ], [ 'hex' : '008080', 'name' : getText('tinymce.colorpicker.teal') ], [ 'hex' : '0000FF', 'name' : getText('tinymce.colorpicker.blue') ], [ 'hex' : '666699', 'name' : getText('tinymce.colorpicker.grayishBlue') ], [ 'hex' : '7A869A', 'name' : getText('tinymce.colorpicker.gray') ], [ 'hex' : 'FF0000', 'name' : getText('tinymce.colorpicker.red') ], [ 'hex' : 'FF9900', 'name' : getText('tinymce.colorpicker.amber') ], [ 'hex' : '99CC00', 'name' : getText('tinymce.colorpicker.yellowGreen') ], [ 'hex' : '339966', 'name' : getText('tinymce.colorpicker.seaGreen') ], [ 'hex' : '33CCCC', 'name' : getText('tinymce.colorpicker.turquoise') ], [ 'hex' : '3366FF', 'name' : getText('tinymce.colorpicker.royalBlue') ], [ 'hex' : '800080', 'name' : getText('tinymce.colorpicker.purple') ], [ 'hex' : 'A5ADBA', 'name' : getText('tinymce.colorpicker.mediumGray') ], [ 'hex' : 'FF00FF', 'name' : getText('tinymce.colorpicker.magenta') ], [ 'hex' : 'FFCC00', 'name' : getText('tinymce.colorpicker.gold') ], [ 'hex' : 'FFFF00', 'name' : getText('tinymce.colorpicker.yellow') ], [ 'hex' : '00FF00', 'name' : getText('tinymce.colorpicker.lime') ], [ 'hex' : '00FFFF', 'name' : getText('tinymce.colorpicker.aqua') ], [ 'hex' : '00CCFF', 'name' : getText('tinymce.colorpicker.skyBlue') ], [ 'hex' : '993366', 'name' : getText('tinymce.colorpicker.redViolet') ], [ 'hex' : 'C1C7D0', 'name' : getText('tinymce.colorpicker.lightGray') ], [ 'hex' : 'FF99CC', 'name' : getText('tinymce.colorpicker.pink') ], [ 'hex' : 'FFCC99', 'name' : getText('tinymce.colorpicker.peach') ], [ 'hex' : 'FFFF99', 'name' : getText('tinymce.colorpicker.lightYellow') ], [ 'hex' : 'CCFFCC', 'name' : getText('tinymce.colorpicker.paleGreen') ], [ 'hex' : 'CCFFFF', 'name' : getText('tinymce.colorpicker.paleCyan') ], [ 'hex' : '99CCFF', 'name' : getText('tinymce.colorpicker.lightSkyBlue') ], [ 'hex' : 'CC99FF', 'name' : getText('tinymce.colorpicker.plum') ], [ 'hex' : 'FFFFFF', 'name' : getText('tinymce.colorpicker.white') ] ] /}

3. You can add and remove colours from the above array. For example if you would like to add skyBlue, just add the following into the above array.

   1 [ 'hex' : '0770e3', 'name' : getText('tinymce.colorpicker.skyBlue') ] 

   1. Please note that not all colours has their labels defined in tinymce.colorpicker . As such, to ensure that the colours would display with the correct labels you can instead add the colour into the array with this format

      1 [ 'hex' : '0770e3', 'name' : 'skyBlue'] 

4. Save it.

5. Clear Confluence plugins cache