Skip to content

Simple PHP Colour Manipulation Functions

The other day I was updating my WordPress plugin, BM Custom Login, and I need some simple colour manipulation functions. In the plugin you can pick colours for different elements of the WordPress login interface, and I wanted to colour the login button. I used the users selected colour, but then I wanted to have a darker border colour, and I wanted to make sure the button text was always readable.

So I made a couple of simple functions for doing these two things. I also made a simple colour sanitisation function to ensure the colours are nice and safe.

Adjust Colour Brightness

This function adjusts the brightness of the colour the specified amount by adding or subtracting a value from the red, green and blue channels. I know it’s not the ideal way to do this as it doesn’t keep the colour the same, but as a quick function for limited use I think it works quite nicely.

    /**
     * adjust brightness of a colour
     * not the best way to do it but works well enough here
     *
     * @param type $hex
     * @param type $steps
     * @return type
     */
    function bm_adjust_colour_brightness( $hex, $steps ) {

        $steps = max( -255, min( 255, $steps ) );

        $hex = str_replace( '#', '', $hex );
        if ( strlen( $hex ) == 3 ) {
            $hex = str_repeat( substr( $hex, 0, 1 ), 2 ) . str_repeat( substr( $hex, 1, 1 ), 2 ) . str_repeat( substr( $hex, 2, 1), 2 );
        }

        $color_parts = str_split( $hex, 2 );
        $return = '#';

        foreach ( $color_parts as $color ) {
            $color = hexdec( $color );
            $color = max( 0, min( 255, $color + $steps ) );
            $return .= str_pad( dechex( $color ), 2, '0', STR_PAD_LEFT );
        }

        return $this->sanitize_hex_color( $return );

    }

Create Readable Text Based on Colour

I wanted to ensure the text on the button was readable so I use this function to calculate the brightness of the colour and then return either black or white.

    /**
     * Calculate whether black or white is best for readability based upon the brightness of specified colour
     *
     * @param type $hex
     */
    function bm_readable_colour( $hex ) {

        $hex = str_replace( '#', '', $hex );
        if ( strlen( $hex ) == 3 ) {
            $hex = str_repeat( substr( $hex, 0, 1 ), 2 ) . str_repeat( substr( $hex, 1, 1 ), 2 ) . str_repeat( substr( $hex, 2, 1), 2 );
        }

        $color_parts = str_split( $hex, 2 );

        $brightness = ( hexdec( $color_parts[0] ) * 0.299 ) + ( hexdec( $color_parts[1] ) * 0.587 ) + ( hexdec( $color_parts[2] ) * 0.114 );

        if ( $brightness > 128 ) {
            return '#000';
        } else {
            return '#fff';
        }

    }

Sanitize Colour

You should always sanitize data before outputting it. This ensures things are as secure as can be. This function is a slightly modified version of the sanitize_hex_color function one included in the WordPress Customizer – however that one is not available on the front-end so I made my own.

    /**
     * sanitize hexedecimal numbers used for colors
     *
     * @param type $color
     * @return string
     */
    function bm_sanitize_hex_color( $color ) {

        if ( '' === $color ) {
            return '';
        }

        // make sure the color starts with a hash
        $color = '#' . ltrim( $color, '#' );

        // 3 or 6 hex digits, or the empty string.
        if ( preg_match( '|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) ) {
            return $color;
        }

        return null;

    }

Ben View All

Ben is a lifelong Nintendo fan who also likes to build websites, and develop games. He also buys way too much Lego.

Leave a Reply

Your email address will not be published. Required fields are marked *