画像の色抽出

オンライン色抽出ツールとは？

オンライン色抽出ツールは無料の取色ツールで、画像からの取色、ブラウザが対応していれば画面からの取色、手動での色入力ができます。選択した色は HEX、RGB、HSL、HSV、CMYK などの一般的な形式に即座に変換され、配色、明暗トーン、文字コントラスト、CSS 変数も自動生成されるため、デザイナーやフロントエンド開発者がそのままコピーして使えます。

主な機能

• 画像から取色：ローカル画像を選択後、ホバーでピクセル色をプレビューし、クリックで選択できます。
• ピクセル単位の微調整：色を選択した後、矢印キーで近くのピクセルに正確に移動できます。
• 画像配色の抽出：画像から主要な色を自動抽出し、クリックで適用できます。
• 画面から取色：ブラウザが対応していれば、システムのスポイトで画面上の任意の色を取れます。
• 手動入力：カラーピッカーまたは HEX / HEXA 値の直接入力に対応しています（例：#2563EB）。
• 複数の色形式：HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV、CMYK などへ即時変換。
• 配色の生成：補色、類似色、トライアド、ソフトライト、低彩度の配色を自動生成します。
• 明暗トーン：背景、枠線、ホバー状態、UI コンポーネント向けの明るい色から暗い色までの実用トーンを生成。
• 文字コントラスト：白と黒の文字を WCAG 基準で比較し、APCA 風の知覚的な参考値も提供します。
• CSS 変数：現在の色、明暗バリアント、推奨 UI 配色の CSS 変数をワンクリックでコピー。
• ブラウザ内で処理：取色・配色抽出・変換はすべてブラウザ内で完結し、画像はアップロードされません。

使い方

1. 画像タブでローカル画像を選択し、ホバーで色をプレビューしてクリックで選択します。
2. または画面タブでシステムのスポイトを使って直接取色します。
3. 手動に切り替えて HEX 値を入力するか、カラーピッカーで指定することもできます。
4. 右側のパネルから必要な色形式、配色、トーン、CSS 変数をコピーします。