Color Swatch

A visual alternative to the standard radio field. Editors pick from predefined circular color swatches instead of text labels. Useful for theme color selectors, category badges, or any choice that maps to a color.

Settings

Choices format

Each line defines one swatch:

blue : Blue : #3b82f6
red : Red : #ef4444
green : Green : #22c55e
purple : Purple : #a855f7

Return values

return_format: 'value'

Returns the choice key (left of the colon in your choices list).

$color = get_field('brand_color');
// "blue"

return_format: 'label'

Returns the human-readable label.

$color = get_field('brand_color');
// "Blue"

return_format: 'hex'

Returns the raw hex string.

$color = get_field('brand_color');
// "#3b82f6"

Usage

Applying a dynamic background color

The hex value is dynamic (from the DB), so style= is required here. Use Tailwind for all other utilities.

$hex = get_field('badge_color');
if ($hex) {
    echo '<span class="badge" style="background-color: ' . esc_attr($hex) . ';">';
    echo esc_html(get_the_title());
    echo '</span>';
}

Mapping a value to a Tailwind class

$color_value = get_field('card_accent');

$classes = [
    'blue'   => 'bg-blue-500',
    'red'    => 'bg-red-500',
    'green'  => 'bg-green-500',
    'purple' => 'bg-purple-500',
];

$class = $classes[$color_value] ?? 'bg-gray-300';
echo '<div class="color-accent ' . esc_attr($class) . '"></div>';

Filtering by color in WP_Query

$posts = get_posts([
    'meta_query' => [[
        'key'   => 'brand_color',
        'value' => 'blue',
    ]],
]);