コラムColumn

配色に使える便利なサイト「HUE/360」

はじめまして。
KAIDO GROUPでデザイナーをやっております、おりこと申します。
はじめに簡単な自己紹介をさせていただきます!
私は東京のデザイン専門学校を卒業後に、秋葉原のデザイン会社でデザイナーとしてお世話になったあと、宇都宮支社設立当初からこちらでデザイナーとしてお世話になっております。
小さい頃からイラストを描くのが大好きでして、KAIDO GROUPでお世話になりつつ、副業でイラストのお仕事もちょこちょこさせて頂いたり、コミティアなどの同人イベントにも定期的に楽しく参加しております。
中間色を使った柔らかい色合いがとっても大好きです。

 

 

さてさて本題に入りますが、デザインをしていて配色に困った経験はございませんか?
そんなときに役に立つのがこれです!
「HUE/360」 http://hue360.herokuapp.com/

HUE360

イラストやデザインに使いたい色と調和する色をクリックするだけで教えてくれるサイトです。いじっているだけでもとても楽しい!

「HSV(色相・彩度・明度)」をいじって色の組み合わせを選択していくと、いろんな配色パターンをつくってくれる楽しいサービスで、色の専門的な知識がなくてもいい感じの配色をしたい方にはおすすめのサイトです!
使い方はとにかく簡単で、触れていれば分かると思いますが、簡単に説明しますね。

 

 

1、まず基本の色を選びます。

とりあえず今回は紫色を選んでみました。

HUE360_2

 

 

2、相性のよさそうな色を選んでみましょう。

調和する色だけが残るので自分のイメージに合うような色を同じように選択します。
これをどんどん繰り返していきます。もし間違えたら色帯の右側の×を押せば、その色を消すことができますよ!

HUE360_4

 

 

3、色コードを取得しましょう。

「Print User Color」を押してみましょう。
選択した各色のカラーコードが表示されるので、これでカラーコードをコピーできます。簡単ですね!

HUE360_10

 

 

右下にある「Circle Controller」を簡単に説明します。

■色空間は「マンセル・カラー・システム」「RGB」「RGB+」の3種類から選べます。
■色相の数は6段階で減らしたり増やしたりできます。
■彩度は3~10の8段階からステップ数を選べます。
■「M&S judge」はオン・オフできますが、オフにすると色のピックアップ機能がなくなってしまうので、ここは常にオンにしておきましょう!
オンにしておくと最初に選んだ色と調和する色だけが表示されて、それ以外がはじかれるようになります。

_DSF8035

 

あと、Shiftキーを押しながら色をクリックすると、背景色の変更もできますよ!
「HUE/360」を使って色の組み合わせをつくってみました。
あまり考えずに直感でどんどん選んでいきましたが、それだけでもキレイにまとまっているように見えます。

HUE360_8

 

 

色の配色が苦手な人や、専門的な知識があまりないという方にはおすすめのサイトですのでぜひご活用ください!

今回はここまでです!ありがとうございました!HUE360_7

 

HUE/360 / デザイン / 色相 / 配色

執筆者:ブログ担当

お問い合わせフォーム