差の絶対値で設定すべき色を計算するツール「Diffcolor Calculator」

デザインツールやHTMLの便利な機能の一つに「差の絶対値（mix-blend-mode:differnce;）」があります。(ツールによって「差異」など呼び方は異なります。)

これは2つの要素が被っている時、前面と背面の要素の色の差分を抽出する機能で
例えば、暗い背景の上では白い文字を、白い背景の上では黒い文字を表示させたりすることが可能です。

便利なんだけど・・設定すべき文字色が分からない！

ただ、この設定で迷うのが文字の色って何を設定したらいいの？ということ。
写真と文字が被る時以外は普通の色を出したいんだけど、表示したい色をそのまま文字色として設定すると意図しない色が表示されてしまいます。

例えば背景色の上では#333333という文字色を出したいと思った時に
そのまま文字色に#333333と設定してしまうと↓のような表示になってしまいます。薄い…！

本当はこういう濃い文字色にしたい。

でも、計算よくわかんない。面倒くさい。

そんな時に使えるのが、今回用意したDiffcolor Calculatorです。

このツールのBackground Colorのボックスにページの背景色を。
Target Text Colorのボックスに表示したい色を入力して、Calculateボタンを押します。

すると、Calculateボタンの下のSetting Colorの欄に、設定すべきカラーコードが表示されます。

このカラーコードを文字色として設定すると、背景色の上に文字がいる時に狙った文字色が表示されるようになります。

色の差の絶対値を使った表現をする時はぜひ試してみてください。

ツールのURLはこちらです。

（ツールのレイアウトが酷すぎるので沢山使ってもらえたらそのうち見やすく改修される…かもしれません😂笑）