ExpressionEngine Docs

Color Picker Fieldtype

The color picker lets you select pre-defined or custom colors.

color picker field

Field Settings

Allowed Colors

Choose what colors are allowed to be selected:

Default Color

When set, if no color is selected the default color will be used instead.

Swatches

Specify a list of pre-defined colors to show in the color picker.

Template Tag

The color picker tag outputs css hexadecimal values:

{my_colorpicker_field}
{!-- Example Output: #ff0000  --}

Contrast Color Modifier

Use the :contrast_color modifier to output a black or white color that contrasts with the selected color:

<div style="background: {my_colorpicker_field};">
    <p style="color: {my_colorpicker_field:contrast_color};">
        This text will contrast with the background so it's always legible.
    </p>
</div>