ウェブデザインの配色設計に役立つオンラインサービスのまとめ -2013年春
Post on:2013年5月8日
見て楽しい触って便利な、最近リリースされたものを中心としたウェブデザインの配色設計に役立つオンラインサービスを紹介します。
まずは、気軽にカラーを楽しめるサービスから。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-01.png)
最近のフラットなデザインでよく見かけるカラーの一覧。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-04.png)
COLOURloversの新しいカラーツール、今みんなが注目しているカラーがチェックできます。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-11.png)
CSSで指定したカラーの名前の一覧。
サーモン、よく見かけます。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-05.png)
カラーコードを意味のある単語に置き換えたインスピレーションサイト。
ヘッダのストライプの仕掛け、面白いですね。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-10.png)
ソーシャルサービス・ウェブサービスで使用されているカラーの一覧。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-09.png)
有名なブランドのカラーの一覧。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-03.png)
人気のあるウェブサイトで使用されているカラーの一覧。URLを入力して、指定ページのカラーを表示することもできます。
ここからは、カラースキームを設計できるサービスです。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-02.png)
カラーをセットし、セオリーに基づいたカラースキームを作成できます。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-06.png)
指定したカラーにホワイトとブラックを加えてカラーパレットを作成します。
こういったカラー展開はよくするので、重宝します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-08.png)
HEX値からRGB値を、RGB値からHEX値をだします。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-12.png)
IPをRGB値に置き換えて、カラーを生成します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-13.png)
指定したカラーをメインに写真をFlickrから検索します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-15.png)
アップロードした画像からカラーパレットを作成します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-14.png)
洗練したカラーパレットをデータに基づいて作成できます。
アニメーションがあるので、適当にいじってるだけで楽しいです。
![サイトのキャプチャ](/wp-content/uploads-201301/2013050804-07.png)
テキストと背景のカラーの組み合わせで視覚的にどのくらい読めるか数値化し、可読性を考慮した微妙なコントラストを設計できます。
sponsors