WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

カンタンにプロの配色が出来る HUE / 360の使い方!

配色ツール、 HUE / 360について
配色ツールのAdobe Color CC / 旧Adobe kulerの使い方をご紹介します。 動作がすごく軽く、シンプルで使いやすいサイトです。

1.各部分の解説

各部分の説明をします。

①は明度スライダーで明るさを選べ、左にいくにつれて明るく右へ行くにつれて暗く(黒く)なります。

②は色相環(虹色を円状に配置したもの)です。

③カラースペースを調整する事が出来ます。

  • マンセル・カラー・システム、
  • RGB
  • RGB+(RGBA)

④色相環の周り方向の色の数を選びます。要は選ぶ色が増えます。

⑤色相環の外円から中心位置の色が増えます。明度のパターンが増えます。

⑥常にONです。最初に選んだ色と調和した色を表示します。

⑦は選んだカラー情報を抽出します。

HUE360使い方解説

2.使い方・明度とベースカラー(メインにしたい色)を決める

色相環を見ながら、明るさを決めていきます。

明度スライダー
色相環図

3.使い方・サブカラー等を選んでいく

使いたいサブカラーをクリックして選ぶと左下のバーに色が追加されていきます。

hue-360-colorbar

4.使い方・カラー情報の抽出

色相環を見ながら、明るさを決めていきます。

hue360-color抽出

5.おまけ 選んだ色をホームページサンプルに反映する事が出来る【WEB DESIGN COLOR TESTER】

選んだ色を試せるサイト
ページ内の上部にマウスを持っていくとバーが出てきて選んだカラーを入れることでサイトの配色を試す事ができます。制作に入る前の色決めですごく役に立ちます。