webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

デザインで配色に困ったら!参考になるカラーコード・カラーチャートサイト6選

 みなさまご存じのとおり、デザインをするうえで『配色』はとーーーっても重要です!配色とは色の組み合わせのことですね。

 

ついつい自分の好きな色ばかり使ってしまったり、どうしても綺麗な発色の色にならなかったり、逆に蛍光色みたいな明るすぎてチカチカする色合いになってしまったり…なかなか上手くいかない時ってありますよね。

 

今回はそんな悩みをスパッと解決してくれる、配色のお助けサイトをご紹介します。


配色に困ったらこのサイト!

 HTML Color Codes

htmlcolorcodes.com

 

こちらはここ最近で、1番感動した配色のサイトさんです!!

 

カラーピッカーで好きな色が選択できるし、そこから派生して合う色をピックアップしてくれる。まさにベテラン執事さながらのサポート具合です!

 

(一般家庭に生まれ育った私は、執事がどんな感じかわからないけど!)

 

とにかく、かゆいところに手が届くので1度使ってみてください。絶対に惚れます。

 

f:id:serinaishii:20150903200032p:plain

 

基本の使い方

 

f:id:serinaishii:20150903200046p:plain

 

webサービス上なのに、カラーピッカーで色を選べる便利さったら!!!

 

好きな色を選んだら、左下の水色枠内のボタンから次のページに行きましょう。

 

f:id:serinaishii:20150903200056p:plain

 

色を保持しておけるパレットに、言葉のイメージからなる再配色、カラーコードもRGBCMYKの両方で出してくれます。とっても優秀!

 

他にも…

 

カラーチャート

 

f:id:serinaishii:20150903200106p:plain

 

カラーネーム表

 

f:id:serinaishii:20150903200208p:plain

 

このサイトさん1つで本当に大助かりです!

 

自分の貧相な色相バリエーションに苦しめられたら、またアイディアをもらいに来ます。


 farbecolore(ファルベコローレ)

farbecolore.com

 

リスのマスコットキャラクターが可愛いサイトさん。占いサイトっぽい雰囲気を醸しつつ、解説しっかりな敏腕カラーチャートサイトです。

 

自分で好きなワードを打ち込むと、そこから連想される色を何パターンも考えてくれます。

 

『林檎』なら赤っぽい色を中心に、『空』だと青色を中心に…など。必ずしも思った通りにいく訳ではないかもしれませんが、ゆるっと遊び間隔で配色を考えてみるのもいいかもしれません。

 

f:id:serinaishii:20150903200216p:plain

 

配色を連想したい言葉を入力して、[カラーイメージを診断]のボタンを押します。 

 

f:id:serinaishii:20150903200226p:plain

 

私の名前だとこんな感じみたい。英語・漢字・ひらがなだとそれぞれまた違った色のイメージで構成されます。 

 

f:id:serinaishii:20150903200237p:plain

 

なんと、こんなに詳細な分析もしてくれるんです。見てるだけでも面白いですね!


 まだまだある!おすすめカラーコード参考サイト

HUE/360

 

 http://hue360.herokuapp.com/

 

paivittain-kukka.com

 

[ ↓ ] HUE360 開発者のスライド

www.slideshare.net

 ----

www.colordic.org

 ----

www.netyasun.com

html-color-codes.info


悩ましい配色。されど避けては通れない配色。

 

webデザイン初心者の私は、迷ったら一人で悩まず文明の利器に存分に頼っていこうと思います!!