カラーピッカーを使って、色比較用の不透明度（opacity）10段階パターンを作成します。カラーピッカーは、jQueryプラグインjquery.minicolors.jsを使っています。このプラグインはBootstrap用ですが、Bootstrap無しでも利用できます。
サンプルは、3つの色入力フィールドがあり、それぞれフィールドをクリックすると、カラーピッカーが表示されます。カラーピッカーで色を選択すると、すぐにフィールド左側の色表示に反映します。また、カラーピッカーを使わず。直接入力もOKです。このサンプルでは、RGB値の色コードを使用していますが、直接入力では16進コード（6文字表記、3文字表記、#の有無を問いません）でも構いません。入力後、enter（またはreturn）キーを押せばRGB値に変換されます。
色が決まったら「色を反映」ボタンをクリックすると、下側に100%から10%まで、10段階の濃さのパターンを表示します。気に入った色ができたら、rgb値をコピーし、rgba値に変更してwebページなどで利用できます。
rgba値に変更の例：色のrgb値が「rgb(77, 112, 255)」で40%だった場合、rgba値は「rgb(77, 112, 255, 0.4)」になります。
作成したrgba値の色の確認は、最下段「rgbaの値を直接作成」のフィールドにコピー ペーストし、「色の確認」ボタンをクリックして確認できます。なおこのフィールドのカラーピッカーを表示して右側のopacityから細かいアルファの値を取得できます。
