カラーピッカー

デジタルディスプレイはRGB（赤、緑、青）加法混色モデルを使用して色を再現します。画面上の各ピクセルは3つのサブピクセル（赤、緑、青）で構成され、それぞれ256段階の明るさ（0-255）に設定できます。これら3つのチャンネルを組み合わせることで、標準的なディスプレイは1670万色（256^3）を生成できます。画像や画面からピックするカラー値は、その特定のピクセルのRGBトリプレットであり、HEX（#00BFA5）、RGB（rgb(0, 191, 165)）、HSL（hsl(174, 100%, 37%)）など複数の表記で表現できます。

ツールで画像から色をピックする際、ブラウザのCanvas APIがgetImageData()を使用してクリック位置のピクセルデータを読み取ります。これはピクセルのRGBA値（赤、緑、青、アルファ）を含むUint8ClampedArrayを返します。アルファチャンネル（0-255）は透明性を表します — 0は完全に透明、255は完全に不透明です。ツールはRGB値をHEXとHSLに変換して表示します。画面全体の色ピックでは、EyeDropper APIが他のブラウザタブやデスクトップアプリケーションを含む、ディスプレイ上の任意の場所から単一ピクセルの色をキャプチャします。

色空間は目的に応じて重要です。sRGB色空間はWebデザインの標準です — ブラウザ、CSS、HTMLが使用するものです。ただし、多くのモダンディスプレイはsRGBよりも飽和度の高い色を表示できるより広い色域（Adobe RGB、Display P3）をサポートしています。P3ディスプレイの画像から色をピックする場合、ブラウザはsRGB色域外のP3値を報告する場合があります。Webデザインでは、デバイス間で一貫した色を確保するため、常にsRGBで作業してください。プリントデザインでは、専用のプリントカラーマネジメントツールを使用してCMYKに変換することを検討してください。

デザイナーはいくつかのワークフローでカラーピッカーを使用します：ロゴ画像からブランドカラーを抽出する、写真からカラーパレットを構築する、既存のデザインから色をサンプリングして合わせる、十分なコントラストを持つアクセシブルな色の組み合わせを作成する。EyeDropper APIはこれを画面全体の色サンプリングに拡張します。

画像からカラーパレットを構築する際は、支配的なトーンを表す3〜5色をピックしてください。最も目立つ色（多くは背景）から始め、1〜2色のアクセントカラーを選び、最後にニュートラルカラーを選びます。パレットジェネレーターのようなツールは、画像のカラーヒストグラムを分析してこのプロセスを自動化できます。アクセシビリティのために色を選ぶ際は、テキストと背景色のコントラスト比を常に確認してください — コントラストチェッカーツールはWCAG 2.1コントラスト計算式を使用して読みやすさを確保します。