Custom Colour Picker in Visualforce

I recently needed to allow a user to choose the background colours for a number of elements that would  appear on a Visualforce page.  Initially I had the user entering the hex colour string into an inputtext and showing a preview on the lower half of the page, but this became unusable once I had more than five or six inputs, so I started hunting for a simple colour picker.

After a short amount of google, I stumbled on JSColor, which is very straightforward to integrate, as you just include the javascript into your page and add the "color" class to any input that you want the color picker to fire from.

First up, I downloaded the JSColor zip file and uploaded as a static resource named 'jscolor_1_4_0'.  For the purposes of this blog post I then created a simple custom object named 'Coloured_Text' with four fields - 'Field_1' and 'Field_2' contained the text to be displayed, while 'Colour_1' and 'Colour_2' defined the colour that the associated text should be displayed in.


I then put together a simple edit/create page for the Coloured_Text custom object:

<apex:page standardcontroller="Coloured_Text__c">
<apex:includeScript value="{!URLFOR($Resource.jscolor_1_4_0, 'jscolor/jscolor.js')}" />
<apex:form >
  <apex:pageBlock title="Colour Picker Edit">
     <apex:pageBlockButtons >
       <apex:commandButton value="Save" action="{!save}" />
       <apex:commandButton value="Cancel" action="{!cancel}" />
     </apex:pageBlockButtons>
     <apex:pageBlockSection >
       <apex:inputField value="{!Coloured_Text__c.Name}" />
       <apex:pageBlockSectionItem />
       <apex:inputField value="{!Coloured_Text__c.Field_1__c}" />
       <apex:inputField styleClass="color" value="{!Coloured_Text__c.Colour_1__c}" />
       <apex:inputField value="{!Coloured_Text__c.Field_2__c}" />
       <apex:inputField styleClass="color" value="{!Coloured_Text__c.Colour_2__c}" />
    </apex:pageBlockSection>
  </apex:pageBlock>
</apex:form>
</apex:page>

The colour picker is added to the input fields via the "styleClass" attribute in the '<apex:inputField styleClass="color" value="{!Coloured_Text__c.Colour_2__c}" />' components.


After overriding the New and Edit buttons for the custom object, clicking the new button gave me the following page:

I then created the view override visualforce page:

<apex:page standardcontroller="Coloured_Text__c">
<apex:includeScript value="{!URLFOR($Resource.jscolor_1_4_0, 'jscolor/jscolor.js')}" />
  <apex:pageBlock title="Colour Picker View">
     <apex:pageBlockSection >
        <apex:outputField value="{!Coloured_Text__c.Name}" />
       <apex:pageBlockSectionItem />
       <apex:pageBlockSectionItem >
         <apex:outputLabel value="Field 1" />
         <apex:outputText style="color: #{!Coloured_Text__c.Colour_1__c}" value="{!Coloured_Text__c.Field_1__c}" />
       </apex:pageBlockSectionItem>
       <apex:pageBlockSectionItem >
         <apex:outputLabel value="Field 2" />
         <apex:outputText style="color: #{!Coloured_Text__c.Colour_2__c}" value="{!Coloured_Text__c.Field_2__c}" />
       </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
  </apex:pageBlock>
</apex:page>

The chosen colours are applied to the text via the "<apex:outputText style="color: #{!Coloured_Text__c.Colour_2__c}" value="{!Coloured_Text__c.Field_2__c}" />" component. Viewing my 'Blog Test' record shows the text in the correct colours: