UIデザインに最適！ トーンを合わせたカラーでカラーパレットを簡単に生成できる無料ツール -The good colors

WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。

デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポートしています。

The good colors

The good colorsは、OKLCH色空間を使用してカラーパレットを作成できるオンラインツールです。OKLCH色空間とは、明度（Lightness）、彩度（Chrome）、色相（Hue）の値で構成されるカラーで、LCHに比べて色相と彩度の均一性が改善された色空間です。そのため、明度と彩度が一貫された知覚的変化が保証されます。

OKLCH色空間を使用したカラーパレット

使い方は、簡単です。
「Lightness」と「Chrome」のスライダーで明度と彩度を決めます。「Lightness」は0がブラックで、1がホワイトです。「Chrome」は0が無色あるいはグレーで、最大値はカラーによって異なりますが、通常は0.37程度です。

「Differenece」のスライダーを動かすと、知覚を考慮した色差式CIE DE2000でカラーパレットが生成されます。

広色域ディスプレイ（P3）もサポートし、sRGBより約25％広い色域をカバーしています。また、コントラスト比の新しい基準として提唱されているアルゴリズムAPACを使用してコントラスト比のチェックもできます。

広色域ディスプレイ（P3）をサポート

RGBやHEX値もサポートしています。

カラーをRGB値で表示

カラーをHEX値で表示

「Color Blind」のチェックをオンにすると、赤緑色覚異常の類似したカラーを非表示にします。

第２色覚異常で判別できないカラーを非表示

カラーを指定したいときは、「Custom colors」でカラー値を入力できます。

カスタムカラーの入力

カラー値は、カラーネーム・HEX値・RGB値・RGBa値・OKLCH値などに対応しており、指定した種類に変換されて表示されます。

カスタムカラーのカラーパレット

「Steps」の値を変更すると、それらのカラー間のカラーを生成し、より一貫した知覚的明るさのカラーでカラーパレットを作成できます。

「Steps」を「4」にしてカラーパレットを生成

生成したカラーパレットのダウンロードは、上部のアイコンから。

カラーパレットのダウンロード

アイコンをクリックすると、カラーをテキスト形式でコピーできます。