Codia

画像から色を抽出

画素からHEX、RGB、HSLやCSS変数をコピーします。

  • 無料
  • 登録不要
  • 端末内で処理

使い方

  1. 端末から選択、ドラッグ、または画像を貼り付けます。

  2. カーソルでプレビューし、クリックで保存します。キーボードでは矢印キーで移動(Shift で 10 ピクセル)、Enter で保存します。

  3. 結果の保存や色のコピーに登録・支払いは不要です。

こんなときに

ブランドカラーの確認

ロゴや商品写真から正確なHEX値を取得し、デザインの一貫性を保てます。

インスピレーションからパレット作成

写真やアート作品の主要な色を抽出し、カラーパレット作りの出発点にできます。

デザインからコードへ

色をCSS変数やTailwindの設定スニペットとしてコピーし、そのままプロジェクトに貼り付けられます。

仕上がりと制限

透明度を含む画素の色を確認できます。拡大表示で細部を選択し、異なる色を最大10個保存できます。個別コピーまたはCSS変数のテキスト保存が可能です。色はブラウザーがデコードした画像に基づき、印刷用の測色ではありません。

入力と出力の両方に制限があります。動画画像は非対応。ファイルはメモリ内のみで、再読み込みすると消去されます。スマートフォンでは少量ずつ処理してください。

画像から色を抽出 · 元画像 → 処理結果
画像から色を抽出 · 元画像 → 処理結果

よくある質問

画像内の色のHEXコードを取得するには?

画像をアップロードしてカーソルを合わせると、ルーペで任意のピクセルをプレビューでき、クリックで保存できます。HEX、RGB、HSL、OKLCHの値が画像の横に表示され、値をクリックするとコピーできます。

主要な色はどのように抽出されますか?

画像を縮小したコピーからサンプリングし、メディアンカット法で似た色をグループ化して、画像内で占める面積の大きい順に並べます。透明なピクセルは対象外です。

画像の外にある色も取得できますか?

ChromeやEdgeなど、EyeDropper APIに対応したブラウザーでは、「画面から色を取得」を使ってディスプレイ上の任意のピクセルの色を取得できます。

デザインファイルと色が少し違うのはなぜですか?

Display P3などの広色域カラープロファイルを持つ画像は、Web用にsRGBへ変換されます。値はブラウザーでの表示と一致しますが、印刷用ソフトやデザインソフトで元のプロファイルのまま表示した色とは異なる場合があります。

画像はアップロードされますか?

いいえ。処理はブラウザー内で行われ、画像はCodiaへ送信されません。再読み込みや移動で作業内容は消去されます。同意した解析にも画像やファイル名は含まれません。

複数の画像を処理できますか?

JPG、PNG、WebPを1枚ずつ。最大20 MiB、1200万画素。

画質とメタデータは保持されますか?

処理と設定によります。非可逆圧縮は画素を変更し、JPGは透明度を保持しません。出力は通常の8ビットWeb画像向けで、EXIF、HDR、元のカラープロファイル、16ビットの保持は保証しません。

関連する画像ツール