カラーコードやカラーピッカーで色を調合!Web上で色を作る便利ツール!

20170314000

この色とこの色を混ぜたら何色になるんだろう?

カラーコードやカラーピッカーを使ってWeb上で色を調合できる便利なツールをご紹介します。

原色大辞典にアクセス

原色大辞典にアクセスします。

→ 原色大辞典を開く

20170313002

原色大辞典のサイトが開きます。

色を調合する

20170314001

「色を探す」→「色調合」をクリック。

20170314002

色を調合する画面が開きます。

色は最大5色まで調合することができます。

20170314003

正方形のボックス内をクリックすると、下にカラーピッカーが現れます。

よくPhotoshopなどで見るやつです。

20170314004

カラーピッカーの中から調合したい色をクリックします。

上のボックスが選択した色に変わり、カラーコードが表示されます。

調合したい色のカラーコードがわかっている場合は、カラーピッカーを使わなくても、ボックス内に直接カラーコードを入力できます。

20170314005

色の比率を指定します。

ボックスの下の ▼ をクリックすると、比率の割合を選ぶセレクトボックスが現れます。

20170314006

白:青の比率を3:1にしてみます。

比率を指定したら「調合する」をクリック。

20170314007

比率が3:1(白:青)ということは、白が75%、青が25%になるということです。

色の調合結果が右側に表示されます。

「#ffffff(白)を75%、#3029ff(青)を25%、この割合で調合した結果、#cbc9ffになりました」

調合した結果の色は一番下の図に100%の状態で表示されます。

薄紫といったところでしょうか。

20170314008

さらに他の色も調合してみましょう。

新しいボックス内をクリックしてカラーピッカーを表示させます。

20170314009

黄色を抽出しました。

20170314010

白:青:黄色の比率を 2:1:1 にして「調合する」をクリック。

20170314011

比率が 2:1:1 (白:青:黄色)ということは、白が50%、青と黄色が25%ずつということです。

色の調合結果から、色は薄いグレーになりました。

20170314012

色の調合結果の、できあがった色のカラーコードの部分をクリックします。

20170314013

背景色が調合結果の色になります。

16進数のカラーコードの他に、RGB(光の3原色)のカラーモデルやCMYK(印刷)の比率、配色パターンを確認することができます。

さらにこの色の色相や明度、彩度、補色、類似色などを微調整することもできます。

20170314014

「←(戻る)」ボタンで前の画面に戻ってあらたに色を調合する時は「リセット」をクリックすると最初の状態に戻すことができます。

20170314015

調合は5色までできます。

いろんな色を調合してみてくださいね。


関連記事

→ 色指定に16進数のカラーコードを見て探す原色大辞典!Webデザインに便利!

→ イメージに合う配色の組み合わせが一目でわかる!デザインに便利な配色大辞典!

→ イメージと色みを選ぶだけ!デザインの色決めにカラーを一発検索!

→ Photoshopライクなカラーピッカーで色を探そう!

→ 今日のラッキーカラーは?あなたは何色でできていますか?色の成分解析で遊ぼう!