画像パレット抽出 — 納品手順

画像パレット抽出 — 納品手順:パレットを渡す前に、各色へ用途と名前を付けましょう。背景、面、文字、アクセント、控えめな色などです。それぞれにHEXとRGBも添えてください。

画像はブラウザー内で分析されます。

またはこのページのどこにでも画像を1つドロップ

画像を選択してください。

カラーピッカーとパレット抽出

入力と出力の例

パレットを渡す前に、各色へ用途と名前を付けましょう。背景、面、文字、アクセント、控えめな色などです。それぞれにHEXとRGBも添えてください。

Chatcumentは色見本ごとにコピーできるHEXとrgb(r, g, b)のテキストを出すので、引き渡しは自分で整える短い一覧になります。たとえば--color-bg: #F0F0D8; --color-text: #303030; --color-accent: #C04830; のようにします。8色すべてではなく3〜5色を選んでください。少ないほうがチームで一貫して適用しやすくなります。

メニュー、ウェブサイト、窓の看板の色をそろえたいカフェのオーナーなら、デザイナーに写真1枚、名前を付けた色の一覧、どの色が文字でどれがハイライトかを書いたメモを送ります。クリーム色がページ背景なのかカードなのかをデザイナーが推測せずに済みます。

よくある失敗は、色見本の一覧をスクリーンショットだけで送ることです。正確な値が失われ、貼り付けもできません。テキストで送ってください。同じ色をファイルごとに別の名前で呼ぶのも避け、表は1つに保ち、セットが変わったらバージョンの接尾辞を付けます。

元画像をパレットの隣に保管しておくと、次の人が抽出をやり直して同じ色を確認できます。印刷物なら、画面の値は印刷会社の色校正で確認する必要があり、クライアントに公式のブランドカラーがあれば、抽出した色よりそちらが優先です。

入力

Image with several dominant colors

出力

Palette swatches and color codes

抽出したパレットは1枚の画像から得た提案です。ブランドガイドやアクセシビリティの確認で変わることがあります。

作業別ツール 12
関連ツール 13
画像パレット抽出 — 納品手順の使い方
  1. 画像パレット抽出 — 納品手順 に使う画像を選びます。
  2. ピクセルをクリックするか、抽出されたパレットから色を選びます。
  3. 正確な HEX または RGB 値をコピーします。

よくある質問

画像パレット抽出 — 納品手順 では何ができますか?

画像パレット抽出 — 納品手順:パレットを渡す前に、各色へ用途と名前を付けましょう。背景、面、文字、アクセント、控えめな色などです。それぞれにHEXとRGBも添えてください。

画像パレット抽出 — 納品手順 はどのように使いますか?

画像パレット抽出 — 納品手順 に使う画像を選びます。 ピクセルをクリックするか、抽出されたパレットから色を選びます。 正確な HEX または RGB 値をコピーします。

画像パレット抽出 — 納品手順 の結果はどのように受け取れますか?

選択した色と抽出パレットは HEX・RGB でそのままコピーできます。

編集した画像を公開する前に何を確認しますか?

書き出したファイルを開き、使用時のサイズで画素数・容量・小さな文字・輪郭・透明部分を確認してください。サイズ変更は画素数、圧縮は容量を調整します。拡大しても失われた細部の復元は保証されません。設定を変えて再出力できるよう原本を保管してください。