asp.net metaタグ HEX 値が暗いか明るいかを評価する



javascript css (4)

私が構築しているASP.NET Webアプリケーションのユーザーは、ある程度のパーソナライズを容易にするために、いくつかの要素(たとえばボタン/タイトル)で使用する色を選択できます。

問題は、デフォルトではこれらのレイヤーのテキストは黒です。私がやろうとしているのは、ピッカーを通してユーザーが選択したHEX値を評価し、プログラムで黒と白のテキストを切り替えることです。 JavaScript、またはコードビハインド。

問題の核心は、選択された色が黒に近いことが黒のテキストを使用するには近すぎるかどうかを判断するためのHEXの評価方法がわからないことです。

何か案は?


Answer #1

HSL変換して輝度値を調べます。 これで明るさがわかります。

これは変換を行うためのJavaScript関数です。


Answer #2

これを行うためのメソッドは、.Netに組み込まれています。

    var hexcolor = "#FA3CD0";
    var color = System.Drawing.ColorTranslator.FromHtml(hexcolor);
    var brightness = color.GetBrightness();
    if (brightness > .5)
    {
        // color is light
    }
    else
    {
        // color is dark
    }

Answer #3

16進カラーコードは、赤、緑、青の3つの強度値で構成され、それぞれ2桁の16進数です。 暗い色と明るい色を決定するには、単純に3つの値を合計します。 小さい値は大きい値よりも暗くなります。

#010203の場合、RGB値を合計すると01 + 02 + 03 = 06になります。#102030 = 60よりも暗くなります。


Answer #4

他の回答者(ricknz)が言ったようにRGBコンポーネントを一緒に追加する代わりに、実際にそれらの平均をとるべきです。

また、緑は青よりも人間の目に見えやすいので、重さも追加する必要があります。

したがって、最初に赤の成分に0.299を掛け、緑の時間に0.587をかけ、青の時間に0.114を掛けなければなりません。

そのため、輝度は次のようになります。輝度=(r * 0.299 + g * 0.587 + b * 0.114)/ 3

編集:これはそれを計算するスニペットです:

 float calcLuminance(int rgb)
 {
      int r = (rgb & 0xff0000) >> 16;
      int g = (rgb & 0xff00) >> 8;
      int b = (rgb & 0xff);

      return (r*0.299f + g*0.587f + b*0.114f) / 256;
 }

我々はRGBが0-256(0-1の代わりに)から走ったので、256による除算をpsにします。

編集:巧妙にコメントされたように768ではなく256で割るように計算を変更しました





user-experience