色の名前を調べる

Q: Web セーフ カラーと Pantone 名の違いは何ですか?

ウェブ セーフ カラー (EN) は、256 色ディスプレイ時代の 216 階調の固定セットで、古いモニターで同じように表示されるように選択されています。 Pantone の名前は、 印刷物制作で使用される物理的なインクの配合を表します。 2 つのシステムは相互にマッピングされません。

Q: 色名ファインダーは色盲のユーザーに役立ちますか?

フォレスト グリーンのような名前では色相を視覚的に区別する必要がないため、見本ではなくテキスト ラベルを返すと便利です。色覚異常を矯正するものではありません。 名前ファインダーと色覚異常シミュレーション機能を組み合わせることで、単純な名前付けではできないことをカバーできます。

画像を読み込む

クリックまたはドラッグして選択

色の情報

画像を読み込んで開始してください

Bogdan Sandu (EN) 著 · 公開 2025 年 10 月 13 日 · 最終更新日 2026 年 9 月 14 日

この色名検索ツールは、画像に含まれる色の名前を調べます。画像を読み込み、任意のピクセルにカーソルを合わせると、最も近い名前付きの色と、その16進カラーコード、RGB値がパネルに表示されます。画像がブラウザの外に送信されることはありません。

機能:

ファイルピッカーまたはドラッグアンドドロップによって、ブラウザが表示できるあらゆる画像を受け入れます
カーソルを置くとカーソルの下のピクセルを読み取り、クリックするとピクセルをロックします
赤や青からワインベリー、ビザンチウム、レーザーレモンまで、259 の名前付きカラーとピクセルを照合します。
CIEDE2000 の色差が最小の名前を選択するため、生の RGB 距離ではなく人々の色の見え方に基づいて一致が行われます。
ワンクリックで名前、16 進数、または RGB 値をクリップボードにコピーします

このカラーネームファインダーの使い方

アップロード領域をクリックするか、そこに画像をドロップします。 JPEG、PNG、WebP、GIF はすべて機能します。
カーソルを画像上に移動します。カーソルを置くと、見本と 3 つの値が更新されます。
クリックしてピクセルをロックします。値は、別の場所をクリックするまで保持されます。
[名前]、[16 進数]、または [RGB] の横にあるコピーボタンを使用します。最初からやり直すには、[新しい画像を追加] をクリックします。

コーンフラワーブルーのピクセルは次のように返されます。

Name  Cornflower Blue
Hex   #6495ED
RGB   100, 149, 237

名前付きの色の間にあるピクセルは最近傍を取得します。 #6A94E8 などのわずかに異なる青はコーンフラワーブルーを返し、#2E8B57 はシーグリーンを返します。 #1B1F3B のような濃いネイビーは、リスト内で最も近いエントリであるため、濃い紫を返します。

試合は 3 つのステップで実行され、すべてデバイス上の JavaScript で実行されます。ピクセルを sRGB から CIELAB に変換し、259 の各エントリまでの CIEDE2000 距離を計算し、最小値を返します。

ツールでできないこと

テキスト入力機能はありません。すでに持っている 16 進数または RGB コードに名前を付けるには、そのコードを HEX から RGB コンバータに値として貼り付けるか、色の 1 ピクセルのスクリーンショットを作成してアップロードします。
16進数とRGBのみを表示します。 HSL の場合は、HSL から RGB コンバータを逆に経由して 16 進数を実行します。
他のウィンドウやタブから色を選択することはできません。まずスクリーンショットを撮ります。
259 の名前は厳選されたリストであり、Pantone、RAL、または塗料のブランド名ではありません。名前は説明であり、製品コードではありません。
コントラストをチェックしたり、色覚異常をシミュレートしたりすることはありません。アクセシブルなカラーパレットジェネレーターはコントラストをカバーします。

色の名前とは何ですか?

色名は、標準化された表色系内の特定の色の値のセットに割り当てられる、人間が判読できる識別子です。

「クリムゾン」、「スレートブルー」、「フォレストグリーン」などの名前は、色を記憶に残り、伝えやすくします。 #DC143C のような数値コードは正確ですが、ほとんどの人にとっては意味がありません。

W3C は、ブラウザが広く認識できる 148 の名前付き色 (EN)を CSS で定義しています。これらの名前は、特定の 16 進コードに直接マッピングされます。

業界が異なれば、使用する命名システムも異なります。 Pantone (EN) は、印刷および製品デザインを提供します。 RAL (EN) は産業用アプリケーションの主流を占めています。 NCS (EN) カラーシステムはアーキテクチャ仕様を構成します。

カラーネームファインダーとは何ですか?

カラー名ファインダーは、色の値を取得し、その最も近い一致する人間が判読できる名前を返すツールです。

16 進コード、RGB 値、または画像からサンプリングされたピクセルを入力すると、数値文字列の代わりに「トマト」や「スチールブルー」などの値が返されます。

これはパレットビルダーではなく、新しい配色を生成しません。

その仕事のひとつが翻訳です。数値を入力、名前を出力。

このカテゴリのほとんどのツールは、その場でラベルを作成するのではなく、名前付き色の事前定義された固定リストから取得します。入力は通常、次の 3 つの方法のいずれかで届きます。

16 進数、RGB、または HSL コード入力
写真から名前を取得するための画像アップロード。これが上記のツールの仕組みです
画面上の色またはスポイトで選択

通常、出力には、一致した名前、元のコード、および場合によっては一致が実際にどれだけ近いかを示す信頼スコアが含まれます。

ColorHexa (EN) は、実際のこの良い例です。 16 進コードを入力すると、構成を必要とせずにすぐに名前が返されます。

カラーネームファインダーとカラーピッカー: 違いは何ですか?

カラーピッカーは、色から数値を抽出するだけです。

カラー名ファインダーは、その値をさらに一歩進めて名前にマッピングします。

カラーピッカー: 16 進数、RGB、または HSL 数値のみを出力します。

カラー名ファインダー: は、通常は番号と一緒に名前を出力します。

複数のツールが両方の機能を 1 つのインターフェイスに統合しているため、日常使用では両者の境界があいまいになります。

Google Chrome の組み込みインスペクタには、スポイト付きのカラーピッカーが付属しています。数値で停止し、名前付けは完全に別のツールに任せます。

この違いが特に重要になるのは、デザインを引き継ぐときです。仕様書に「cornflowerblue」と書けば、コメント欄に#6495EDを貼り付けるよりも、色を素早く伝えられます。そのメモが、技術者以外の関係者も読むインターフェースデザイン (EN)の資料に使われる場合は、なおさらです。

カラー名ファインダーはどのような色の命名基準を使用しますか?

色名ファインダーは、固定された命名基準から語彙を抽出します。選択した標準によって、語彙と一致の精度の両方が設定されます。

最も頻繁に表示されるのは、X11、Pantone、RAL、ISCC-NBSの 4 つのシステムです。

標準	統治者	おおよその規模	主な用途
X11 (EN) / CSS	ワールドワイドウェブコンソーシアム	148人の名前	ウェブとUIのデザイン
Pantone (EN)	Pantone LLC	2,000色以上	印刷とブランディング
RAL Classic (EN)	RAL gGmbH	216色	産業、建築
ISCC-NBS (EN)	社会間色彩評議会	267 カテゴリ	科学的な色の記述
このツール	厳選されたリスト	259人の名前	画像内の色の名前付け

ブラウザベースの無料ツールのほとんどは、デフォルトで X11 リストを使用します。これは、W3C の CSS カラーモジュールレベル 4 (EN) 仕様で形式化された CSS (EN) に直接組み込まれているためです。このツールは、代わりに独自に厳選した 259 名の名前のリストを使用します。

Pantone と RAL は完全にブラウザの外側にあります。どちらも、画面のピクセルではなく、インクやペイントなどの物理的なマテリアル向けに構築されたライセンスシステムです。

塗料のブランドが事態をさらに複雑にします。 Sherwin-Williams と Behr はそれぞれ独自の命名システムを実行しているため、Agreeable Gray (EN) という色見本は、X11、Pantone、または RAL では表示されません。全部。

同じ 16 進コードでも、ツールがどの標準に基づいて構築されているかに応じて、異なる名前が付けられる場合があります。これが、2 つの色名ファインダーが同じ入力に対して一致しない場合がある実際の理由です。

カラーネームファインダーはどのようにして色と名前を照合するのでしょうか?

ほとんどの色名検索では最近傍検索が使用されます。これらは入力色を取得し、それを名前付けデータベース内のすべてのエントリと比較し、最も近い名前を返します。

より優れたツールでは、「最も近い」は生の RGB 単位で測定されません。

色はまずCIELABまたは同様の知覚的に均一な空間に変換され、次にDelta E (EN)と呼ばれる式を使用して比較されます。これは、コンピューターが違いを保存する方法ではなく、人間の目がどのように違いを認識するかを近似しています。

入力を sRGB から CIELAB または CIE XYZ に変換します
リスト内のすべての名前付き色までのデルタ E 距離を計算します。
距離が最小の名前を返します

通常、デルタ E が約 2 以下になると、ほとんどの人にとって 2 つの色を区別するのが難しくなります。このツールは、2001 年改訂の公式である CIEDE2000 を使用しており、青と中間の範囲における古いバージョンのバイアスを修正します。

Delta E の代わりに単純な RGB 距離を実行するツールでは、色相の大きな不一致が頻繁に誤って発生します。これは、人間の知覚と生のピクセル計算が異なる青と緑の範囲で特に顕著に現れます。

Name That Color (EN) は開発者の Chirag Mehta によって構築されたプロジェクトで、一般的な色の名の厳選されたリストに対して同じ最近傍ロジックを実行します。

一部のツールは、API (EN) を通じてこの一致ロジックを公開します。開発者は、ネーミングデータベース全体をブラウザに送信する代わりに、サーバー側でルックアップを実行できます。

カラーネームファインダーはどのような入力方法を受け入れますか?

入力方法によって、最初に値がツールにどのように入力されるかが決まります。多くの色名ファインダーは一度に複数をサポートします。これは画像のみです。

16 進数および RGB/HSL コード入力

16 進数: #6495ED のような 6 桁のコード。デザインツールから貼り付けられる最も一般的な形式です。

RGB: 赤、緑、青を表す 0 ～ 255 の 3 つの数値。

HSL: 色相、彩度、明度。人が声に出して色を説明する方法に近い。

3 つすべてを受け入れるように構築されたツールは、通常、試合が実行される前に舞台裏で HSL から RGB への変換を実行します。命名データベース自体は RGB または 16 進数で保存されます。

画像のアップロード

写真またはデザインファイルをアップロードすると、ツールは入力されたコードを待つことなくピクセルを直接サンプリングします。

これに含まれる単純なツールは、ブラウザに組み込まれたキャンバスピクセル読み取りロジックを使用して、クリックポイントの下の色を取得します。

より高度な場合は、最初に画像全体に対してK 平均法クラスタリングを実行し、各色に名前を付ける前に主要な色を抽出します。

JPEG と PNG、最も一般的な 2 つのアップロード
WebP、最新のエクスポートツールから一般的になりつつある
SVG (ただし、フラットベクターは写真よりも予想どおりにサンプルを埋めます)

印刷用にエクスポートされたファイルは、RGB ではなく CMYK で届くことがあります。ほとんどの名前付けデータベースは RGB のみを認識するため、CMYK から RGB への変換ステップは、マッチングが行われる前に実行する必要があります。

スポイトと画面の色の選択

ブラウザベース: Chrome およびその他の Chromium ブラウザには、組み込みの EyeDropper API (EN) が付属しており、ユーザーは拡張機能をインストールしなくても、開いているアプリで画面上の任意のピクセルをクリックできます。

デザインソフトウェア: Adobe Photoshop と GIMP には、キャンバスから直接値を取得するネイティブのスポイトツールが含まれています。

画面選択では入力を完全にスキップします。そのため、書かれたコードとしてではなく、目に見える場所に色がすでに存在する場合に、最も高速な入力方法になります。

カラーネームファインダーはどのくらい正確ですか?

精度は、距離の計算方法と、名前付けデータベースの実際の大きさの 2 つの要素によって決まります。

リストの密度が高くなると、同様の色合いの間に細い線が描画されます。 148 件の名前リストでは、2 つの密接に関連したブルースを同じ名前で呼びますが、2,000 件以上の名前リストではそれらを区別できます。

CSS カラーモジュールレベル 4 (EN) 仕様の 148 の名前付きカラー
Pantone Matching System (EN) ライブラリの 2,000 以上の色
RAL クラシック (EN) コレクションの 216 色
ISCC-NBS (EN) 命名システムによって定義される 267 のカテゴリ
このツールのリストには 259 の名前があります
約 2 デルタ E が、一般的な、わずかに認識できる差異のしきい値です。

148 の名前の CSS リストで実行されるツールは、Pantone の完全なライブラリに対して実行されるツールよりも常に正確さが劣ると感じられます。これは単に、選択できる名前が少ないためです。

画面のキャリブレーションにより、ドリフトの層がさらに追加されます。同じ 16 進コードでも、モニターに応じて、わずかに暖かく表示されたり、涼しく表示されたりすることがあります。これにより、基礎となる数字がまったく変わらない場合でも、認識される一致が変化します。

プロジェクトの色の命名基準を選択する

適切な標準は、ブラウザ、印刷されたページ、ペイントやパウダーコーティングなどの物理的な素材など、色が実際にどこに配置されるかによって異なります。

Web および UI デザインの場合

X11 / CSS は、追加のライブラリを必要とせずに CSS によって名前が直接認識されるため、ブラウザで表示されるものすべてのデフォルトです。

無料ですべてのブラウザに組み込まれています
名前は、開発者がコードに貼り付けることができる 16 進値に直接マッピングされます
名前が 148 個に制限されているため、近い色合い間のニュアンスが失われます

色を選択したら、その色をデザインファイルからコードに移動することは、通常、RGB から 16 進数への変換を意味するため、CSS が期待するものと一致します。

印刷とブランディング用

Pantone がここで優勢なのは、X11 が決して意図して作られていなかった問題を解決するためです。同じ色を、プリンター、素材、国が異なっても同じに見えるようにします。

長所: 制作全体での厳密な色の一貫性、はるかに大規模なライブラリ、Pantone 独自の拡張機能を介した Adobe Illustrator、InDesign、Photoshop への直接統合。

短所: システムにはライセンスが必要で、物理的なガイドには費用がかかり、ブラウザや CSS ファイルにとってネイティブな意味はありません。

RAL は建築や工業製品でも同様の役割を果たしており、粉体塗装、看板、印刷物ではなく製造されたものに好まれています。

長所: 非常に正確な番号付けシステムと、ヨーロッパ全土でのコーティングとプラスチックの標準リファレンスです。

短所: 産業や建築の文脈以外ではほとんど知られておらず、Pantone と同様のライセンス摩擦が生じます。

アクセシビリティとコントラストの仕事のために

ここでもX11 名と CSS 名が実用的な選択肢として残ります。アクセシビリティに関するドキュメントは通常、開発者がスタイルシートに入力するのと同じキーワードを参照する必要があります。

名前ファインダーとアクセス可能なカラーパレットジェネレーターを組み合わせると、選択した名前がコントラスト要件もクリアする組み合わせに関連付けられます。これは、最初に名前を選択し、後からコントラストをチェックするよりも簡単です。

色の名前を段階的に見つける方法

どの入力方法を使用してもプロセスは短くなりますが、ソースによっては追加の手順がいくつか発生します。このページのツールは画像ルートをカバーしています。コードルートにはテキストフィールドのあるツールが必要です。

16 進数または RGB コードからの色の名前の検索

準備するファイルやサンプリングするピクセルがないため、これが最速のパスです。

16 進コードまたは RGB 値を入力フィールドに貼り付けます。
ツールで名前データベースの内部色空間に変換させます。
元のコードと一緒に返された名前を読み取ります

よくある間違いが人々をここにつまずかせます。アルファチャネルを含む8 桁の 16 進値を、標準の 6 桁形式用に作成されたフィールドに貼り付けます。

CSS カラーモジュールレベル 4 (EN) 仕様では、透明度に対する 8 桁の 16 進数のサポートが追加されましたが、すべてのカラー名ファインダーがその追加の桁のペアを正しく解析できるわけではありません。

Adobe Color (EN) はこれを適切に処理します。 6 桁の 16 進コードを入力すると、アルファ値にまったく触れずに、最も近い名前付きスウォッチが即座に返されます。

最終的な出力先が画面ではなく印刷物である場合、一致した値はプリンタに近づく前にRGB から CMYK への変換が必要です。

画像から色の名前を見つける

画像ベースのマッチングでは、最初に 1 つのステップが追加され、画像全体から単一のピクセル値を取得します。

画像ファイルをアップロードするか、画像ファイルを受け入れるツールに URL を貼り付けます。
画像上の点をクリックするか、ツールに主要な色を自動検出させます
型指定されたコードに使用されるのと同じ名前付け検索を通じて、そのサンプリングされた値を実行します。

ブラウザベースのツールは通常、アップロードされたファイルからピクセルをサンプリングする前に、アップロードされたファイルを HTML (EN) 画像要素として読み取ります。

JPEG ファイルは、PNG よりも積極的にカラーデータを圧縮します。
スクリーンショットは通常、意図したとおりの色を再現し、圧縮損失はありません

高度に圧縮された JPEG からサンプリングすると、ピクセルについては技術的に正しい名前が返されることがありますが、元のデザイナーが使用した色については正しくありません。

カラー名ファインダーを使用して色のアクセシビリティとコントラストをチェックする

色の名前を付けることと、それが使用可能であることを確認することは、2 つの異なるチェックです。現在、両方を同じインターフェイスで実行できるツールが増えていますが、このページのファインダーは名前にこだわっています。

コントラストの確認は、より広いウェブアクセシビリティ (EN)の取り組みに含まれます。一方、色名検索ツールは、同じ作業のうち名前を付ける部分を担当します。

コントラスト比のチェック

コントラスト比は、前景色とその背景の間の輝度差を測定し、WCAG のカラーコントラスト (EN)要件の一部として正式化されています。

テキストの種類	レベルAA	レベルAAA
通常のテキスト	4.5:1	7:1
大きいテキスト	3:1	4.5:1

WCAG は、これらを達成基準 1.4.3 (EN) の下限として設定します。

「スカイブルー」をレポートする色名ファインダーは、白い背景にスカイブルーのテキストが実際に4.5:1 のしきい値をクリアしているかどうかについては何も示しません。

色覚異常シミュレーション

色覚異常に関する意識 (EN)によると、世界中でおよそ男性 12 人に 1 人 (8%)、女性 200 人に 1 人 (0.5%) が何らかの色覚異常を抱えています。

ほとんどのケースは 3 つのカテゴリのいずれかに当てはまります。

第一色覚、赤色に対する感度の低下
第二盲、緑色に対する感度の低下
三色覚異常、青色に対する感度が低下、他の 2 つよりもはるかにまれ

シミュレーション機能は、選択したパレットに対してこれらの欠陥の 1 つを模倣するフィルターを適用します。これらは、ほとんどの人にとって区別できるように見える 2 つの名前付き色が、赤緑色覚異常を持つ人にとって同じ色合いになるかどうかを示します。

この状態の臨床スクリーニングは依然として石原テスト、つまりシミュレーション機能が診断ではなく視覚的に近似する一連のドットパターンプレートに依存しています。

カラーネームファインダーが動作しない場合

一部の変数は完全にツールの外部にあるため、すべてのステップが正しく実行された場合でも、カラー名ファインダーが失敗する可能性があります。

未調整の広色域ディスプレイでは、同じ 16 進数値が意図したよりも高い彩度で表示されます。ブラウザは、より広い画面上で sRGB 値を常に正しくカラー管理するとは限りません。

圧縮画像形式は、サンプリングが行われる前にピクセルデータを変更します。 JPEG のクロマサブサンプリングでは、ピクセルのブロック全体で色情報が平均化されるため、サンプリングされた点がデザイナーが使用した色からわずかにずれる可能性があります。

物理マテリアルは、名前付けデータベースだけでは解決できない問題、つまりメタメリズムを引き起こします。ある光源の下では一致する 2 つの色が、別の光源の下では一致しなくなります。

ブラウザ機能のギャップにより、入力メソッド全体が完全にブロックされます。 Chrome 95 に同梱 (EN)されている EyeDropper API は、caniuse (EN) によると、Firefox と Safari では引き続きサポートされていません。

マッチングロジック自体は通常、ブラウザ内の JavaScript (EN) で実行されます。ブラウザーが公開していない機能は、その背後にある名前付けデータベースがどれほど優れていても、単純に利用できません。

これによって出力が役に立たなくなることはありません。これは、返される名前が特定の数値の近似値であり、どこかの机の上にある物理的なオブジェクトとの一致が保証されているわけではないことを意味します。

よくある質問：色の名前を調べる

色の名前に世界共通の基準はありますか?

単一の標準は存在しません。 X11、Pantone、RAL、および ISCC-NBS はそれぞれ、異なるメディアに対して独自の名前を定義しています。どれもグローバルな命名機関として機能します。

ほとんどのプロジェクトでは、色が使用される場所に基づいて標準を選択します。

カラー名ファインダーは Pantone または RAL コードを具体的に識別できますか?

これを含むほとんどの無料のブラウザベースのツールは、Pantone や RAL ではなく、X11 またはカスタムで厳選されたリストとのみ一致します。

正確な Pantone または RAL コードを取得するには、標準の Web 名ファインダーではなく、ライセンスを取得したカラーマッチングツールまたは物理的な見本帳が必要です。

Web セーフカラーと Pantone 名の違いは何ですか?

ウェブセーフカラー (EN) は、256 色ディスプレイ時代の 216 階調の固定セットで、古いモニターで同じように表示されるように選択されています。 Pantone の名前は、印刷物制作で使用される物理的なインクの配合を表します。

2 つのシステムは相互にマッピングされません。

色名ファインダーは色盲のユーザーに役立ちますか?

フォレストグリーンのような名前では色相を視覚的に区別する必要がないため、見本ではなくテキストラベルを返すと便利です。色覚異常を矯正するものではありません。

名前ファインダーと色覚異常シミュレーション機能を組み合わせることで、単純な名前付けではできないことをカバーできます。

カラー名ファインダーは実際のペイントの色と正確に一致しますか?

結果は最終的な答えではなく、出発点として扱います。照明、モニターのキャリブレーション、塗料自体の仕上げによって、実際に色の見え方が変わります。

コミットする前に、オンラインでの一致を物理サンプルと比較して確認してください。

色名検索ツールは命名基準の変更をどのように処理しますか?

カラー名ファインダーは、命名基準が変更された後も、一致するデータベースを更新されたリストに再ポイントするだけで機能し続けます。ツール自体には、標準の改訂履歴やバージョン番号を認識する機能は組み込まれていません。

ISCC-NBSの267種類の色名カテゴリは、2,000色以上あるPantoneのライブラリよりも、148色のCSS色名リストに近い規模です。そのため、ウェブ上の略式表現と工業用途の精密さの間にある科学的な中間地点として位置づけられます。

CSS カラーモジュールレベル 4 (EN) は、2026 年 9 月の時点で W3C の推奨草案候補であり、まだ最終的な推奨ではありません。その名前付き色のリストは、rebeccapurple が追加されて以来安定しているため、それに基づいて構築されたファインダーの答えがすぐに変更される可能性は低いです。

名前が確認された後も、ワークフローには別の形式の基礎となる数値が必要になります。そこで、16 進数から RGB への変換が次の実際的なステップになります。