Color Picker


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.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.