多くの key=value タグを使用し、値をテキストとして表示するラベルを使用して HTML UI でそれらを表し、キーに基づいて前景テキストの色を確定的に生成するオープン ソース プロジェクトに取り組んでいます (コードここで）。これがどのように見えるかを理解するには、スクリーンショット @ https://raw.github.com/vimeo/graph-explorer/master/screenshots/screenshot.pngを確認してください。右側のタグの凡例は、タグのキー文字列とそれらがマッピングされる色を示しています。今のところ、すべてのラベルの背景を RGB #333 のままにしておきます。これは、ページの暗い背景にほぼぴったり合っているように見えるからです。
ご想像のとおり、一部のキーでは、これは少しうまくいきません。たとえば、「ステータス」は暗い紫色の #7b0065 を返します。背景とのコントラストが十分に高くありません。
背景の反転色を計算するために読みやすさを保証するためにテキストの色を自動的に変更しようとしましたが、
- 背景色がすべて異なるため、非常に醜いページになります。
- テキストがまだ判読できないことがよくあります (多くの場合、さらに多くの場合、次のように見えます)。
したがって、逆の色を取得する代わりに、特定の色、つまり背景色 #333 から「離れている」色を計算する方がよい場合があります。
おそらく、特定の色と背景の間の「距離」を取得できます。近すぎる場合は、キーを少し変更して、もう一度試してください。または、より良いアイデアですか？
色が特定の色の範囲内にあるかどうかをチェックするのは面白そうに見えますが、これはルビー用であり、不適切な数学 (HSL/HSV なし) を使用しているようです。