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;
}
Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.