質問: **やりたいこと** 1. 2つの色(16進数カラーコード)から、両者の関係性を数値化したい 例えば2色が「#ea4c89」「#e83e80」だった場合、「#ea4c89」から「#e83e80」を得るための「色相・彩度・明度」の差分値を求める方法を知りたいです。 2. 上記で数値化した関係性(差分値)を、異なる色へ適用させることで新たな色を求めたい 上記結果を「#0000ff」に適用させることで新たな色を取得する方法も知りたいです。 --- **質問経緯** 配色で悩んでいます。動的に色を取得したいです。 あるサイトのボタンカラーが「#ea4c89」でマウスオーバーカラーが「#e83e80」でした。この関係性を、異なる色(例えば青色など)にも適用させることで、色の関係性を保ったマウスオーバーカラーを取得できるのではないかと思い質問しました。
回答: 「色相・彩度・明度」の差分値、と書かれているのが RGB 色空間から HSV 色空間に変換して要素ごとの差をとりたい、という意味だとすると、これは素直に変換して差をとってやれば良いです。雑な変換で良ければこれで OK そうです。細かい計算が面倒であればオンラインに色々変換ツールが転がっているのでそれを利用できるでしょう(ユーザーの入力に合わせて計算したい訳じゃなくて、自分が 1 回計算できれば良い、というシチュエーションに見えたので)。 もしこれで期待されているような精度にならなければ、色空間の知識が必要になってきます。というのも、RGB や HSV において、色空間における距離と人間の感じる色の "近さ" が必ずしも似ていないとされているのを気にしています。逆に色空間での距離が人間の感じ方と似ているように作られた色空間を均等色空間と言い、たとえば L*a*b* 色空間というのが知られています。こういった色空間に変換してから計算すればより正確になるでしょう(少なくとも理論上は......)。 また、ディスプレイで表示しているという関係上、ガンマ値を使った補正がどのタイミングでかかっているのかも気にすべきです。つまり最初の RGB が sRGB なのか線形な RGB なのかそれ以外なのか注意してくださいという意味です。CSS の 16 進表記色コードは sRGB なので、足し引きする前に線形な RGB に引き戻しておいた方が正確です。 ※ガンマ値については個人的にはこのブログ記事が分かりやすかったです:物理ベースレンダリング -リニアワークフロー編 (1)- -- Cygames Engineers' Blog