How To: Change a Hex Color With PHP

I was recently working on developing a WordPress theme, which uses the customizer to change colors throughout the theme. Adjusting styles is pretty straight forward with Javascript or jQuery. You can add a script to overwrite the CSS style.

Unfortunately in some cases, it is either not possible or practical to use JavaScript to change the style. In this instance, I wanted to add a hover or active state to an element and needed the color to change lighter or darker to show the state change.
I wanted to use the hex value set in the customizer to create a new adjusted hex value that could be used for lightening and darkening the color.

The solution was to use a PHP funtion to determine what the adjusted value would be.

This function takes two parameters, $hex and $adjustment.

$hex should be set to the hex value you want to change.

$adjustment should indicate how much you want to lighten or darken you hex value. This parameter takes a value between 255 and -255 to make the hex value adjustment. Positive numbers are lighter, negative numbers are darker.

Leave a Reply

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