スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

配色パターンを決める際にお世話になっているサイトをご紹介

「なんかいつも同じような配色になってしまう」「思い切った配色ができない」と悩んだときに個人的にお世話になっているサイトを紹介します。

webcolor-useful-site00.png

かなり有名なサイトばかりですが参考になればうれしいです。

メインの色を決めるたいときに

まず、ウェブサイトのメインとなる色を決めるときに使っているサイトを紹介します。

WEB色見本 原色大辞典 - HTML Color Names

webcolor-useful-site01.png

この手のサイトは色々ありますが、私はこのサイト一筋です。様々な色が載っていますが、以下のページの色を参考にすることが多いです。

カラーピッカーもよく使います。

アクセントになる色を決めたいときに

私のような素人にとってアクセントになる色を決めるのは困難な作業なので、ツールを使って機械的に決めるのもいいと思います。

Color Scheme Designer 3

webcolor-useful-site.png

指定した色から、「mono=同系色」「complement=補色」「triad=三色組」「tetrad=四色組」「analogic=類似色」「accented analogic=補色+類似色」などを教えてくれます。

使い方は色々ありますが、先日書いた「4辺が違う色のボーダーにborder-radius:50%を加えると…|Webpark」という記事の4色はこれを使って選びました。

webcolor-useful-site02-1.png

RGBカラー(この場合#225688)を指定し、Angle(角度)を90°にして選ばれた4色を使用しました。

Colourco.de - find your colour scheme

webcolor-useful-site.png

比較的最近できたサイトです。こちらも指定した色を元に様々な色を提示してくれます。

「mono=同系色」「mono-d=同系色+ダークグレー」「mono-l=同系色+ライトグレー」「ana=類似色」「comp=補色」「ana-c=類似色+補色」「triad=三色組」「quad=四色組」という具合に様々なパターンがあります。

感覚的に使えるので楽しいです。

配色のアイデアを見たいときに

投稿型の配色パターン紹介サイトです。機械的には決められない面白い配色もたくさんありますので参考になります。

kuler

webcolor-useful-site.png

Adobeが提供しているサイトです。以下のアイコンをクリックすすると、選んだ配色パターンのカラーコードを見ることができます。

webcolor-useful-site04-1.png

こんな感じです。

webcolor-useful-site04-2.png

Browse Palettes :: COLOURlovers

webcolor-useful-site.png

こちらも投稿型の配色アイデアサイトです。現在2,777,053種類あるようです。

人気のある配色、コメントの多い配色、よく見られている配色などを順番で見ることもできます。ちなみに全期間で人気のある配色はこちらです → Browse Palettes :: COLOURlovers

CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー|Webpark」で出てくる5つの丸いボタンの色はこのサイトを参考にしました。

統一感のある色使いをしたいときに

微妙なグラデーションや1pxのボーダーを重ねるときなど、近い色を知りたいときに役立つサイトです。

0to255

0to255menu00.png

指定した色を使ったグラデーションが表示されます。かなり細かなグラデーションですので繊細な色使いができます。

詳しくは、「カラーツール「0to255」で色を決めてメニューを作ってみる|Webpark」をご覧いただければ分かりますが、ほんと便利です。

さいごに

ということで、配色パターンを決める際に役立つサイトを6つ紹介しました。

この手のサイトまだまだありますが、個人的によく使っているお勧めのものを厳選して簡単な使い方などを交えてみました。

有名なサイトばかりですが、1つでも新しい発見があればうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
大変役に立つ記事を書いていただき、ありがとうございます。
今後参考にさせていただきます。

以前、Webデザイナーのスクールで見たサイトを探していたのですが、

Web配色ツールVer2.0
http://www.color-fortuna.com/color_scheme_genelator2/

は、かなり完成度の高いサイトだと思いました。
もしよろしければ、ご参考まで。
【2013/10/04 16:35】 | kk8998982 #mczI5FJE | [edit]
kk8998982 さん

コメントありがとうございます。
面白いサイトですね~

しかも日本の方が作ったサイトとは珍しいです。
私もこんなツール作れるようになりたいです。

今後もよろしくお願いします~
【2013/10/05 12:18】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。