ユーザーが自分の好きなテキストの色を選択できるチャットをしています。同じチャットがWebサイトのいくつかの場所に表示されます。背景が暗くなる場所もあれば、明るい場所もあります。その結果、ほとんどの選択された色は、一部のチャットボックスではおそらく判読できなくなります。
そのため、あるタイプの背景（明るいまたは暗い）でうまく機能する色が与えられ、反対のタイプの背景で見栄えがよく、最初の色にできるだけ似ている別の色を生成するアルゴリズムを探しています（そのため、ユーザーはどこでも同じ色を使用しているという印象を受けます）。
これを完全に行うことはおそらく不可能であることを私は知っていますが、どんな試みも歓迎します。
さて、あちこちでいくつかのことについて読んだ後。これが私がこれまでに見つけたものです。
まず、いくつかのポイントを強調し、私の答えを読んでいる人なら誰でも、私がここで話していることを理解できるようにしたいと思います。
色空間とは何ですか？
顔料の原色によってさまざまな色を作成でき、これらの色が特定の色空間を定義します。色空間は、カラーモデル（またはカラーシステム）とも呼ばれ、色の範囲を数値のタプルとして、通常は3つまたは4つの値または色成分（例：RGB）として単純に記述する抽象的な数学モデルです。基本的に、色空間は座標系と部分空間の精緻化です。システム内の各色は、単一のドットで表されます。
私たちの開発者のほとんどは、次の色空間（HEX、RGB、RGBA）のいずれかを使用し、一部は使用することもあります（CMYK、HSV、HSLなど）。これにより、メインカラーの組み合わせによって任意の色を提供できます（赤、緑、青、アルファ）。
色が別の色に近いかどうかを知りたい場合は、目で見ていきますが、コンピューターにプログラムで実行してもらいたいので、数学的に見ていきます。
色AがHEX色空間＃FF0000で赤であり、色BがHEX色空間＃00FF00でも緑であるとすると、 RGBの理解から、最初の2つの値は赤、次の2つの値は赤を表します。は緑の色の表現であり、最後の2つの値は青の表現です色と、それぞれの値がその値（0-9）の数値表現であることがわかっているため、（A、B、C、D、F）=（10、11、12、13、14）。次に、3D次元で色を描画し、ユークリッドのような法則を使用してそれらの間の距離を計算できます。
例：A =（R1 = FF、G1 = 00、B1 = 00） B =
（
R2 = 00、G2 = FF、B2 = 00）
ここに2つのポイントがあるので、ユークリッド法則を使用できます。
R2-R1）^ 2 +（G2-G1）^ 2 +（B2-B1）^ 2）
これまでのところ良いですよね？
いいえ。
HEX、RGBA、CMYK、またはその他の色空間を使用すると、色空間内の2つの色の間の距離がまったく異なる場合がありますが、それらの間の距離が短いため、何もわかりません。私たちの目が色をどのように見るかを考慮しないでください。
しかし、私たちの目が色を見る方法と私たちの心がそれらをどのように解釈するかを考慮した他の色空間（科学的なもの）が存在します。これらの1つはラボです。
色変換
一般に、ある絶対色空間の色を別の絶対色空間に変換したり、元に戻したりすることができます。ただし、一部の色空間には色域の制限がある場合があり、その色域の外側にある色を変換しても正しい結果が得られません。また、特にコンポーネントごとに256個の異なる値（8ビットカラー）のみの一般的な範囲が使用されている場合は、丸め誤差が発生する可能性があります。
色域とは何ですか？
コンピュータグラフィックスや写真を含む色再現では、色域、または色域は、色の特定の完全なサブセットです。最も一般的な使用法は、特定の色空間内や特定の出力デバイスなど、特定の状況で正確に表現できる色のサブセットを指します。
実装する基本的な機能を理解したので、次の式を知ってコーディングを始めましょう。
HEXからRGBへ
16進値の色表現としてHEXがあり、10進値を取得するだけで、RGB色空間の色になります。
A = RGB（255、0、0）赤
B = RGB（0、255、0）緑
RGBからXYZへ
次の数学の法則に従う必要があります
color=現在の色/
255if color> 0.04045
color =（（color + 0.055）/ 1.055）^ 2.4
else
color = color / 12.92
color = color * 100
X = colorRed * 0.4124 + colorGreen * 0.3576 + colorBlue * 0.1805
Y = colorRed * 0.2126 + colorGreen * 0.7152 + colorBlue * 0.0722
Z = colorRed * 0.0193 + colorGreen * 0.1192 + colorBlue*0.9505
それだけです
例：-A = RGB（255、0、0）赤
colorRed = 255/255
colorGreen = 0/255
colorBlue = 0/255
if (colorRed > 0.04045){
colorRed = ( ( colorRed + 0.055 ) / 1.055 ) ^ 2.4
}else{
colorRed = colorRed / 12.92
}
if (colorGreen > 0.04045){
colorGreen = ( ( colorGreen + 0.055 ) / 1.055 ) ^ 2.4
}else{<br/>
colorGreen = colorGreen / 12.92
}
if (colorBlue > 0.04045){
colorBlue = ( ( colorBlue + 0.055 ) / 1.055 ) ^ 2.4
}else{
colorBlue = colorBlue / 12.92
}
colorRed = colorRed * 100
colorGreen = colorGreen * 100
colorBlue = colorBlue * 100
X =（colorRed * 0.4124）+（colorGreen * 0.3576）+（colorBlue * 0.1805）
Y =（colorRed * 0.2126）+（colorGreen * 0.7152）+（colorBlue * 0.0722）
Z =（colorRed * 0.0193）+（colorGreen * 0.1192 ）+（colorBlue * 0.9505）
XYZ（X、Y、Z）
XYZからラボへ
// Reference-X、Reference-Y、およびReference-Zは、特定の光源とオブザーバーを指します。
X =X/参照
-XY=Y/参照
-YZ=Z/参照-Z
if ( X > 0.008856 ) {
X = X ^ ( 1/3 )
}else{
X = ( 7.787 * X ) + ( 16 / 116 )
}
if ( Y > 0.008856 ) {
Y = Y ^ ( 1/3 )
}else{
Y = ( 7.787 * Y ) + ( 16 / 116 )
}
if ( Z > 0.008856 ) {
Z = Z ^ ( 1/3 )
}else{
Z = ( 7.787 * Z ) + ( 16 / 116 )
}
CIE-L * =（116 * Y）-16
CIE-a * = 500 *（X-Y）
CIE-b * = 200 *（Y-Z）
参考文献
// 2oオブザーバー（CIE 1931）
// X2、Y2、Z2
CIE2_A = {109.850f、100f、35.585f}//白熱
CIE2_C= {98.074f、100f、118.232f}
CIE2_D50 = {96.422f、100f、82.521f }
CIE2_D55 = {95.682f、100f、92.149f}
CIE2_D65 = {95.047f、100f、108.883f}//昼光
CIE2_D75= {94.972f、100f、122.638f}
CIE2_F2 = {99.187f、100f、67.395f} //蛍光
CIE2_F7={95.044f、100f、108.755f}
CIE2_F11 = {100.966f、100f、64.370f}
// 10oオブザーバー（CIE 1964）
// X2、Y2、Z2
CIE10_A = {111.144f、100f、35.200f}//白熱
CIE10_C= {97.285f、100f、116.145f}
CIE10_D50 = {96.720f、100f、81.427f }
CIE10_D55 = {95.799f、100f、90.926f}
CIE10_D65 = {94.811f、100f、107.304f}//昼光
CIE10_D75= {94.416f、100f、120.641f}
CIE10_F2 = {103.280f、100f、69.026f} //蛍光
CIE10_F7={95.792f、100f、107.687f}
CIE10_F11 = {103.866f、100f、65.627f}
ラップカラースペースの2色間の距離
以前と同じように色を3D次元として扱います。これで、人間の目に対して2つの色の間に正確な距離ができました。
含める
色を変えても同じ色であるが、人間の目には別の色のように感じ、それを通して背景とその上に描かれているものを同じものを使って見ることができるようにするために使用すべき技術をさらに研究してください色。
-
アップデート＃1（10/09/2018）
CIEと呼ばれる人間の知覚に関する色差を計算するいくつかの数式があります。何年にもわたってそれらのいくつかの反復がありました。（CIE 1976、CIE 1994、CIE 2000）。
CIE 1976
これは、3D空間での2つの色の間の距離であり、ほとんどユークリッド距離の式です。
CIE 1994
1994年に、元のDeltaE式が改善されました。新しい式では、明度、彩度、色相の値ごとに特定の重み係数が考慮されます。
CIE 2000
CIE組織は、dE00を導入することにより、明度の不正確さを修正することを決定しました。これは現在、利用可能な最も複雑でありながら最も正確なCIE色差アルゴリズムです。
そして、CIE 2000が最も正確なものなので、私たちはそれに直行します。
PS
自分で実装する必要はありません。githubのJavascriptでバージョンを作成しました。これはこの色の類似リポジトリです。
コードを実行すると、人間の知覚に関する2つの色の違いを示す値が得られ、その値は0〜100です。詳細については、次の表を確認してください。
╔═══════════════╦════════════════════════════════════════╗
║ Delta E Value ║ Perception ║
╠═══════════════╬════════════════════════════════════════╣
║ <= 1.0 ║ Not perceptible by human eyes. ║
║ 1 - 2 ║ Perceptible through close observation. ║
║ 2 - 10 ║ Perceptible at a glance. ║
║ 11 - 49 ║ Colors are more similar than opposite. ║
║ 100 ║ Colors are exact opposite. ║
╚═══════════════╩════════════════════════════════════════╝
これで、色Aが色Bに近いかどうか、または少し遠いかがわかります。
これが最初のポイントです。今、私たちはそれを知っています。そのようなことを処理するために私たちは何をすべきか。色の値で3つのことで遊ぶことができます。
ラボの色空間は、次の意味でユニークです。
明度の値L*は、L * = 0で最も暗い黒を表し、L *=100で最も明るい白を表します。
緑-赤および青-黄色の色成分の場合はa*およびb*。
カラーチャネルa*およびb*は、a *=0およびb*=0での真のニュートラルグレー値を表します。
a *軸は緑と赤の成分を表し、緑は負の方向、赤は正の方向です。
b *軸は青-黄色の成分を表し、青は負の方向、黄色は正の方向です。
同じ色が欲しいのですが、現時点で必要なものは少し暗くしたり明るくしたりします。
その色のLab値を取得し、L値を変更します。それは色の明るさや暗さの原因となるものだからです。既存のL値の小さなパーセンテージ（0.05）に（より多くの明るさ）を追加するか、既存のL値の（より多くの暗さ）（0.05）を減算することによって。
提供されたコードでは、次のURLがこの色に類似したオンラインの例であるかどうかを確認できる完全な実例を示しています。
これがお役に立てば幸いです。
http://en.wikipedia.org/wiki/HSL_and_HSVを調べてください
色相と彩度を一定に保つ限り、同じ色に見え、背景とのコントラストのために明るさで遊ぶことができます
暗い色にするには、たとえばRGBコンポーネントに0.5または0.75を掛けます。
RGB値をそれぞれ同じ係数でスケーリングすると、色相を変更せずに色を暗くしたり明るくしたりする効果があります。