デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ
Post on:2015年3月27日
一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-01.png)
オススメの組み合わせを次々に表示してくれるオンラインサービス。
スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-02.png)
指定したカラーから明度をさまざまに変化させるシンプルなツール。ホバーやボーダーやグラデーションにぴったり。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-14.png)
数学的なバランスを取り入れた美しいグラデーションを生成できます、
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-15.png)
グラデーションやライン、パターンを使った配色サンプル。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-08.png)
Material Designで使用されている同一色相の美しいグラデーションの各色。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-03.png)
Pantone, Material Design, iOSなど、今年注目されているカラーのまとめ。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-04.png)
Pantoneカラーをベースに画像やオススメの組み合わせを表示します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-05.png)
CMYKの値からPantoneカラーを表示します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-06.png)
A nicer color palette for the web
Webセーフカラーを現代的にアレンジしたカラー。
ぎらついた感がなくなり、落ち着いたカラーリングになっています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-07.png)
Material Designのトレンドカラー。二色を選択すると、カラーの組み合わせた方とカラーパレットが表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-09.png)
Material Designの代表的なカラー21色の色相を変化させたバリエーション。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-10.png)
指定したカラーをベースにマッチするカラーを表示します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-11.png)
せっかく決めたカラーが見にくいと台無し。
WCAGアクセシビリティガイドラインに沿った安全な組み合わせか確認できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-12.png)
上記の各組み合わせを選択すると、カラーを微調整して確認できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-13.png)
WCAGアクセシビリティガイドラインに基づいたアクセシブルなカラーパレットが生成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-16.png)
左右に指定した二色をブレンドしたカラーを表示します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-17.png)
カラーと言葉における相関関係を数値化するオンラインツール。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-18.png)
CSSで指定できるさまざまなカラーのサンプル。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-19.png)
さまざまなテーマもとに作成したカラーパレット集。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-20.png)
指定したカラーをベースに指定した数だけランダムにカラーを生成します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-21.png)
誕生日の数字をもとに、カラーを表示。
あなたの生まれた日は、何色?
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-22.png)
写真画像からカラーを抽出し、カラーパレットを生成します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-23.png)
写真画像から抽出したカラーから、それぞれのカラーに合う組み合わせを表示します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-24.png)
Chrome用の機能拡張。新規タブを開いた時に、カラーやフォントの見本を表示します。
ゲーム
最後は、ゲームで楽しみながらカラーを。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-27.png)
表示されている複数のカラーから一つだけ異なるカラーのパネルをクリックするゲーム。
Lv.36以上で色が分かるデザイナークラス。34でもう一息でした。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-28.png)
表示された二色から明るい方を選択するゲーム。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032701-29.png)
表示されたコードのインベーダーを撃ち落とすゲーム。
sponsors