Craft Color Swatches Plugin

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.

Trevor Davis

Trevor is a front-end development director who specializes in writing bulletproof code for clients including the World Wildlife Fund, the NFLPA, and the Human Rights Campaign.

More articles by Trevor

Sign up for The Viget Newsletter

Nobody likes popups, so we waited until now to recommend our newsletter, a curated periodical featuring thoughts, opinions, and tools for building a better digital world. Read the current issue.