Color Picker

Description

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

Screenshots

Settings

  • Default Value
    The default value initially loaded into the Color Picker when first editing the field’s value.

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'); ?>">

</div>

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'); ?>;
}
</style>

<div class="primary-background">

</div>

Notes

Customization

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.