1. TEL
  2. CONTACT
  3. MENU
2023.1.6

HP制作の助っ人!配色パターンを自動で作れる無料便利ツールの紹介

デザインで配色に困ったらこれで解決!配色パターン作成ツール

※こちらは2015年1月に公開された記事を加筆修正したものです

明けましておめでとうございます!
一年という月日はほんとあっという間ですね。昨日まで正月だと思っていたらもう次の正月・・・・・それは言いすぎですが2023年も充実した1年を過ごしたいものです!

さて、皆様は「色選び・配色のセンス」はありますか?
私は胸を張って「色のことならまかせとけ!」なんて残念ながら口が裂けても言えません・・・。そんな私が色選びに参考にしているお助けツールを本日はご紹介したいと思います!

とその前に、色選びについて基本中の基本と言われている「色の三属性」について少し語りたいと思います。

色の三属性について

色の持つ三つの性質である、「色相」「明度」「彩度」のことを色の三属性と言います。
これを色の三属性といって、多くの色の中から同じ色を見つけたり、明るさや鮮やかさの違いを見分けたりできるのです。

1.「色相」

色相とは、赤・黄・緑・青・紫といった色味のことを言います。色相はイメージの違いを表現するのに最も優れた属性です。

2.「明度」

明度とは、色の明るさの度合いのことを言います。文字などの読みやすさ(可読性)にかかわる大事な要素になります。

3.「彩度」

彩度とは鮮やかさ・色みの強さのことを言います。彩度を上げるとよりビビットな色になり、彩度を下げると色褪せたような色調になります。

「色相」「明度」「彩度」を理解しておくと色選びが楽になりますが、それでも配色となると難しいと思う方にはうってつけの無料で使える色選びの便利ツールをご紹介します!

色選びに便利な無料ツール

色選びのツールは数々ありますが、その中でも初心者の方にも分かりやすい[HUE/360]を紹介致します!
こちらのツールは「明度(色の明るさ)」を指定し、使いたい色(ベースとなる色)を指定するだけで、色選びの選択肢を絞ってくれるツールです。このツール、何より一番いいのが「直感的」で「簡単」ということです。

1.明るさを選ぶ

01

画面左側の「Brightness」とある、白黒の四角形が並んでいる箇所から、使いたい色の明るさを選択します。それぞれの四角形をクリックすると、右側の色の明るさが変わるのが確認できると思います。

2.色を選ぶ

02

画面右側の「Hue&Chroma」とある、色のついたカラフルな四角形が円形状に並んでいる箇所から、基準となる色を1つ選択します。選択するとその色に近すぎたり合わなかったりする色は表示されなくなるので表示されている中から配色を選ぶ。

3.色コードも取得可能

03

選んだ色は画面左下の「Print User Color」と書いてあるリンクをクリックすれば、選択した各色のカラーコードが表示されます。

4.色数の設定も自由自在

04

色数の設定も増やしたり減らしたり簡単に出来ます。初心者の人はステップ数の数値を少なめにした方が、色選びの選択肢が少なくて選び安いと思います。

ざっと使い方を紹介させていただきましたが、一度使っていただくと簡単なのが分かると思います。他にも細かい設定などもできるので慣れた方は設定を変更して色々なカラーバリエーションの参考にしてみてはいかがでしょうか?

合わせて読みたい

「色」に関して書いたこちらの記事も是非ご覧ください!

WEBと印刷の色表現の違い
”色”から受け取るイメージの重要性
色のユニバーサルデザイン・ユーザビリティを学びました


カテゴリー:便利ツール・サイト

Copyright © ホームページ制作のエディス

top