Trộn màu trong PHP / PHP Color Mixer

09/09/2023 0 17 2 phút đọc

Một số phương thức trộn màu trong PHP để bạn tự động tạo ra màu sắc cho trang web, phục vụ chức năng đổi màu chủ đạo của web.

PHP

Bạn thêm đoạn mã này vào thư viện, ví dụ WordPress thì ở functions.php nhé.

/*
 * Color mixer
 */
function tint($color, $weight = 0.5) {
    $t = $color;

    if (is_string($color)) {
        $t = hex2rgb($color);
    }

    $u = mix($t, array(255, 255, 255), $weight);

    if (is_string($color)) {
        return rgb2hex($u);
    }

    return $u;
}

function tone($color, $weight = 0.5) {
    $t = $color;

    if (is_string($color)) {
        $t = hex2rgb($color);
    }

    $u = mix($t, array(128, 128, 128), $weight);

    if (is_string($color)) {
        return rgb2hex($u);
    }

    return $u;
}

function shade($color, $weight = 0.5) {
    $t = $color;
    if (is_string($color)) {
        $t = hex2rgb($color);
    }

    $u = mix($t, array(0, 0, 0), $weight);

    if (is_string($color)) {
        return rgb2hex($u);
    }

    return $u;
}

function mix($color_1 = array(0, 0, 0), $color_2 = array(0, 0, 0), $weight = 0.5) {
    $f = function ($x) use ($weight) {
        return $weight * $x;
    };

    $g = function ($x) use ($weight) {
        return (1 - $weight) * $x;
    };

    $h = function ($x, $y) {
        return round($x + $y);
    };

    return array_map($h, array_map($f, $color_1), array_map($g, $color_2));
}

function hex2rgb($hex = '#000000') {
    $f = function ($x) {
        return hexdec($x);
    };

    return array_map($f, str_split(str_replace("#", "", $hex), 2));
}

function rgb2hex($rgb = array(0, 0, 0)) {
    $f = function ($x) {
        return str_pad(dechex($x), 2, "0", STR_PAD_LEFT);
    };

    return "#" . implode("", array_map($f, $rgb));
}

Ví dụ

Bạn có thể tạo ra các màu sắc nhạt hơn hoặc đậm hơn từ màu ban đầu. Từ đây, bạn có thể làm chức năng đổi màu toàn bộ trang web khi nhập màu sắc chủ đề.

<style type="text/css">
<?php
    $themecolor = #8a2be2;
    $rgb_themecolor = hex2rgb($themecolor);
?>
:root {
    --theme-color: <?php echo $themecolor; ?>;
    --theme-opacity-color: rgba(<?php echo $rgb_themecolor[0]; ?>, <?php echo $rgb_themecolor[1]; ?>, <?php echo $rgb_themecolor[2]; ?>, 0.5);
    --blur-1-color: <?php echo tint($themecolor, 0.6); ?>;
    --blur-2-color: <?php echo tint($themecolor, 0.3); ?>;
    --blur-3-color: <?php echo tint($themecolor, 0.1); ?>;
    --link-color: <?php echo tone($themecolor, 0.5); ?>;
}
</style>

Ta được kết quả: