👉 独学で未経験からWebデザイナーになるためにやった全てを公開

Webデザインの配色・さし色決めが劇的に変わる神の配色ツール4選

Webデザインの配色・さし色決めが劇的に変わる神の配色ツール4選

 

  • ベースは何系にする?
  • メインのカラーは?
  • アクセントはどんな感じに?

 

lsamu

カラーの配色決めって凄く難しい!!

Webサイトをデザインをする時、絶対に欠かせない要素の一つがカラーの配色ですよね。

メインはどうしようか、さし色はどうしようかなとあれこれ迷って手が進まないって経験ありませんか?

デザイン力が乏しかった僕はいつもサイトのデザインカラー決めで悩んで時間を取られていました。

関連記事 Webデザインの参考・素敵なサイトを集めたWebデザインギャラリーサイト11選

 

 

そこで頼りになるのが配色ツール(カラーチャート)

色の情報や組み合わせなどカラーの配色に困った時に大活躍してくれます。

lsamu

  紹介するのは全部無料のツールだよ😙 

 

Webデザイナーで働いていた時、

実際に現場で使っていた4つの配色ツールを紹介します。

 

Webデザイナーなら知っておくべき神の配色ツール4選

  1. ColorHexa
  2. Color Pickers
  3. HUE/360
  4. ウェブ配色ツール Ver2.0

ColorHexa

color01

ColorHexa

ColorHexaは指定した色に関する細かな情報や色彩配合の情報やRGB、CMYKから、カラースキームなども生成。

非常に使い勝手の良い配色ツール。

公式サイト

 

colorhexaの使い方

color3

検索ワードでカラーコードを入力するとコードにマッチした色を予測変換で表示してくれます。

しかも色付きなのでとても見やすい。

 

color4

指定した色の彩度や明度を変化させた状態も表示してくれるので指定した色よりちょっと暗めが良いとか細かい部分の微調整がしやすいのが特徴。

⇒ ColorHexa

 

Color Pickers

color5

Color Pickers

今流行りの色が様々なバリエーションで用意されているので配色決定がスムーズ実行できます。

フラットデザインを作る時に使っていました。

公式サイト

 

HUE/360

color6

HUE/360

ベースとなる色を決めると自動でその色に合う色を絞り込んでくれる。

さまざまなパターンが用意されているがどれを選んでもバランスの良い配合になるのでベースとなる色が決まってる場合はよくこのツールを使います。

公式サイト

 

ウェブ配色ツール Ver2.0

color9

ウェブ配色ツール Ver2.0

色を指定しプレビューを見ながら色の配色を選べるジェレネータ。

テーマカラーを決めたらそれに合う配色をしてくれるので便利。WEBデザイナーには昔から定番のツールではないでしょうか。

公式サイト 

まとめ:Webデザインをするなら配色ツール

いかがでしたか?(シェフか!)

配色で悩んでいる人はツールを使い作業の時間効率化を計りましょう。

そしてあとは自分のデザインセンスを磨くだけ…

⇒ 絶対にデザイン力が上がるWebデザインの鍛え方

 

コメントを残す

メールアドレスが公開されることはありません。