配色選びや色の組み合わせに役立つサイト6選

2016.05.30

2022.03.17

広報誌や会社の案内などを作成するときに、色選びは重要な要素のひとつです。色を変えれば誌面の雰囲気もガラリと変わり、色選びはプロのデザイナーにとっても悩ましいところ。

そこで今回は、「イロドリ」のデザイナーも制作時に参考にしている、配色に役立つサイトをまとめました。

色の名前が一目でわかる「原色大辞典」

https://www.colordic.org/

「原色大辞典」は色の名前と配色が確認できるサイトです。選んだ色から、彩度や明度の違う色の情報を参照できます。また、色カテゴリがタブで分かれており、好みのカラーを探しやすいことが特徴です。

例えば、着付け教室のチラシやお茶会のご案内を「和風」のデザインで作成するとしたら、「和色大辞典」のタブから和にちなんだ色だけを探せます。イロドリのデザイナーは、お客様から「藤色」や「若草色」と色の指定をいただいたときに、このサイトを参考にして制作しています。

色の組み合わせに迷ったら「TAG＜index＞」

https://www.tagindex.com/color/color_pattern.html

「TAG＜index＞」は、どの色を使うか迷っている人にオススメなサイトです。Webデザイナー向けに作られたサイトで、「シンプルな配色」や「ナチュラルな配色」など、たくさんの配色パターンがあらかじめ用意されています。

特徴は、「配色パターン」をクリックすると、オーソドックスなWebページのプレビューが見られること。チラシや会報誌など、Web以外の配色にも利用できます。

1色選ぶだけでOK！「ウェブ配色ツール Ver3」

https://www.color-fortuna.com/color_scheme_genelator3/

「ウェブ配色ツール Ver3」も、配色パターンをプレビューで確認できるサイトです。画面右上の円形状のカラーピッカーで色を選ぶと、サイトであらかじめ用意された背景やボタンなどの色もそれに合わせた色に変更されます。
変更した色情報は、画面右のスクロールバーをスライドすると確認できます。操作は、基本となる1色を選択するのみのため、パソコンに不慣れな人でも簡単に操作できるところがポイントです。

プレビューで完成イメージが見えるので、イロドリのデザイナーたちが冊子やパンフレットなどページのある印刷物のデザインをする際、配色の参考にしているサイトです。

シンプルに楽しめる「HUE/360」

https://hue360.herokuapp.com/

「HUE/360」は、メインにしたい色を1つ選んでクリックするだけ。選んだ色と相性の良い色を絞り込んでくれるので、時間があまりないときにもおすすめです。

選んだ色はページの下に保存されて、パッと見るだけで比べられるのも特徴です。

配色をパッと知りたいときの超お役立ちサイト『iromiru』

https://higashi-dance-network.appspot.com/iromiru/

「iromiru（イロミル）」は、気になるサイトや写真の配色を即座に抽出できるサイトです。
配色が気になる写真データを画面上でドラック＆ドロップするだけでカラーコードを抽出してくれます。
当サイトの『IRODOLIC！（イロドリック）』例に挙げてで説明いたします。

iromiruの説明

ページのスクリーンショット（写真データ）を撮って、そのデータをiromiru（イロミル）の矢印イラスト部分にドラック＆ドロップすると瞬時に色を抽出されます。気になる色をクリックすると右のカラムに抽出したカラーコードが表示されます。アルファベットで書かれたコードをクリックすれば情報をコピーできます。数秒のステップでカラーが判別できるため、とても重宝するサイトです。

配色パターンを自由に生成できる「Adobe ColorCC」

https://color.adobe.com/ja/create/color-wheel/

「Adobe ColorCC」は、画面中央にあるカラーホイールでカラーをクリックすると、そのカラーに合う色を4つ抽出してくれます。また、「カラールール」と呼ばれるイメージカテゴリを選ぶと、配色パターンを決めてくれます。

なお、サイト右上のカメラマークをクリックすると、手持ちの写真データからカラーテーマの抽出もできます。イロドリのデザイナーは、チラシやポスターなどのデザイン時に、よく利用しています。

カラー情報を簡単に変換「カラーコード変換ツール Ver3」

https://syncer.jp/color-converter

これまで紹介したサイトは、Webで使うカラーコードが参照できるサイトでした。しかし、実際に印刷物をつくるとなると、印刷用のカラーコードも必要ですよね。

「カラーコード変換ツール　Ver3」は、各種カラーコードを変換できるサイトです。ひとつのカラーコードを入力すると「RGB」や「CMYK」の色情報を抽出できます。印刷物をつくりたいけど、カラーコードがわからない！　なんてときに使えそうですね。