苦手でも大丈夫！プロも使っている無料の配色ツール6選
Webデザインにおいて、配色が重要な要素であることはもはや言うまでもないでしょう。
全く同じレイアウトでも、色使いによって高級感を出せる一方で、逆に親しみやすさが出せるのも配色のなせる業。
意匠がスマートでなくても、配色が上手に構成されてさえいればそれなりのデザインに見せられるとなれば、配色の重要さがわかるというものです。
そこでデザイナーも、そうでない人も参考にしたいカラーパレットをご紹介します。
ここの配色を参考にすれば、レイアウトや意匠といったことがわからなくても良いWebデザインが作れそうですよ。
1.原色大辞典
シンプルにブラウザ上でどんな色が表現できて、それがなんというカラーコードであるかがわかったり、どんなRGB値を指定すれば良いのかがわかるサイト。
和風のサイトであれば和色の辞典を、柔らかな印象が欲しければパステルカラーの辞典から色を見つけると良いでしょう。
2.Shade
今年はグラデーションカラーの流行が予想されています。Shadeはそんなグラデーションカラーを用意に作成できるサービス。
背景やヘッダーなど大きなスペースで使用すると良いかもしれません。
明るさや彩度、色合いを調整しましょう。画面右下にCSSが表示されるのでコピペすることで観点に利用できます。
3.Adobe Color CC
Adobeが提供する配色パターン作成サービス。
オススメなのは画面下にある「画像から作成」というメニューで、画像からカラーパターンを抽出することができます。
配色が苦手でも綺麗な画像があればそれなりにまとまった配色を作ることができますよ。
自分で抽出ポイントを変えることも可能ですし、なにより無料で使えるのも嬉しいですね。
4.paletton.com
かつて「Color Scheme Designer」として知られていた有名サイト。
指定した色の近似色、補色、相対色のカラースキームを表示することができるので、それを利用してWebサイトの配色を決めると良いかもしれません。
画面右下の「EXAMPLES」からは、実際にそのカラースキームをWebサイトに適用した場合にどうなるかを確かめることができます。
カラースキームをCSSやXMLで吐き出すこともできるので便利です。
5.coolors
HSB、RGB、CMYKなどの「スライダを動かす」という直感的な操作で色を指定し、カラーパレットを作ることができます。
色の順番を入れ替えたり、画像から色を抽出したりしながら、自由に配色のイメージを膨らませると良いでしょう。
数値を直接入力できるのも便利ですね。
6.material palette
マテリアルデザインに適した色を２つ選ぶと自動的に、マテリアルデザインに準拠したサイトプレビューを見せてくれます。
それどころか、プライマーカラーやアクセントカラーなどまで一気に指定くれるので、これにしたがっておけばAndroidアプリはOKといえるかもしれません。
制作したカラーパレットが、CSSやXMLで保存できるのも便利ですね。
配色が苦手な方はもちろん、制作時間を短縮したい、という場合にも上記のサービスは使えるのではないでしょうか。 皆様のお役に立ちましたら、幸いです。