コニファ・ロゴ

ツール集:カラーピッカーを使って、色比較用の不透明度10段階パターン

カラーピッカーを使って、色比較用の不透明度(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から細かいアルファの値を取得できます。

 

色の値を入力

     

color1

  • 100%
  • 90%
  • 80%
  • 70%
  • 60%
  • 50%
  • 40%
  • 30%
  • 20%
  • 10%

color2

  • 100%
  • 90%
  • 80%
  • 70%
  • 60%
  • 50%
  • 40%
  • 30%
  • 20%
  • 10%

color3

  • 100%
  • 90%
  • 80%
  • 70%
  • 60%
  • 50%
  • 40%
  • 30%
  • 20%
  • 10%

 

rgbaの値を直接作成

スウォッチ(パレット)と不透明度(opacity): 
  • 上の値の色
jQuery minicolorsプラグイン:https://github.com/claviska/jquery-minicolors

 

戻るボタン