カラーピッカーを使って、色のrbgの値と16進数の値を相互変換します。カラーピッカーは、「カラーピッカーを使って、色比較用の不透明度10段階パターン」と同様にjQueryプラグインjquery.minicolors.jsを使っています。
サンプルのカラーピッカーは、クリックすると発動して色を選ぶことができますが、相互変換に使用する場合は、色の値をテキストフィールドに手入力かペーストで入力してください。「色の値を表示」ボタンをクリックすると、大きな色味とrbgの値、16進数の値を表示します。また、このサンプルでは、valueでrgbの値を表示していますが、入力する色の値の種類を選びません。rbgの値でも16進数の値でも構いません。さらに16進数の場合は、6桁表記、3桁表記、#の有無も問いません。
16進数で入力できる値の例： 34f、3344ff、#34f、#3344ff
rbgの値と16進数の値を相互変換といっていますが、このサンプル用に追加したスクリプトは、rbgから16進数への変換するもののみです。しかし、rbgの値でも16進数の値でも入力でき、rbgと16進数の両方の値を表示できるので、結果的に相互変換ができることになります。
※希望する軽量なjQueryプラグインのカラーピッカーの中には、このサンプルのようなことがデフォルトでできるものもあるのですが、商用利用のラインセンスが明確にフリーと記載されてなかったり、レイアウトデザイン的に汎用性が無いものなど都合の良いものが見つからず、作成することにしました。
