Craft Color Swatches Plugin

Trevor Davis, Former Front-End Development Technical Director

Article Categories: #Code, #Front-end Engineering, #Back-end Engineering, #Content Management

Posted on

Give clients a limited set of colors to choose from instead of every possible color.

The control that Craft can provide a user is what makes it stand out as a content management system. But sometimes we want to limit what a user can choose from. Craft has a built-in Color field which allows a user to select any color from a color picker. There are times when we only want a user to choose from a select number of colors though. Previously we have done this by using a dropdown with a list of colors, but I decided to build a plugin to allow a user to select from an admin-defined set of colors.

To configure, an admin just needs to define a list of labels and colors in the field settings.

Then, when a user is adding or editing an entry, they are presented with color swatches to choose a color instead of entire color picker.

On the template side, you can access both the selected label and the color, depending on what you need to do. By default, the label will display.

{# Output the admin defined label #}
{{ fieldName.label }}

{# Output the admin defined color #}
{{ fieldName.color }}

{# If using just the field name, label will output #}
{{ fieldName }}

The plugin can be downloaded from Github, and eventually will be updated for Craft 3.

Related Articles