画像から色を抽出し、パレットを作成する方法.

Image Color Pickerを開き、サポートされている画像を1枚アップロードするか、サンプルを試してください。自動抽出ではソースがサーバーにアップロードされます。このガイドのサンプルはcollage-botanical.jpgで、花、葉、ピーチ色の背景が写った1200 x 900の写真です。

「Colors to extract（抽出する色数）」を6のままにし、例として「Dominant（ドミナント）」を選択します。Dominantは画像の主要な色を優先し、Vibrantはカラフルなアクセントを強調します。リクエストには3から12色を使用できます。目立つグループが少ない画像では、抽出される色が少なくなる場合があります。

実際のDominantの結果には、#E3B49F、#A5927F、#F3C2AC、#FBCEBA、#746E4F、#C297CAが含まれます。最大のグループは#E3B49Fで、サンプリングされた可視ピクセルの約28.88%を占めています。抽出には512 x 384のサンプルが使用されました。これらのパーセンテージは、フル解像度画像の正確な統計ではありません。

画像をクリックまたはタップして、拡大鏡でピクセルを検査します。画像にフォーカスし、矢印キーで1ピクセルずつ、Shiftキーと矢印キーで10ピクセルずつ移動し、Enterキーで選択します。HEX、RGB、またはHSLを個別のコピーボタンでコピーするか、「Add to palette（パレットに追加）」を使用してください。

スウォッチを選択してHEX値や色を変更、左右に移動、または削除します。カスタムカラーの追加では、任意のHEX値を受け付けます。「色をロック」は、パレットの更新や抽出設定の変更によって新しい初期パレットが生成された際に、選択したスウォッチを保持します。

サンプリングと透明度では、「ソースカラー」と「背景上の合成」を選択できます。「ソースカラー」には、該当する場合、コピーされたコードに不透明度が含まれます。「背景上の合成」は、選択したサンプルの背景上でブレンドされたピクセルを表示します。パレットのスウォッチ自体は不透明なRGB値です。編集および抽出された色には、推定ソースパーセンテージはありません。

「色のコントラストを確認」を開きます。カラーコントロールでテキストと背景を設定するか、HEXコードを入力するか、抽出した色をいずれかの側に使用します。ライブテキストサンプルでペアを比較でき、比率とともにNormal AA、Normal AAA、Large AA、Large AAAの結果が個別に表示されます。

抽出されたすべての色がテキストとして使用できると想定するのではなく、目的に合ったペアを選択してください。薄いピーチ色と薄い紫色は写真の中では調和しても、テキストと背景の組み合わせとしては不適切な場合があります。

このコントロールは、その色のペアのテキストコントラストのみを確認します。これは完全なアクセシビリティ監査ではなく、タイポグラフィ、キーボード操作、またはその他のデザインが使用可能かどうかを判断するものではありません。

手早く受け渡すには、個別のコードをコピーするか、「パレットのHEXカラーをコピー」を使用します。ファイルの場合は、「名前を付けて保存」を選択して「開始」を押します。PNGはラベル付きパレット画像を作成し、SVGはスウォッチとラベルをベクターコンテンツとして保持し、CSSは番号付きカラー変数を提供し、JSONにはHEX、RGB、HSL値が含まれます。

未編集の6色サンプルは、600 x 500ピクセル、9,163バイトのpalette.pngとしてエクスポートされます。スウォッチの順序はパレットと一致します。最終的なパレットは、自動生成時の初期数と異なっていても、編集後に1から12色になる場合があります。

ページを離れるか更新する前にダウンロードしてください。最終エクスポートでは、ソースと選択した色がサーバー処理のためにアップロードされます。新しいパレットファイルが作成され、元の写真が再着色されたり置き換えられたりすることはありません。