ピッカー
画像から色を選ぶ
任意のピクセルをクリックすると、その正確な色を読み取れます。精度を高めるにはルーペを使うか、システムのスポイトを起動します。
画像の色
多い → 少ない順ツールキット
色を扱うために必要なすべて
完全でプライベートなカラースイート：画像から色を選び、パレットを抽出し、フォーマットを変換し、アクセシビリティを確認し、グラデーションを作成できます。
画像カラーピッカー
画像をアップロード、貼り付け、またはリンクして、拡大ルーペで任意のピクセルを選択。あらゆるフォーマットをワンクリックでコピー。
パレットジェネレーター
任意の画像から主要なカラーパレットを占有率とともに取り出し、CSS、Tailwind、JSONにエクスポート。
カラーコンバーター
HEX、RGB、HSL、HSV、CMYK、OKLCH、LABを相互変換。ライブプレビューとコピー可能な値付き。
コントラストチェッカー
WCAG AAおよびAAAのコントラストを自動提案付きで確認。色覚シミュレーターも搭載。
グラデーションメーカー
パレットから線形、放射状、円錐形のCSSグラデーションを作成し、クリーンでコピー可能なコードを出力。
名前付きカラー
数千の名前付きカラーを系統と明るさで探し、コピー可能なコード付きで利用。
なぜ優れているのか
実際に色を届ける人のために設計
ピクセル単位の正確なルーペ
カーソルを追う拡大ルーペが正確なピクセルとライブのHEX値を表示するので、もう色を推測する必要はありません。
本格的なパレット抽出
メディアンカット量子化が、固定の見本ではなく、真の主要色を占有率とともに見つけ出します。
どこへでもエクスポート
CSS変数、Tailwindの@theme、SCSS、JSON、SVGシート、PNGをワンクリックでコピー。
アクセシビリティを標準搭載
すべての色で白背景・黒背景に対するWCAGコントラストを表示。完全なチェッカーと色覚シミュレーター付き。
すべてのフォーマット
HEX、RGB、HSL、HSV、CMYK、そして最新のOKLCHとLAB — すべて即座に変換され、コピー可能。
設計からプライベート
画像はCanvas APIを使ってブラウザ内だけで処理されます。アップロードは一切行われません。
カラーファインダーガイド
無料のオンラインカラーファインダー — あらゆる色を選び、抽出し、コピー
AI Color Finderは無料のオンラインカラーファインダーで、あらゆる画像を正確でコピー可能な色に変換します。写真、スクリーンショット、デザインモックアップを読み込み、欲しいピクセルを正確にクリックするだけで、HEX、RGB、HSL、HSV、CMYK、OKLCH、LABのコードが即座に返されます。登録も、ファイルのアップロードも、透かしもありません — すべての計算はブラウザ内で実行されるため、画像が端末から出ることはありません。手早いHEXカラーピッカーが必要でも、スクリーンショットから完全なパレットを抽出したい場合でも、すべてここに、一か所に揃っており、完全に無料です。
カラーファインダーとは？
カラーファインダーとは、画面上または画像内のある点の正確な色を識別し、再利用可能なコードとして表すあらゆるツールのことです。ボタンの背後にある青がどの濃淡なのかを推測する代わりに、色をサンプリングして正確な値を読み取ります。優れたカラーファインダーは3つのことを行います。正しいピクセルを選択し、そのピクセルを一般的なカラーフォーマットに変換し、コードへワンクリックでアクセスできるようにしてCSS、Figma、Tailwind、デザイン仕様にそのまま貼り付けられるようにします。AI Color Finderはその3つすべてを行い、さらにパレット抽出、コントラストチェック、グラデーション作成を追加しています。
画像からのカラーピッカー — 選択の仕組み
カラーピッカーはこのツールの中心です。ファイルをアップロードする、クリップボードから貼り付ける、画像をステージにドロップする、または画像URLを貼り付けると、HTMLキャンバスに直接読み込まれます。どこにでもマウスを移動すると拡大ルーペがカーソルを追い、下にあるピクセルを9倍に拡大し、ライブのHEX値とともに表示します — アンチエイリアスの境界を読み違えることはもうありません。クリックすると色が確定し、サイドバーにすべてのフォーマットが一度に表示されます。ブラウザがネイティブのEyeDropper APIに対応していれば、スポイトボタンでページ外も含め画面上のどこからでも色を採取できます。画像カラーピッカー、画像カラーファインダー、画像からのカラーファインダーとして、PNG、JPG、WebP、GIF、SVGを同じように簡単に読み取ります。
HEXカラーピッカーとHEXコードカラーファインダー
ほとんどのデザイナーはHEXで作業するため、HEXカラーピッカーは中心的な存在です。選択したすべてのピクセルは#0070F3のような6桁のHEXコードとして表示され、ワンクリックでコピーできます。HEXカラーファインダー、HEXコードカラーファインダーとして、HEX入力も読み取ります。#ff0080のような値を貼り付けると、RGB、HSLなどに分解します。HEXは赤、緑、青を短く書く方法にすぎず（各2桁のペアは00からFFの範囲）、HEXとRGBの変換は即座でロスのないもので、ツールが色を丸めてしまうことはありません。
RGBカラーファインダーとカラーコードファインダー
RGBカラーファインダーは同じ色を赤、緑、青のチャンネルとして0〜255のスケールで表示します。これはUIでデザインするのではなくコードを書くときにまさに必要なものです。RGBと合わせてHSL、HSV、CMYK、OKLCH、LABも得られるので、印刷、ウェブ、アクセシビリティ、最新CSSに対応する完全なカラーコードファインダーとして機能します。OKLCHとLABは知覚的に均一で、ティント、シェード、一貫したテーマを作るのに理想的です。カーソルを動かすたびにすべての値が更新され、それぞれに専用のコピーボタンがあるため、手計算なしでプロジェクトに必要なフォーマットを取得できます。
補色ファインダー
色を1つ選ぶのは仕事の半分にすぎず、残りの半分はそれと調和する色を見つけることです。補色ファインダーは、選んだ色を中心にハーモニーを構築するのに役立ちます — カラーホイールの反対側にある補色、さらに類似色やその他の関連するシェードなどです。コントラストチェッカーと組み合わせれば、テキストと背景がWCAG AAまたはAAAを満たすかを確認でき、パレットジェネレーターと組み合わせれば、1つの色を完全でバランスの取れた配色に展開できます。実際には、ロゴからブランドカラーを採取し、その補色を見つけ、コントラストを検証し、セット全体をCSS変数として1分以内にエクスポートできるということです。
Pantoneカラーファインダーと名前付きカラー
色に名前が必要なこともあります。このツールは選んだすべての色を最も近いCSS名前付きカラーに照合し、色相、明度、彩度に基づいて説明的で人間が読める名前を付けます — #1E3A8Aではなく「Deep Cobalt」のように話したいときに便利です。Pantoneカラーファインダーをお探しなら、私たちの名前付きカラーライブラリは、数千の見本を系統と明るさで自由に探し、最も近いコードをコピーできる、オープンで気軽な方法です。公式なPantoneの代替ではありませんが、認識しやすい色を見つけて共有するための、手早く無料のリファレンスです。
あらゆる画像からパレットを抽出
単一のピクセルだけでなく、画像カラーファインダーは画像全体を一度に読み取ることもできます。内蔵のパレットジェネレーターはすべてのピクセルに対してメディアンカット量子化を実行し、真の主要色を浮かび上がらせ、固定の推測ではなく、各色が画像のどれだけを占めるかを表示します。そこからパレットをCSSカスタムプロパティ、Tailwind v4テーマ、SCSS変数、JSON、SVG見本シート、またはPNGとしてエクスポートできます。写真、商品画像、スクリーンショット、ムードボードのいずれも、数クリックでそのまま使えるカラーシステムに変わります。
AI Color Finderを使う理由
- 無料で無制限 — すべてのツールがオープンで、アカウント、メール、クレジットカードは不要です。
- 設計からプライベート — 画像はCanvas APIで処理され、サーバーにアップロードされたり保存されたりすることはありません。
- ピクセル単位の正確さ — 拡大ルーペとシステムのスポイトにより、意図した正確な色を採取できます。
- すべてのフォーマット — HEX、RGB、HSL、HSV、CMYK、OKLCH、LABが即座に変換され、コピー可能です。
- オフラインで動作 — ページが一度読み込まれれば、ピッカーは接続なしでも動作し続けます。
カラーピッカー、HEXカラーファインダー、画像カラーピッカー、あるいは完全な画像からのカラーファインダーを求めてたどり着いたとしても、すべてがこの1ページに揃っています。画像を読み込み、色を選び、コードをコピーするだけ — アカウント不要、費用なし、アップロードなし。カラーファインダーをブックマークして、エディターの隣に置いておきましょう。
FAQ
よくある質問
画像から色を選ぶにはどうすればいいですか？
画像をピッカーにドロップするか、クリップボードから貼り付けるか、画像URLを貼り付けます。画像上の任意の場所をクリックまたはドラッグすると、拡大ルーペがカーソル下の正確なピクセルをライブのHEX値とともに表示します。離すと色が保存されます。
HEXカラーコードとは何ですか？
HEXコードは、先頭に#が付いた6桁の16進数で、赤、緑、青のチャンネルを格納します（例：#0070F3）。各2桁のペアは00（なし）からFF（最大）の範囲で、RGBと同じ1670万色をより短い表記でカバーします。
画像はサーバーにアップロードされますか？
いいえ。すべてはHTML Canvas APIを使ってブラウザ内で実行されます。画像が端末から出ることはないため、プライバシーが保たれ、一度読み込めばオフラインでも動作します。
どのカラーフォーマットに対応していますか？
選択または抽出したすべての色はHEX、RGB、HSL、HSV、CMYK、OKLCH、LABで表示されます。個別にコピーすることも、パレット全体を一度にエクスポートすることもできます。
画像の完全なカラーパレットを抽出できますか？
はい。パレットジェネレーターは画像に対してメディアンカット量子化を実行して主要色を見つけ、各色が画像のどれだけを占めるかを表示し、パレットをCSS変数、Tailwindテーマ、SCSS、JSON、SVG、PNG見本シートとしてエクスポートできます。
AI Color Finderは無料ですか？
はい、すべてのツールは無料で、アカウント、メール、クレジットカードは不要です。ツール内に広告が挿入されることも、利用制限もありません。
Color Finderの使い方を教えてください
ファイルをドロップする、クリップボードから貼り付ける、ファイルを選択する、または画像URLを貼り付けることで画像をピッカーに読み込み、画像上でカーソルを動かします。拡大ルーペがポインターを追い、下にある正確なピクセルをライブのHEX値とともに表示します。ピクセルをクリックして色を確定すると、サイドバーにHEX、RGB、HSL、HSV、CMYK、OKLCH、LABの値が表示され、それぞれにワンクリックのコピーボタンが付いています。
トゥルーカラーファインダーの使い方
トゥルーカラーファインダーは、近似値ではなく画像に実際に格納されている色を報告します。AI Color FinderはHTML Canvasから生のピクセルデータを直接読み取るため、返されるHEXおよびRGB値はファイル内の正確な8ビット値であり、推測もサーバー圧縮もありません。アンチエイリアスの境界を避けるためにルーペで単色の領域をサンプリングすれば、毎回真の色を取得できます。
ファインダーの背景色を変更するには
ピッカーの背景はページテーマに従います。上部ナビゲーションのテーマ切り替えを使ってライトとダークを切り替えると、画像プレビューの背後の面が変わります。作成中のデザインやパレットの背景を変更するには、任意の色のHEXまたはRGB値をコピーして、CSS、Figma、Tailwindで背景として適用します。
オンラインで最高のカラーピッカーツールは何ですか？
最高のオンラインカラーピッカーは、高速で、正確で、プライベートです。AI Color Finderは、アップロードした任意の画像から9倍の拡大ルーペでピクセルを採取し、システムのEyeDropperに対応し、画像をアップロードすることなくHEX、RGB、HSL、HSV、CMYK、OKLCH、LABに変換する、無料のブラウザベースのカラーピッカーです。完全なパレットの抽出、WCAGコントラストの確認、グラデーションの作成もできるため、複数の別々のツールは必要ありません。
カラーピッカーの使い方
カラーピッカーを開き、画像を追加し、サンプリングしたい領域にカーソルを合わせます。ルーペがカーソル下のピクセルとライブのコードを表示し、クリックして選択します。すべてのフォーマットがコピーボタンとともにサイドバーに表示され、お気に入りをパレットに固定したり、スポイトで画面上のどこからでも色を選んだりできます。
AIは色を識別できますか？
はい。AI Color Finderは、画像の生のピクセルデータを読み取り、ファイル全体を分析して主要色を見つけることで、色を自動的に識別します。指定した任意のピクセルのHEXやRGBのような正確な値を報告し、パレットエンジンはカラー量子化を用いて写真、スクリーンショット、ロゴの中で最も代表的な色を浮かび上がらせます。すべて即座に、アップロードなしで行われます。
色を識別するにはどうすればいいですか？
色を識別するには、ピクセルをサンプリングしてコードを読み取ります。画像をカラーファインダーにアップロードまたは貼り付け、正確な位置にルーペを移動し、クリックしてHEX、RGB、HSLなどの値を表示します。色が画面上にある場合は、スポイトで直接取得します。画像全体の場合は、パレットジェネレーターを開いて主要色を一度に識別します。
画像から色を見つけるにはどうすればいいですか？
画像をカラーファインダーにドロップし、個々のピクセルをクリックして正確なコードを読み取るか、パレットジェネレーターを開いて主要色を自動的に抽出します。パレット表示では各色が画像のどれだけを占めるかを表示し、セットをCSS、Tailwind、SCSS、JSON、SVG、PNGとしてエクスポートできます。
最高のカラー検出アプリは何ですか？
最高のカラー検出ツールは、何もインストールせずにどこでも動作するものです。AI Color Finderはデスクトップとモバイルのブラウザで動作し、画像とEyeDropper APIを通じて画面から色を検出し、登録不要で完全に無料です。すべての処理が端末上で行われるため、最もプライベートな選択肢でもあります。
どのようにして色を検出するのですか？
色は、デジタル画像内の個々のピクセルの赤、緑、青の値を読み取ることで検出されます。カラーファインダーは画像をキャンバスに読み込み、カーソル下のピクセルをサンプリングし、それらのRGB値をHEX、HSLなどのフォーマットに変換します。パレットツールはさらに進んで、すべてのピクセルを分析し、類似した濃淡を画像の主要色にグループ化します。
画像から色を選ぶには？
画像をカラーピッカーにアップロードまたは貼り付け、欲しいピクセルを正確にクリックします。拡大ルーペがズームインするので正しい位置を狙えます。クリックした瞬間にHEX、RGB、HSL、HSV、CMYK、OKLCH、LABの値がコピー可能な状態で表示されます。
999999は何色ですか？
#999999は、赤、緑、青がそれぞれ153で等しい中間グレーです。HSLでは彩度0%、明度約60%の中性グレーです。落ち着いたテキスト、境界線、無効状態によく使われる色で、白に対して約2.85:1となり、本文テキストのWCAG AAを満たしません。
カラーピッカーを確認するには？
カラーピッカーを確認するには、既知の色を読み込み、返される値が正しいか確かめます。テスト画像を貼り付けるか、カラーコンバーターに#0070F3のようなHEXコードを入力し、RGB、HSLなどの表示が期待どおりか確認します。AI Color Finderでは色を固定して並べて比較し、コピー前に正確なコードを検証することもできます。
00001は何色ですか？
00001は有効な6桁のHEXコードではありません。HEXカラーは#記号の後に正確に6桁を使いますが、00001は5桁しかありません。#000001の意味であれば、かすかに青みがかったほぼ純黒で、#000011はほぼ黒に近いネイビーです。有効なコードにするには#000001のように桁を埋めてください。
666666は何色ですか？
#666666は、赤、緑、青がそれぞれ102で等しい濃いグレーです。HSLでは彩度0%、明度40%で、柔らかなチャコール調になります。白の上では約5.74:1のコントラストに達するため、通常のテキストでWCAG AAを満たします。