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