Color Fieldtype

This fieldtype is a highly configurable color picker with simple and advanced UI modes, support for alpha channel, rgba, hsla, hsva, and more.

color.png Fieldtype UI
Behold! The Color Fieldtype!


If you want work with colors, this is the way to do it. You could combine it with Bard or Replicator to create page “page builders”, use it to choose background colors for headers or hero blocks, or even image overlays with mix-blend-mode: multiply. Go get creative!

Data Structure

The color fieldtype stores the color values as a hex string.

header_color: "#FF269E"


The color is output as a simple string. Most often you’ll use this in an inline style tag to style elements of your front-end site.

<div class="hero" style="background-color: {{ header_color }}">
  <h1>Bay Side High's Sweetheart Dance</h1>
  <h2>This Friday Night!</h2>

Config Options

theme string

Choose between a classic and a simpler nano (mini) theme. Default: classic.

color_mode array

Choose which color modes you want to enable in the UI. Available choices: hex, rgba, hsla, hsva, and cmyk. Default: hex.

default_color_mode string

Set which color mode you wish to be the default. Default: hex.

swatches array

Pre-define colors that can be selected from a list. Supports all color mode formats.

Betterify this page on Github!