この記事は、「完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023」の 2日目の記事です。
今回の内容
今回の記事の内容は、2年前くらいに途中まで調べていた「色の距離」に関する話です。
以前、色の距離について調べていた時がありました。色の距離の話の中でも、特に「人の知覚特性を考慮した色の距離」についてです。
それに関して、当時、以下のようなポストをしていました。
当時、何らか情報を記事に残していた気でいたのですが、それをやっていなかったようでした。そのため、あらためて「人の知覚特性を考慮した色の距離」に関する話を記事化します。
色の距離について
色の距離を計算するという話に関して、単純な方法の事例では「RGB のそれぞれの値の差をとる」という方法があります。
しかし、それだと問題が生じる場合があります。その話に関して、まずは以下の図をご覧ください。
※ この図は、上で掲載していたポストの中に出てきている記事の 1つから抜粋しました
この図は、今回の記事のメインの話になる「CIEDE2000」に関するものです。
図の中で「赤・オレンジ系の 2つの色」と「緑系の 2つの色」が示されています。おそらく、それぞれの色の違いを見比べると、「赤・オレンジ系の 2つの色」のほうが差が大きいように見えるのではないかと思います。
しかし、これを RGB の差で比較すると、差分が同じになります。そこで、色の距離を比較する時に、人の知覚特性を考慮した指標というものがあるようです。
その 1つが、今回の記事で扱う「CIE DE2000」です。その内容については、以下のサイトを見ると詳しく書いてあります（以下の記事「セクション2-6」以外に、「セクション1-1」 や 「セクション 2-1」 などを見てみるのもオススメです）。
●新しい色差式（CIE DE2000）について。-楽しく学べる知恵袋 | コニカミノルタ
https://www.konicaminolta.jp/instruments/knowledge/color/section2/06.html
CIE DE2000 を JavaScript で扱う
上で出てきた CIE DE2000 をプログラムで扱う話を書いていきます。
言語は、自分がよく使っている JavaScript とします。GitHub で検索をかけてみると、以下の結果がでてきました。
そして、検索のトップに出てきているのが、以下の「DeltaE」です。
●zschuessler/DeltaE: CIE color difference formulas in JavaScript
https://github.com/zschuessler/DeltaE
●zschuessler.github.io/DeltaE/
https://zschuessler.github.io/DeltaE/
使い方の説明などを見ていると、 DeltaE.getDeltaE00() を使うと「CIE DE2000」が扱えるようです。
おわりに
今回の記事では、「人の知覚特性を考慮した色の距離」の話と、それを JavaScript で扱う方法について書きました。。
今後は、実際にこの DeltaE を使っていければと思います。