65871


**やりたいこと**

  1. 2つの色(16進数カラーコード)から、両者の関係性を数値化したい   
例えば2色が「#ea4c89」「#e83e80」だった場合、「#ea4c89」から「#e83e80」を得るための「色相・彩度・明度」の差分値を求める方法を知りたいです。

  2. 上記で数値化した関係性(差分値)を、異なる色へ適用させることで新たな色を求めたい  
上記結果を「#0000ff」に適用させることで新たな色を取得する方法も知りたいです。

* * *

**質問経緯**

配色で悩んでいます。動的に色を取得したいです。  
あるサイトのボタンカラーが「#ea4c89」でマウスオーバーカラーが「#e83e80」でした。この関係性を、異なる色(例えば青色など)にも適用させることで、色の関係性を保ったマウスオーバーカラーを取得できるのではないかと思い質問しました。


CC BY-SA 4.0
2020-04-22T08:54:13.110
65858
2020-04-22T23:49:30.587
2020-04-22T23:49:30.587
19110
7886
question
javascript php css
異なる色の関係性を数値化したい


「色相・彩度・明度」の差分値、と書かれているのが RGB 色空間から HSV
色空間に変換して要素ごとの差をとりたい、という意味だとすると、これは[素直に変換して](https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93#RGB%E3%81%8B%E3%82%89HSV%E3%81%B8%E3%81%AE%E5%A4%89%E6%8F%9B)差をとってやれば良いです。雑な変換で良ければこれで
OK
そうです。細かい計算が面倒であればオンラインに色々変換ツールが転がっているのでそれを利用できるでしょう（ユーザーの入力に合わせて計算したい訳じゃなくて、自分が
1 回計算できれば良い、というシチュエーションに見えたので）。

もしこれで期待されているような精度にならなければ、[色空間](https://ja.wikipedia.org/wiki/%E8%89%B2%E7%A9%BA%E9%96%93)の知識が必要になってきます。というのも、RGB
や HSV において、色空間における距離と人間の感じる色の "近さ"
が必ずしも似ていないとされているのを気にしています。逆に色空間での距離が人間の感じ方と似ているように作られた色空間を均等色空間と言い、たとえば
[L*a*b*
色空間](https://ja.wikipedia.org/wiki/Lab%E8%89%B2%E7%A9%BA%E9%96%93)というのが知られています。こういった色空間に変換してから計算すればより正確になるでしょう（少なくとも理論上は……）。

また、ディスプレイで表示しているという関係上、[ガンマ値](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%83%B3%E3%83%9E%E5%80%A4)を使った補正がどのタイミングでかかっているのかも気にすべきです。つまり最初の
RGB が sRGB なのか線形な RGB なのかそれ以外なのか注意してくださいという意味です。CSS の [16
進表記色コード](https://www.w3.org/TR/css-color-4/#hex-notation)は sRGB
なので、足し引きする前に線形な RGB
に[引き戻して](https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation)おいた方が正確です。

※ガンマ値については個人的にはこのブログ記事が分かりやすかったです：[物理ベースレンダリング -リニアワークフロー編
(1)-](https://tech.cygames.co.jp/archives/2296/) \-- Cygames Engineers' Blog


CC BY-SA 4.0
2020-04-22T14:17:24.533
65871
2020-04-22T14:17:24.533
19110
65858
answer