#と6桁（もしくは3桁）の英数字（正確には16進数で表記される0から9、aからfの英数字）からなるカラーを、RGBでの数値に変換、もしくはRGBから16進数に変換、はたまた補色や反転色はどんなのか？それをJavaScriptで取得できるようにしてみました。
Color.infoというメソッドを用意して、その引数に16進数もしくはRGB値をセットして実行すると、補色や反転色、RGB値などの色情報が返却されるようにしました。
ロジックはAdobe Illustrator CS4 * カラーの反転色または補色への変更を参考に制作。ロジック部分を抜粋。
反転
カラーの各構成要素をカラースケール上の反対側の値に変更します。例えば、RGB カラーの R の値が 100 の場合に「反転」コマンドを実行すると、R の値は 155 に変更されます（255 – 100 = 155）。補色
カラーの各構成要素を、選択したカラーの最大の RGB 値と最小の RGB 値の合計を元にして、新しい値に変更します。現在のカラーの RGB 値のうち最大と最小の値が合計され、その値から各構成要素の値を引いて、新しい RGB 値が生成されます。例えば、RGB 値がレッド 102、グリーン 153、ブルー 51 であるカラーを選択したとします。この場合、まず最大値である 153 と最小値である 51 を合計して 204 という値が算出されます。この値から既存のカラーの RGB 値がそれぞれ差し引かれます。つまり、新しいレッドの値は 204 – 102（現在のレッドの値）= 102、グリーンの値は 204 – 153（現在のグリーンの値）= 51、ブルーの値は 204 – 51（現在のブルーの値）= 153 となり、新しい補色の RGB 値が生成されます。
すぐに使えるサンプル
サンプル： たとえば、#cc025fをセットした場合
このサンプルページのソースを見ていただくとお分かりいただけるかと思いますが、color-complement.jsというJSを用意しましたので、このJSを取り込んでもらって、
Color.info(‘#cc025f’);
上記を実行すると、#cc025f の補色や反転色、RGB値などの色情報を取得できます。
#cc025fのところを、取得したい色に変更してください。
すぐに使えるサンプル2
補色と反転色の値だけを取得したい場合にご利用いただけます（ただ、この手のはもっと優秀なサイトがゴロゴロありますかね）。
color-complement.js のこと
color-complement.jsを作る際に気にしたことを下記です。
- 色を指定するだけで、結果を取得できること
- いろんな入力パターンを想定すること
- ファイル読み込み後に何度も実行すること想定し、同じ処理を何度も呼び出すことのないようにすること
で、なにがやりたいのかというと
動的に背景色を変え、その際に背景色の上にのるオブジェクトは反転色を使いたかったのです。実行タイミングはいろんなシチュエーションを考えていますが、とりあえずフロント側で変化できるようにしたかったのです。というわけで、最後に分かりやすいデモを作ってみました。
さいごに
WindowsとAndroidでの検証は行っておりません。。
確認した端末は、iPhone(iOS 8.1 Safari) / Mac OS10.9.5 にて Safari 7.1, Chrome 38.x, Firefox 33.x。