WEBデザイン 仕事最適化

プロも使ってる!クオリティが上がるWEBデザインの配色ツール

簡単にクオリティが上がるデザインの配色ツール(カラーツール)
色使いや配色って、個人のセンスもあったりして実際に効果的な配色にするには客観的にとらえることも大切だよね!
ミーコ
ジョージ
僕もそう思う!デザイン制作において【配色】は重要!デザイン全体の雰囲気の演出やフォーカルポイントを作成したり、多くの用途に活用できるからね!

今回は、プロレベルの配色を手軽に作成することができるカラーツールを紹介するね!

こんな方におすすめ

  • プロレベルのWEBデザイン配色スキルを身に着けたい
  • 文字の可読性や視認性のある配色を知りたい
  • 簡単にグラデーションを作ってコーディングに反映させたい
  • 効率よくWEBデザインをしたい
  • WEBデザインの便利ツールを探している

 

なめらか且つユニークなグラデーションが作れる【CSS Color Gradient Generator

 

color-gradient-generator

CSS Color Gradient Generatorは、なめらかにブレンドされた2つ以上の色でCSSグラデーションが作成可能な新しいカラー作成ツール。

これまでのグラデーション系のツールだと線形や放射状のグラデーションでしたが、このツールの特徴はグラデーションのポイントになる部分の位置なども細かく調整可能な点がすごい!とことんこだわりたい方におすすめ!

CSS Color Gradient Generator

 

豊富なグラデーションをカスタマイズ【Grabient

 

grabient

Grabientはウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在25種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。

Grabient

 

ダイナミックなUIが特徴【GradPad

gradpad

Gradpad は、選択した複数の色をしたら、マウスカーソルでカンバス上で上下左右に動かしながら、直感的に美しいグラデーションを作成でる操作が簡単なカラーツールです。

Gradpad

 

直観的に使えるUIUXが魅力のカラーパレット【Paletton

 

paletton.com

Paletton.comは、デザインの目的に合った配色を行うための設計を手助けするカラースキームを、頭を使わずに直感的に色の組み合わせを考えることができるカラーツール。

ページには、カラーホイールとカラーパレットが表示されており、カラーホイールで選んだ色の組み合わせをカラーパレットで確認しながら操作可能です。

Paletton.com

 

自在なカスタマイズで配色を探す【Liveweave

liveweave

Liveweave は、カラーホイールを柔軟にカスタマイズし、お好みの配色を見つけることができるカラーツールです。

カラーホイールの鮮やかさから、グリッドの数、リングの数、カラーホイールの向き、不要な色をマスクするなど機能が充実しています。

Liveweave

 

視認性や可読性にこだわるなら【HEX NAW

hexnaw

Hexnaw は、選択した配色のコントラストやアクセシビリティの確認に役立つツール。使いたいカラーコードをいくつか入力して、文字テキストなどの可読性やコントラストなど、使いやすさをテストできるのが魅力です。

Hexnaw




-WEBデザイン, 仕事最適化

© 2020 meeko design