WEBサイトなんてデザイナーの好きな色使ってんだろ？　といわれたことがあります。

私の好きな色は黒に赤に金か銀。赤のところを青に変えてもいいです。

パステルカラーよりばっきりとしたビビッドカラーが好きです。

これらを使ってWEBサイトなんか作った日には、よほど上手に配色しないと目がお亡くなりになります。ビューワーやユーザーの目を狙い撃ちにするデザイナーがどこにいるものでしょうか……！

そんなわけでお色のお話をしましょう。

印刷するときの色【CMYK】と電子機器の画面越しに見る色【RGB】は根本的に違う

印刷するときはインクを使います。これは物理的に存在する色です。これを減法混色といいます。シアン・マゼンダ・イエロー・ブラックの頭文字や末文字を引っ張ってCMYKです。全部混ぜると黒になります。

電子機器は光を放ちます。これによって色を作ります。これを加法混色といいます。光の三原色とも言いますね。レッド・グリーン・ブルーの頭文字をとってRGBです。全部混ぜると白になります。

印刷物を作る時にはCMYKを使います。画面で見えるWEBやムービーを作る時にはRGBを使います。

つまり世の中に出回っているチラシやパンフレットは例外なくCMYKで作られています。たまに特色もありますけれどもそれはまた別のお話。

「パンフスキャンしてWEBにつかってー」ってWEBデザイナーにやるともれなくWEBデザイナーが泣きます。

WEBサイトを作る時のオススメなカラーピッカーWEBサービス

以下、WEBサイトを作るにあたって、RGBのカラーをピックアップしてくれる便利なサイトをご紹介。

もちろんいろんなもののカラーバリエーション作成にお役立ち。そう、画面越しならね！

1.ウェブ配色ツール Ver2.0

＞＞http://www.color-fortuna.com/color_scheme_genelator2/

1色を作れば自動的にいろいろ配色してくれる便利サイトさま。右サイドで簡易に条件も指定できるので、初心者さまはこちらオススメ。

2.Adobe Color CC

＞＞https://color.adobe.com/ja/create/color-wheel/

デザイナーがお世話になりまくってるAdobeさまのところのカラーホイール。様々なルールを指定することができるうえに、画像を取り込んで配色を作ることも可能。作った配色を保管しておくこともできます。Adobe IDが無くても無料でアカウントが作成できます。

あとこちらモバイルアプリもありまして、無料です

3.Color Hex Color Codes

＞＞http://www.color-hex.com/

左上部のテキストボックスに自分が使いたい色のカラーコード、あるいはその横のボックスから適当に色をチョイスすると、その色のカラーデータ、暗くした場合の色の変化、明るくした場合の色の変化、いくつかの配色と、バックグラウンドをブラックorホワイトにしたときの色のイメージ、さらには簡易なCSSまで作ってくれちゃうすぐれもの。

一つの色にこだわりたいときはぜひこれ。

4.coolors

＞＞https://coolors.co/

START THE GENERATORから始められます。

Adobeのカラーホイールと似ていますが、これはそれぞれの色が動的に移動できます。また、選んだ色をPDFやPNGといった画像形式でダウンロードすることも可能。これはプレゼンなどでも「だいたいこんなお色」とアピールするに結構お役立ち。

また、それぞれのパネルを調整するだけでなく、全体の色彩や明るさなどを一度に編集することもできます。

5.paletton

＞＞http://paletton.com/

視覚的に色が確認できるという点で、とてもありがたいツールです。

左の丸い色相環の、●になっている部分をぐりぐり動かしたり、その上にあるベースカラーの色数を選んだりすると、右側にパレットとして表示してくれます。真ん中の丸いところもぐなんぐなんと動きます。

表れた色を右のパネル上でオンマウスすると、カラーコードがとれますし、右パネルの下の「PREVIEW」からパネルの形式の変更ができます。その横の「EXAMPLE」で簡易なHPの配色もしてくれちゃいます。「TABLE/EXPORT」ではカラー情報をHTMLやCSSなど、一括して提供してくれます。

わりと玄人さん向けのツールです。

ちょっと楽しいカラーピックのサイト

そんなこと言ったって色なんかぱっとでてこないよ！　というときは割と神頼みをします。

＞＞【ファルベコローレ】http://farbecolore.com/

文字を入れるとカラーイメージを分析してくれる楽しいサイトさま。その日の気分で適当なフレーズを入れて、色を選んでもらっています。

あとこちらは有名な和色のサイトさま。見ているだけでも楽しいし癒されます。

＞＞【NIPPON COLORS】http://nipponcolors.com/

MUNSELLをスライドさせてぽやっとなごんでおります。