人間の目に優しい色合いを設計するためのカラースペース -HUSL

iOS 7にも採用されているような落ち着いたパステルカラー、同じ明るさで異なる色合いを組み合わせたカラースキームなど、人間の目に優しくより見やすくなるように色合いを設計するためのカラースペース「HUSL」を紹介します。

HUSL -Human friendly HSL
HUSL -GitHub

HUSLは「Human friendly HSL」の略で、RGBのカラースペースに幾何学的な変換して設計されています。カラーの定義はHSLのように色相（hue）と輝度（lightness）を使い、彩度に「saturation」ではなく「chroma 」を使用します。

彩度のsaturationとchromaの違いは、こんな式になるようです。
Saturation（彩度：S）＝ Chroma(C) ／ 明度(V)
参考：イメージクリエーションの構築と基礎知識の習得

どんな感じかは、デモですぐに試すことが出来ます。
右下には16進数も表示されるので、ウェブ用にもそのまま利用できます。

オリジナル

パステル

パステルにすると、iOS 7やフラットなスタイルなどに使用されてる最近の人気カラーがピックアップできますよ。

ウェブデザインなど、実際にデザインに使うとこんな感じになります。
テキストと背景の組み合わせの例です。左がHUSL、右がHSL。同じ輝度をもったまま読みやすいまま異なるカラーを持つことができます。

同じ明るさをもったカラーの背景とテキストの比較

HUSLで同一の色相でランダムな色をピックアップすると、よりよい結果がでるでしょう。

同じ明るさをもったカラーのバリエーション

HUSLを利用するにはページのジェネレーターだけでなく、スクリプトとしても配布されています。

• HUSL -GitHub