Color Field

Color fields allow the selection of a custom color.


  • Preferred color format - The format you would like the color selected to adhere to if possible.
    • hex
    • hex3 (3 characters if possible)
    • hsl
    • rgb
    • name (falls back to hex)
    • none (depends on input)
  • Allow alpha transparency - Whether to allow transparency to be applied to the color when being selected. If allowed color will most likely be stored as rgb.
  • Has default color - The color the field has when first used by a new entry.
  • Uses color palette - Allow colors to be selected from a palette of predefined colors.
    • Only allow colors from the palette to be selected.
    • First color in palette is selected by default.
    • The palette - Add and sort colors in the palette.
    • Import a predefined color palette - Import a color palette that is stored in enact/config/color-palettes.php to the current palette.

Predefined themes can be defined in enact/config/color-palettes.php, an example color-palettes.php could look like this:


return Array(

'Default Theme' => Array('#225378', '#1695A3', '|', '#ACF0F2', '#F3FFE2', '|', '#EB7F00'),

'Black And White with Transparency' => Array('rgba(0,0,0,.5)', 'rgba(250,250,250,.5)'),


Colors can be defined as hex, rgb, rgba, hsg, or even text. A bar | represents a line break.


If the field has been set to required then the entry will not be update-able until a color has been selected. Setting a default color is considered a selection and an error will not be shown in that instance.

Template Use#

Access your color fields via the handle you set for the field.

<div style='background-color: {{ entry.yourFieldHandle }}'>Nice background color!</div>

Test if the value was set

{% if entry.yourFieldHandle %}

    <p>Color was set and it was {{ entry.yourFieldHandle }}</p>

{% else %}

    <p>Color was not set!</p>

{% endif %}