Автоматический контраст цвета шрифта к фону на PHP

08.12.2021

4539

Две PHP-функции для инвертирования цвета текста в зависимости от цвета его фона (значение в hex).

Черный или белый цвет текста

Первая функция определяет яркость цвета по формуле:

((R * 299) + (G * 587) + (B * 114)) / 1000

Если полученное значение больше 128, то фон считается ярким и нужно использовать черный цвет (#000) для текста, в другом случаи белый (#fff).

PHP функция:

function contrast_color($hex)
{
	$hex = trim($hex, ' #');

	$size = strlen($hex);	
	if ($size == 3) {
		$parts = str_split($hex, 1);
		$hex = '';
		foreach ($parts as $row) {
			$hex .= $row . $row;
		}		
	}

	$dec = hexdec($hex);
	$rgb = array(
		0xFF & ($dec >> 0x10),
		0xFF & ($dec >> 0x8),
		0xFF & $dec
	);
	
	$contrast = (round($rgb[0] * 299) + round($rgb[1] * 587) + round($rgb[2] * 114)) / 1000;
	return ($contrast >= 125) ? '#000' : '#fff';
}

PHP

Применение функции:

<div class="item" style="background: #000; color: <?php echo contrast_color('#000'); ?>">
	<h2>Helo World!</h2>
	<pre><?php echo contrast_color('#000'); ?></pre>
</div>

<div class="item" style="background: #1d42e0; color: <?php echo contrast_color('#1d42e0'); ?>">
	<h2>Helo World!</h2>
	<pre><?php echo contrast_color('#1d42e0'); ?></pre>
</div>

HTML

Результат:

Наиболее контрастный цвета текста

Вторая функция использует цветовую модель HSL, в которой цвет задается тремя значениями – тон, насыщенность и светлота (hue, saturation, lightness) и в зависимости от тона подбирается его светлота.

PHP функция:

function contrast_auto_color($hex) {
	$hex = trim($hex, ' #');
	
	$size = strlen($hex);	
	if ($size == 3) {
		$parts = str_split($hex, 1);
		$hex = '';
		foreach ($parts as $row) {
			$hex .= $row . $row;
		}		
	}

	$red   = hexdec(substr($hex, 0, 2)) / 255;
	$green = hexdec(substr($hex, 2, 2)) / 255;
	$blue  = hexdec(substr($hex, 4, 2)) / 255;

	$cmin = min($red, $green, $blue);
	$cmax = max($red, $green, $blue);
	$delta = $cmax - $cmin;

	if ($delta === 0) {
		$hue = 0;
	} elseif ($cmax === $red) {
		$hue = (($green - $blue) / $delta) % 6;
	} elseif ($cmax === $green) {
		$hue = ($blue - $red) / $delta + 2;
	} else {
		$hue = ($red - $green) / $delta + 4;
	}

	$hue = round($hue * 60);
	if ($hue < 0) {
		$hue += 360;
	}
	$old_hue = $hue;	

	$lightness = (($cmax + $cmin) / 2) * 100;
	$old_lightness = $lightness = round($lightness);

	$saturation = 100;	

	if (($old_hue >= 25 && $old_hue <= 195) || $old_hue >= 295){
		$lightness = 10;
	} elseif (($old_hue >= 285 && $old_hue < 295) || ($old_hue > 195 && $old_hue <= 205)){
		$hue = 60;
		$lightness = 50;
	} else {
		$lightness = 95;
	}

	if (($old_hue >= 295 || ($old_hue > 20 && $old_hue < 200)) && $old_lightness <= 35){
		$lightness = 95;
	} elseif ((($old_hue < 25 ||$old_hue > 275) && $old_lightness >= 60) || ($old_hue > 195 && $old_lightness >= 70)){
		$lightness = 10;
	}

	return 'hsl(' . round($hue) . ',' . $saturation . '%,' . $lightness . '%)';
}

PHP

Применение функции:

<div class="item" style="background: #000; color: <?php echo contrast_auto_color('#000'); ?>">
	<h2>Helo World!</h2>
	<pre><?php echo contrast_auto_color('#000'); ?></pre>
</div>

<div class="item" style="background: #1d42e0; color: <?php echo contrast_auto_color('#1d42e0'); ?>">
	<h2>Helo World!</h2>
	<pre><?php echo contrast_auto_color('#1d42e0'); ?></pre>
</div>

HTML