デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ

一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。

サイトのキャプチャ

Coolors

オススメの組み合わせを次々に表示してくれるオンラインサービス。
スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。

サイトのキャプチャ

0to255

指定したカラーから明度をさまざまに変化させるシンプルなツール。ホバーやボーダーやグラデーションにぴったり。

サイトのキャプチャ

shade

数学的なバランスを取り入れた美しいグラデーションを生成できます、

サイトのキャプチャ

colorfug gradients

グラデーションやライン、パターンを使った配色サンプル。

サイトのキャプチャ

Material Design Colors

Material Designで使用されている同一色相の美しいグラデーションの各色。

サイトのキャプチャ

Tint UI

Pantone, Material Design, iOSなど、今年注目されているカラーのまとめ。

サイトのキャプチャ

ColorMunki

Pantoneカラーをベースに画像やオススメの組み合わせを表示します。

サイトのキャプチャ

CMYK to Pantone

CMYKの値からPantoneカラーを表示します。

サイトのキャプチャ

A nicer color palette for the web

Webセーフカラーを現代的にアレンジしたカラー。
ぎらついた感がなくなり、落ち着いたカラーリングになっています。

サイトのキャプチャ

material palette

Material Designのトレンドカラー。二色を選択すると、カラーの組み合わせた方とカラーパレットが表示されます。

サイトのキャプチャ

Material Design Colors

Material Designの代表的なカラー21色の色相を変化させたバリエーション。

サイトのキャプチャ

Hex Color Scheme Generator

指定したカラーをベースにマッチするカラーを表示します。

サイトのキャプチャ

colorable

せっかく決めたカラーが見にくいと台無し。
WCAGアクセシビリティガイドラインに沿った安全な組み合わせか確認できます。

サイトのキャプチャ

colorable

上記の各組み合わせを選択すると、カラーを微調整して確認できます。

サイトのキャプチャ

Color Safe

WCAGアクセシビリティガイドラインに基づいたアクセシブルなカラーパレットが生成できます。

サイトのキャプチャ

ColorBlendy

左右に指定した二色をブレンドしたカラーを表示します。

サイトのキャプチャ

Word & Colors

カラーと言葉における相関関係を数値化するオンラインツール。

サイトのキャプチャ

CSS Color Chart

CSSで指定できるさまざまなカラーのサンプル。

サイトのキャプチャ

Color Palettes

さまざまなテーマもとに作成したカラーパレット集。

サイトのキャプチャ

randomColor

指定したカラーをベースに指定した数だけランダムにカラーを生成します。

サイトのキャプチャ

Birthday hex

誕生日の数字をもとに、カラーを表示。
あなたの生まれた日は、何色?

サイトのキャプチャ

Palette.Town

写真画像からカラーを抽出し、カラーパレットを生成します。

サイトのキャプチャ

Pictaculous

写真画像から抽出したカラーから、それぞれのカラーに合う組み合わせを表示します。

サイトのキャプチャ

Palettab

Chrome用の機能拡張。新規タブを開いた時に、カラーやフォントの見本を表示します。

ゲーム

最後は、ゲームで楽しみながらカラーを。

サイトのキャプチャ

The Color!

表示されている複数のカラーから一つだけ異なるカラーのパネルをクリックするゲーム。
Lv.36以上で色が分かるデザイナークラス。34でもう一息でした。

サイトのキャプチャ

ColorRun

表示された二色から明るい方を選択するゲーム。

サイトのキャプチャ

Hex Invaders

表示されたコードのインベーダーを撃ち落とすゲーム。

sponsors

top of page

©2018 coliss