Автоматический контраст цвета шрифта к фону на PHP
Две PHP-функции для инвертирования цвета текста в зависимости от цвета его фона (значение в hex).
Черный или белый цвет текста
((R * 299) + (G * 587) + (B * 114)) / 1000
Если полученное значение больше 128, то фон считается ярким и нужно использовать черный цвет (#000) для текста, в другом случаи белый (#fff).
Применение функции:
Наиболее контрастный цвета текста
Вторая функция использует цветовую модель HSL, в которой цвет задается тремя значениями – тон, насыщенность и светлота (hue, saturation, lightness) и в зависимости от тона подбирается его светлота.
PHP функция:
Применение функции:
Черный или белый цвет текста
((R * 299) + (G * 587) + (B * 114)) / 1000
Если полученное значение больше 128, то фон считается ярким и нужно использовать черный цвет (#000) для текста, в другом случаи белый (#fff).
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';
}
Применение функции:
<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>
Наиболее контрастный цвета текста
Вторая функция использует цветовую модель 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 . '';
}
Применение функции:
<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, php
Рейтинг:
+ 6
- 0
(Плюс
/ Минус
)
Просмотров: 610
Дата: 13 апр 2022, в 20:33
Добавил: Ragnar Lodbrok
Авторизируйтесь для просмотра комментариев