31

Web サイトのユーザーが 16 進数の色を選択できるようにしたいのですが、暗い色には白いテキストを表示し、明るい色には黒いテキストを表示したいだけです。16進コード（できればPHP）から明るさを計算できますか？

4

6 に答える 6

45 
$hex = "78ff2f"; //Bg color in hex, without any prefixing #!

//break up the color in its RGB components
$r = hexdec(substr($hex,0,2));
$g = hexdec(substr($hex,2,2));
$b = hexdec(substr($hex,4,2));

//do simple weighted avarage
//
//(This might be overly simplistic as different colors are perceived
// differently. That is a green of 128 might be brighter than a red of 128.
// But as long as it's just about picking a white or black text color...)
if($r + $g + $b > 382){
    //bright color, use dark font
}else{
    //dark color, use bright font
}
于 2010-06-10T14:18:56.097 に答える
22

似たようなものを作成しましたが、各色の重み付けに基づいています (このスレッドの C# バージョンに基づいています)

function readableColour($bg){
    $r = hexdec(substr($bg,0,2));
    $g = hexdec(substr($bg,2,2));
    $b = hexdec(substr($bg,4,2));

    $contrast = sqrt(
        $r * $r * .241 +
        $g * $g * .691 +
        $b * $b * .068
    );

    if($contrast > 130){
        return '000000';
    }else{
        return 'FFFFFF';
    }
}

echo readableColour('000000'); // Output - FFFFFF

編集: 小規模な最適化: Sqrt は高価な数学演算として知られており、ほとんどのシナリオではおそらく無視できますが、とにかく、このようなことを行うことで回避できます。

function readableColour($bg){
    $r = hexdec(substr($bg,0,2));
    $g = hexdec(substr($bg,2,2));
    $b = hexdec(substr($bg,4,2));

    $squared_contrast = (
        $r * $r * .299 +
        $g * $g * .587 +
        $b * $b * .114
    );

    if($squared_contrast > pow(130, 2)){
        return '000000';
    }else{
        return 'FFFFFF';
    }
}

echo readableColour('000000'); // Output - FFFFFF

単純に sqrt を適用するのではなく、目的のカットオフ コントラストを 2 倍にします。これははるかに安価な計算です。

于 2011-12-11T23:44:51.940 に答える
2

RGB 値を HLS/HSL (色相明度と彩度) に変換する必要があります。その後、明度を使用して、明るいテキストが必要か暗いテキストが必要かを判断できます。

このページには、PHP での変換方法と、これから補色を選択する方法の詳細が記載されています。

このサイトが占星術のサイトであることを発見したばかりです。

于 2010-06-10T14:08:00.243 に答える
1

imagemagick拡張機能をアクティブにしている場合は、ImagickPixelオブジェクトを作成し、16進値を使用してsetColorを呼び出してから、getHSL（）を呼び出すことができます（取得した配列の最後の項目を取得します）...

于 2010-06-10T14:13:34.890 に答える