東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2016.05.09

miura

Webデザインの配色に悩んだら「COLORION」で新たな配色に出会おう

こんにちは。Maromaroの三浦です。
ゴールデンウィークが終わってしまいましたが皆様はどのような休日をお過ごしでしたか?
自分はというと、BBQでお肉をたくさん食べてきました!ブラジル人が用意してくれたよく分からないいろんなスパイスで漬け込まれたお肉が信じられないくらい美味しかったです。

たっぷり休んだ後には普段のお仕事が始まるわけですが、少し時間が空いてしまうと勘が鈍ったりで普段の感覚を取り戻すまで少し時間がかかる人もいるんじゃないでしょうか。そんな時に頼りたいのが便利ツール!
今回はWebデザインなどの配色を決定する際に参考にできるサイト「COLORION」を紹介します!

「COLORION」の基本的な使い方

20160509_img01

サイトにアクセスすると画面に5色から構成されるカラーパレットがたくさん表示されます。
その中から任意のカラーパレットを見つけたらその中の一色をクリックしましょう。クリップボードにカラーコードがコピーされます。

20160509_img02

あとはペーストするだけ!
使いたいデザインに利用しましょう。

様々なメニュー

ヘッダーに表示されるメニューからその他の機能に移れます。

「PALETTES」

「FULL COLOR」

全カラーパレットの一覧が表示されます。トップページに表示される一覧もどうやらこれのようです。

「MATERIAL DESIGN」

20160509_img04

マテリアルデザインに最適なカラー並べられているようです。

「POPULAR」

人気のカラーパレットがずらっと並ぶので良い配色に出会える可能性が高そうですね。

「TOOLS」

「BASE COLOR」

20160509_img03

ずらっとカラーが表示されます。その中から基本としたいカラーを選択するとそのカラーを中心としたカラーパレットが表示されます。メインカラーが決まっている場合はここから探すと良さそうですね。

「SEARCH」

20160509_img05

プルダウンで選択したカラーを使用しているパレットを検索することができます。

まとめ

使用したいカラーが決まっている場合は「TOOLS」の「BASE COLOR」からカラーパレットを探すと良さそうです。それ以外の場合は「POPULAR」から探していく感じでしょうか。
「COLORION」を使えば今まで自分が使ったことのなかったような配色パターンも見つけられそうで面白いと思います。
便利なツールを使って作業を捗らせましょう!

気になる方は以下のリンクからどうぞ
COLORION