配色に関するツール知っていると便利な10個を用途別にまとめてみた

公開日: 

配色に関するツールを知ってると便利な10個を用途別にまとめてみた
サイトの配色を決める際にはどうしていますか。配色のアイデアを得るために配色ツールを活用している方も多いのではないでしょうか。本日はお気に入りの配色ツールがすでにある場合でも、知っておいて役立ちそうな配色ツールについてまとめてみました。

スポンサードリンク

配色を決めるのに使える便利なwebツールを用途別に10個まとめてみた

サイトの配色を決める際に活用している方も多い配色に関するツールは探せばたくさん見つかると思います。それぞれお気に入りのツールがあるかもしれません。

そんなお気に入りのツールとは別に特定サイトの配色を確認したい、有名サイト・webサービスの配色、雑誌の表紙の配色、画像を元に配色チェック、キーワードを元に配色を確認など少し使い勝手の違う配色ツールなど普段はあまり使わないかもしれませんが知っておくと役に立ちそうなツールをまとめてみました。

キーワードを入力して配色を確認

色色 [:iroiro]のサイトイメージ
色色 [:iroiro]

入力したキーワードのイメージカラーを自動生成してくれるツールです。日本語の入力にも対応してます。

ランダムに配色を確認

Coolors - The super fast color palettes generator!のサイトイメージ
Coolors – The super fast color palettes generator!

キーボードのスペースキーを押すだけで自動的にカラーパレットが切り替わっていきます。気に入った色がある場合は「Lock」して他の色だけを切り替えていくことが出来ます。また、生成されたURLを使ってカラーパレットを共有することが可能です。

ベースの色を選択するだけ配色を自動生成

Palettaのサイトイメージ
Paletta – HSV Color palette for every Programmer

ベースになる色を選択するだけで周囲の色が同系統の色に変わり「調和のとれた色」でカラーパレットが生成されます。カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーすることが可能です。

グラデーションのカラー配色を確認

0to255のサイトイメージ
0to255

ベースになるカラーを選択すると、そのカラーを基にきれいなグラデーションが生成されます。各カラーをクリックするとクリップボードにコピーされます。

画像を元に配色を確認

Color Hunterのサイトイメージ
Color Hunter

指定した画像を元にカラーパレットを生成してくれるサービスです。画像はURLを指定やアップロードにも対応してます。

サイトURLを指定して配色を確認

Coloursのサイトイメージ
Colours

指定したサイトの配色を一覧化してくれます。、詳細ページでは似たような配色のサイトの情報も確認できます。

有名サイト・サービスの配色を確認

BrandColorsのサイトイメージ
BrandColors

有名サイトやサービスのカラー配色を一覧化しているサイトです。

有名サイト・サービスの配色を確認

Color of Bookのサイトイメージ
Color of Book – 雑誌の色からhtml,cssで利用できるカラーチャートの紹介

雑誌や本の表紙を元に配色を確認することが可能です。サイト内の検索機能で探す以外にも、Amazonにある本のタイトル検索もできます。

配色投稿サイトで色んな配色を確認

Browse Palettes :: COLOURloversのサイトイメージ
Browse Palettes :: COLOURlovers

投稿型の配色アイデアサイトです。大量の配色アイデアが投稿されており、人気のある色などソート機能もあるので見ているだけでも参考になります。

カラー名称を確認

WEB色見本 原色大辞典 - HTML Color Namesのサイトイメージ
WEB色見本 原色大辞典 – HTML Color Names

色について調べる場合は定番のサイトかもしれません。カラーについて様々なカテゴライズもされており、色に関するツールなど豊富にもそろっています。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑