WordPress comes with a great js-driven color picker called Iris, and it’s easy to use anywhere in the WordPress admin, including in the Customizer via the WP_Customize_Color_Control class. Out of the box Iris only supports picking hex color values, but I’ve always thought it should have an opacity slider and support color values in RGBa also.

I went looking for a solution last year while developing a theme, and I stumbled across a long-running Github issue that is still open on the Iris repository. Several solutions had been offered there, but in my testing they were a little buggy and incomplete, so I decided to take the best from each of the solutions already offered and work towards a better solution.

I’ve been iterating on my solution ever since, and after many improvements and fixes, I’m finally ready to share it with the world.

Here’s what it looks like:

Right now it is available on Github as a drop in control class for the Customizer. I decided to focus on the Customizer for now since live previewing color changes is all the rage, but the pieces are all there to add support for using the Alpha Color Picker throughout the WordPress admin.

Update: I created a jQuery plugin version of the Alpha Color Picker that can be used anywhere in the WordPress admin.

Using the Alpha Color Picker in the Customizer is nearly identical to using the stock WP color picker, but some additional options are available:

add_action( 'customize_register', 'xxx_customize_register' );
function xxx_customize_register( $wp_customize ) {

    // Inlcude the Alpha Color Picker control file.
    require_once dirname( __FILE__ ) . '/alpha-color-picker/alpha-color-picker.php';

    // Alpha Color Picker setting.
    $wp_customize->add_setting(
        'alpha_color_setting',
        array(
            'default'    => 'rgba(209,0,55,0.7)',
            'type'       => 'theme_mod',
            'capability' => 'edit_theme_options',
            'transport'  => 'postMessage'
        )
    );

    // Alpha Color Picker control.
    $wp_customize->add_control(
        new Customize_Alpha_Color_Control(
            $wp_customize,
            'alpha_color_control',
            array(
                'label'        => __( 'Alpha Color Picker', 'xxx' ),
                'section'      => 'colors',
                'settings'     => 'alpha_color_setting',
                'show_opacity' => true, // Optional.
                'palette'      => array(
                    'rgb(150, 50, 220)',
                    'rgba(50,50,50,0.8)',
                    'rgba( 255, 255, 255, 0.2 )',
                    '#00CC99' // Mix of color types = no problem
                )
            )
        )
    );
}

You can pass additional options for show_opacity and palette. These are both optional. Setting show_opacity to false will hide the opacity number value on the slider handle, and palette can be set as true, false, or an array of colors in RGB, RGBa, hex, or any combination of these values. If palette is omitted or set to true then the standard WP color picker palette will be used, and if set as false then the palette will be not included in the color picker.

I spent time working out all of the usability issues that I found with other solutions. I reworked the slider, palette, and default color button interactions so that the opacity slider updates itself properly whenever a palette or the default color button is clicked. I added clickable zones on the right and left sides of the slider to make it easier to get to alpha values of 0 or 100 and reworked the slider positioning to keep the handle in the correct location relative the slider. I added an animated transition on the slider to give it a sense of play and made sure the transition worked in all situations (click and drag, tap and drag, swipe, and single click). I added the show_opacity option and created the method for specifying a palette via an array of colors (with mixed color types supported). Finally, I cleaned up the code to better match the WordPress coding standards, added inline documentation to help others understand the code, and tested it thoroughly to make sure it performed well on mobile and across all major browsers.

My implementation is certainly not the only solution for picking RGBa colors. The ultimate solution would integrate more deeply with Iris rather than build on top of it, and it would be nice to somehow generate a fallback for browsers that don’t support RGBa. If I can find the time I’d love to head in that direction and try to get a proper patch into Iris that could eventually make its way into WordPress core, but for now my solution has been working great for my purposes. I encourage anyone out there to do anything you’d like with it including using it in your own themes and plugins. Feedback and pull requests on Github are always welcome.

-Braad