Image Color Picker

画像カラーピッカーの仕組み

画像カラーピッカーは、アップロードした画像からピクセルのカラーをサンプリングし、主要カラーパレットを自動的に抽出します。画像の任意の部分にカーソルを合わせると、そのピクセルのHEX・RGB・HSLの値がリアルタイムで表示されます。クリックすると値がクリップボードにコピーされます。デザイナーはブランドカラーの抽出・アクセシビリティコントラストのチェック・参照画像や写真からの統一感あるカラーパレット構築に使用します。

スポイトはカーソル位置の単一ピクセルの正確なカラーをサンプリングします。これは視覚的にカラーを推測したりパレットの最も近いスウォッチを使用するよりも精確です。写真をサンプリングする際、特定のピクセルのカラーは光・影・圧縮の結果であり、スポイトは実際のレンダリングカラーを明らかにします。これはベクターアセットで使用される「純粋な」ブランドカラーとは多少異なることが多いです。印刷マッチング作業には複数のサンプルを採取して平均を取ってください。

パレット抽出器はk-meansクラスタリングアルゴリズム（またはメジアンカット）を使用して、ピクセル頻度で重み付けされた画像内の最も支配的な5〜8色を識別します。これは最も彩度の高い色や視覚的に印象的な色とは異なります。非常に大きなニュートラルな背景領域がクラスターを支配します。このツールはほぼ重複する色をフィルタリングし、画像内の視覚的な存在感でカラーをランク付けするため、抽出したパレットはUIのテーマ設定やプレゼンテーションデザインに即座に使用できます。

HEX（#RRGGBB）はCSSとほとんどのデザインツールの標準フォーマットです。RGB（赤・緑・青、各0〜255）は画像編集ソフトウェアと一部のCSSコンテキストで使用されます。HSL（色相・彩度・明度）は最も人間に直感的なフォーマットです。HSLの明度値を調整すると、色相を変えずにカラーのティントとシェードが作成できます。これはデザインシステムのモノクロカラースケール構築に非常に便利です。ピッカーは3つのフォーマットをすべて同時に表示し、ワンクリックでコピーできます。

WCAG 2.1は通常テキストの場合にテキストと背景のコントラスト比が最低4.5:1（AA基準）、大きいテキストは3:1を要求します。画像から前景色と背景色を選択した後、このツールはコントラスト比を計算し、WCAG AAとAAAの合否結果を表示します。これにより写真の背景やブランドカラーのカード上に重ねたテキストが、開発前にアクセシビリティ基準を満たしているかをデザイナーが確認できます。