ACF Color Swatches ACF Color Swatches

ACF Color Swatches

Created by: Nick Ford

Rating:
Downloaded: 16k times

An add-on for Advanced Custom Fields to allow users to select from a list of color choices. Setting up the field works exactly like setting up a radio button list, the main difference being that the key will also be used to style the element.

This is useful for allowing users to pick from a limited selection of colors, rather than enter an arbitrary hex value or choose from a color picker.

Supports all of the following color formats:

  • hex: #FF0000
  • rgb: rgb(255,0,0)
  • rgba: rgba(255,0,0, 1)
  • hsl: hsl(0,100%,50%)
  • hsla: hsla(0,100%,50%, 1)
  • name: red

Note: you may also use none to show a transparent swatch with a checkerboard background.

Compatibility

This ACF field type is compatible with:

  • ACF 4
  • ACF 5 (PRO version)

Screenshots

  • Use the same syntax as defining ACF radio buttons
  • Users will see color swatches that act like radio buttons

Categories

Get New Themes & Resources