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;
}
How was it for you? Let me know on BlueSky or Mastodon
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.
Join the Ninja Sparks Newsletter!