反転色

反転色

マーク付け言語

invert

任意の背景色に対する前景色を定める

[6] 色々な決め方がありますが、輝度を求めて閾値で白か黒を選ぶのが一番単純かつ読みやすい結果が得られそうです。閾値は 127 が選ばれることが多いですが、 191 あたりにした方が読みやすい色になる範囲が広そうです。

<data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0A%3Cform%3E%0A%20%20%3Cinput%20type%3Dcolor%20onchange%3D%22%0A%20%20%20%20var%20m%20%3D%20this.value.match%20(%2F%23(..)(..)(..)%2F)%3B%0A%20%20%20%20var%20r%20%3D%20parseInt%20(%270x%27%20%2B%20m%5B1%5D)%3B%0A%20%20%20%20var%20g%20%3D%20parseInt%20(%270x%27%20%2B%20m%5B2%5D)%3B%0A%20%20%20%20var%20b%20%3D%20parseInt%20(%270x%27%20%2B%20m%5B3%5D)%3B%0A%20%20%20%20var%20max%20%3D%20Math.max%20(r%2C%20g%2C%20b)%3B%0A%20%20%20%20var%20min%20%3D%20Math.min%20(r%2C%20g%2C%20b)%3B%0A%20%20%20%20var%20R1%20%3D%20255%20-%20r%3B%0A%20%20%20%20var%20G1%20%3D%20255%20-%20g%3B%0A%20%20%20%20var%20B1%20%3D%20255%20-%20b%3B%0A%20%20%20%20var%20R2%20%3D%20max%20%2B%20min%20-%20r%3B%0A%20%20%20%20var%20G2%20%3D%20max%20%2B%20min%20-%20g%3B%0A%20%20%20%20var%20B2%20%3D%20max%20%2B%20min%20-%20b%3B%0A%20%20%20%20var%20y%20%3D%200.299%20*%20r%20%2B%200.587%20*%20g%20%2B%200.114%20*%20b%3B%0A%20%20%20%20var%20R3%20%3D%20y%20%3E%20127%20%3F%200%20%3A%20255%3B%0A%20%20%20%20var%20R4%20%3D%20y%20%3E%20127%20%2B%2064%20%3F%200%20%3A%20255%3B%0A%20%20%20%20var%20R5%20%3D%20Math.floor%20(255%20-%20y)%3B%0A%20%20%20%20elements.result1.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.result1.style.color%20%3D%20%27rgb(%27%20%2B%20R1%20%2B%20%27%2C%20%27%20%2B%20G1%20%2B%20%27%2C%20%27%20%2B%20B1%20%2B%20%27)%27%3B%0A%20%20%20%20elements.result2.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.result2.style.color%20%3D%20%27rgb(%27%20%2B%20R2%20%2B%20%27%2C%20%27%20%2B%20G2%20%2B%20%27%2C%20%27%20%2B%20B2%20%2B%20%27)%27%3B%0A%20%20%20%20elements.result3.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.result3.style.color%20%3D%20%27rgb(%27%20%2B%20R3%20%2B%20%27%2C%20%27%20%2B%20R3%20%2B%20%27%2C%20%27%20%2B%20R3%20%2B%20%27)%27%3B%0A%20%20%20%20elements.result4.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.result4.style.color%20%3D%20%27rgb(%27%20%2B%20R4%20%2B%20%27%2C%20%27%20%2B%20R4%20%2B%20%27%2C%20%27%20%2B%20R4%20%2B%20%27)%27%3B%0A%20%20%20%20elements.result5.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.result5.style.color%20%3D%20%27rgb(%27%20%2B%20R5%20%2B%20%27%2C%20%27%20%2B%20R5%20%2B%20%27%2C%20%27%20%2B%20R5%20%2B%20%27)%27%3B%0A%20%20%20%20elements.sample1.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.sample1.style.color%20%3D%20%27%23FFFFFF%27%3B%0A%20%20%20%20elements.sample2.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.sample2.style.color%20%3D%20%27%23CCCCCC%27%3B%0A%20%20%20%20elements.sample3.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.sample3.style.color%20%3D%20%27%23777777%27%3B%0A%20%20%20%20elements.sample4.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.sample4.style.color%20%3D%20%27%23333333%27%3B%0A%20%20%20%20elements.sample5.style.backgroundColor%20%3D%20value%3B%0A%20%20%20%20elements.sample5.style.color%20%3D%20%27%23000000%27%3B%0A%20%20%22%3E%0A%20%20%3Coutput%20name%3Dsample1%3E%E7%99%BD%E8%89%B2%3C%2Foutput%3E%0A%20%20%3Coutput%20name%3Dsample2%3E%E8%96%84%E7%81%B0%E8%89%B2%3C%2Foutput%3E%0A%20%20%3Coutput%20name%3Dsample3%3E%E7%81%B0%E8%89%B2%3C%2Foutput%3E%0A%20%20%3Coutput%20name%3Dsample4%3E%E6%BF%83%E7%81%B0%E8%89%B2%3C%2Foutput%3E%0A%20%20%3Coutput%20name%3Dsample5%3E%E9%BB%92%E8%89%B2%3C%2Foutput%3E%0A%20%20%3Coutput%20name%3Dresult1%3E%E5%8F%8D%E8%BB%A2%E8%89%B2%3C%2Foutput%3E%0A%20%20%3Coutput%20name%3Dresult2%3E%E8%A3%9C%E8%89%B2%3C%2Foutput%3E%0A%20%20%3Coutput%20name%3Dresult3%3E%E3%82%B0%E3%83%AC%E3%82%A4%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E5%8C%96%E9%96%BE%E5%80%A4%CE%B1%3C%2Foutput%3E%0A%20%20%3Coutput%20name%3Dresult4%3E%E3%82%B0%E3%83%AC%E3%82%A4%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E5%8C%96%E9%96%BE%E5%80%A4%CE%B2%3C%2Foutput%3E%0A%20%20%3Coutput%20name%3Dresult5%3E%E3%82%B0%E3%83%AC%E3%82%A4%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E5%8C%96%E5%8F%8D%E8%BB%A2%E8%89%B2%3C%2Foutput%3E%0A%3C%2Fform%3E%0A%3C!--%20License%3A%20CC0%20--%3E>

メモ

[1] 反対色を作る~カラーパレット(リストボックス)の文字色を見やすくする | ロケッこがゆく (2017-01-02 14:40:14 +09:00) <http://blog.syo-ko.com/?eid=1253>

[3] 色を反転させる Xor Color - C#:humming bird (y@s著, 2014-10-01 15:22:15 +09:00) <http://yas-hummingbird.blogspot.jp/2009/01/xor-color-c.html>

[4] Adobe Illustrator CS4 * カラーの反転色または補色への変更 (2017-01-02 15:08:46 +09:00) <http://help.adobe.com/ja_JP/Illustrator/14.0/WS714a382cdf7d304e7e07d0100196cbc5f-6288a.html>

[5] [JavaScript] 背景色に応じて文字色を白or黒に振り分ける | tande lab. (2017-01-02 15:24:00 +09:00) <http://tande.jp/lab/2013/04/2028>

反転色