HCTエディター

3つのステップ：色を入力し、3つの次元を調整し、役割を読み取ります。

Googleの公式Material 3色空間 — 色相 / 彩度 / トーンで、知覚的に均一でコントラストが予測可能です。

1. 01

   ベースカラーを入力

   HEXを貼り付けるとHCTスライダーが自動的に調整されます。ボードエディターや任意のカラープロファイルページから色を持ち込むことも可能です。

2. 02

   色相 / 彩度 / トーンを調整

   色相Hは0～360、彩度Cは鮮やかさを設定し、トーンTは0～100でMaterialテーマスケールに直接対応します。色域外の組み合わせは表示可能な最も近い色にマッピングされます。

3. 03

   トーナルパレットと役割を読み取り

   13段階のトーナルパレットはすべてのMaterial 3テーマの骨格であり、役割パネルにはコピー可能なプライマリ / プライマリコンテナのトーン推奨が表示されます。

HCT よくある質問

HCTとMaterial 3パレットに関するよくある3つの質問です。

HCTはOKLCHとどう異なりますか？

両方とも知覚的均一性を目指しますが、HCTはCAM16色出現モデルに基づいており、視覚条件と色順応も考慮します。これはGoogleのMaterial 3テーマシステムの公式色空間であり、MaterialツールによるパレットはHCTと完全に一致します。

なぜ明度パーセントではなくトーンなのか？

トーン0～100は相対輝度(Y)にほぼ線形に対応し、Materialの仕様ではトーンによって役割が定義されています。プライマリは40、サーフェスは98などで、トーンで選ぶことでテキストのコントラストを事前に予測できます。

トーナルパレットのステップはなぜ13段階なのか？

0/10/20…100は黒から白までの全範囲をカバーする公式のMaterial 3の値スケールです。固定されたスケールにより、異なる元の色間でテーマの構造を同一に保ち、直接入れ替えることができます。

編集後

その色をボードエディタに持ち込んでパレットを作成したり、同じ知覚的な考え方でOKLCHエディタで微調整したりできます。