面倒な配色もこれなら簡単に！多くの人に見やすい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ファイルなどに対応しています。

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