面倒な配色もこれなら簡単に!多くの人に見やすいUI用のカラースケールを生成する無料ツール -Geenes

このツールを使うと、面倒な配色を考える必要はなくなります。WebページやスマホアプリのUIで使用するカラースケールを生成できる無料ツールを紹介します。

最近増えてきた同系色のカラーでホワイトやブラックを加えたり、リーダビリティやコントラストなどのアクセシビリティもチェックすることができます。
類似ツールは他にもありますが、その中でも非常に便利なツールです。

サイトのキャプチャ

Geenes

Geenesは完全無料のオンラインツールです。
利用にあたっては、登録などの面倒なことも一切不要です。

Webページやスマホアプリにカラーがどのように適用されるか確認しながら、UIで使用するカラースケールを生成できます。

サイトのキャプチャ

用意されているUIのパターンは、現在3種類(拡張予定有り)

使い方は、簡単です。
右上の「Bese Color」でベースカラーを選択し、色数を定義します。

サイトのキャプチャ

ベースカラーを選択

UIを選択し、カラースケールを調整します。
例えば、ラベンダーの色合いの場合はレッド寄りにしたり、単にブラックを加えることもできます。

サイトのキャプチャ

カラースケールの調整

調整したカラーはUIに自動的に反映され、個別にカスタマイズすることもできます。例えば、複数並んだ要素の一つをハイライトにする、といったことも簡単です。

サイトのキャプチャ

ツールの下部「Vision」では、色盲のさまざまなタイプのシミュレーションをサポートしています。

サイトのキャプチャ

色盲のシミュレーション

カラーのアクセシビリティは上部「Accessibility」から。WCAG 2.0に対応しており、4.5以上が望ましい組み合わせです。AAAなら安心です。

サイトのキャプチャ

カラーのアクセシビリティ

「Export」をクリックすると、カラースケールを各種フォーマットでエクスポートできます。CSS, Sass, Lessをはじめ、Sketchファイルなどに対応しています。

サイトのキャプチャ

カラースケールのエクスポート

sponsors

top of page

©2019 coliss