Color Picker

Last updated Feb 17, 2022


The Color Picker field provides an interactive way to select a hex color string using Iris.



  • Default Value The default value initially loaded into the Color Picker when first editing the field’s value.
  • Enable Transparency
    Enable transparency control on the color picker. If enabled the Return format options switch to RGBA string or RGBA array.

Template usage

The Color Picker field will return a string value containing the HEX color value including the prefix ‘#’. Below are examples using a Color Picker field named "color".

Display value within inline styles

This example demonstrates how to generate an inline style using a Color Picker value.

<div style="background-color:<?php the_field('color'); ?>">


Display value within style tags

This example demonstrates how to generate a CSS class using a Color Picker value.

<style type="text/css">
.primary-background {
    background-color: <?php the_field('primary_background_color'); ?>;

<div class="primary-background">




The Color picker field modal can be customized via the JS filter color_picker_args.