
Overview
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"
Templating
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></div>
Options
theme
Choose between a classic
and a simpler nano
(mini) theme. Default: classic
.
color_mode
Choose which color modes you want to enable in the UI. Available choices: hex
, rgba
, hsla
, hsva
, and cmyk
. Default: hex
.
default_color_mode
Set which color mode you wish to be the default. Default: hex
.
swatches
Pre-define colors that can be selected from a list. Supports all color mode formats.