色名・近似色検索
色名・近似色検索は、入力した色に一番近い「色の名前」を調べたり、色名から色（HEX・RGB）を逆引きしたりできるツールです。#FF6347 のような HEX や rgb(255, 99, 71) を入力すると、CSS で使える名前付きカラー（Web 色名）の中から近い順に候補を表示し、それぞれの HEX・近さ（ΔE）も合わせて確認できます。逆に tomato のような色名を入力すれば、その色の HEX・RGB をすぐに引けます。
HEX・RGB・HSL などのカラーコードを入れると近い色名を、色名を入れるとその色を表示します。
近い CSS カラー名
- dodgerblue完全一致#1E90FF · ΔE 0.000
- cornflowerblue#6495ED · ΔE 0.059
- royalblue#4169E1 · ΔE 0.102
- steelblue#4682B4 · ΔE 0.113
- mediumslateblue#7B68EE · ΔE 0.117
- deepskyblue#00BFFF · ΔE 0.127
- mediumpurple#9370DB · ΔE 0.135
- slateblue#6A5ACD · ΔE 0.149
近い和色（日本の伝統色）
- 青あお#0095D9 · ΔE 0.062
- 露草色つゆくさいろ#38A1DB · ΔE 0.079
- 天色あまいろ#2EA9DF · ΔE 0.092
- 縹色はなだいろ#2792C3 · ΔE 0.093
- 群青色ぐんじょういろ#4C6CB3 · ΔE 0.136
- 浅葱色あさぎいろ#00A3AF · ΔE 0.144
- 藤紫ふじむらさき#8A6BBE · ΔE 0.150
- 納戸色なんどいろ#008899 · ΔE 0.156
「ΔE」は OKLab 色空間での知覚的な近さの目安です（小さいほど近い色）。CIE ΔE2000 とは異なる近似値です。
検索はすべてお使いのブラウザ内で行われ、入力した色が外部サーバーに送信されることはありません。
関連ツール
カラーピッカー
画像から色をスポイトで抽出し、カラーコードを取得できるツール。ルーペで拡大しながらピクセル単位で色を調べられ、HEX / RGB / HSL 切替やパレットのエクスポートに対応。無料・登録不要で、ブラウザだけで完結します。
- デザイン・配色
- 業務効率化
カラーパレット抽出
画像をアップロードするだけで主要な配色（代表色）を自動抽出し、カラーパレットを作成できる無料ツール。HEX / RGB / HSL の確認、各色の占有率表示、色数の調整、CSS変数・SCSS・Tailwind 形式での書き出しに対応。画像はサーバーに送信されず、ブラウザだけで完結します。
- 抽出
- デザイン・配色
配色パレット生成
ベースカラーを1色選ぶだけで、補色・類似色・トライアドなど配色理論に基づくカラーパレットを自動生成する無料の配色ジェネレーター。CSS変数・Tailwind・SCSS・JSON形式でエクスポートでき、コントラストの目安も確認できます。ブラウザだけで完結します。
- ジェネレーター
- デザイン・配色
カラーコード変換
HEX・RGB・HSL・HSV・OKLCH のカラーコードを相互変換できる無料ツール。透明度付きの RGBA・8桁 HEX・HSLA にも対応し、入力した色を全フォーマットへ一括変換してワンクリックでコピーできます。CMYK の参考値も表示。ブラウザだけで完結します。
- コンバーター
- デザイン・配色
コントラストチェッカー
前景色（文字色）と背景色のコントラスト比をリアルタイムに算出する無料のコントラストチェッカー。WCAG 2.1 / 2.2 の AA・AAA 基準への合否判定に加え、合格色の自動提案・色覚特性シミュレーション・APCA にも対応。配色のアクセシビリティをブラウザだけで確認できます。
- チェッカー
- デザイン・配色
- アクセシビリティ
CSSグラデーション生成
色や方向、カラーストップをGUIで操作してCSSグラデーションを自動生成する無料ツール。線形・放射・円錐（conic）グラデーションに対応し、不透明度の調整やCSS変数・Tailwind・SCSS形式での出力、共有URLにも対応。コピペですぐ使え、ブラウザだけで完結します。
- ジェネレーター
- 開発
- デザイン・配色
色名・近似色検索ツールとは？
色名・近似色検索は、入力した色に一番近い「色の名前」を調べたり、色名から色（HEX・RGB）を逆引きしたりできるツールです。#FF6347 のような HEX や rgb(255, 99, 71) を入力すると、CSS で使える名前付きカラー（Web 色名）の中から近い順に候補を表示し、それぞれの HEX・近さ（ΔE）も合わせて確認できます。逆に tomato のような色名を入力すれば、その色の HEX・RGB をすぐに引けます。
「この HEX に近い色の名前は何だろう」「カラーネームから正確な色コードを知りたい」というときに、色 名前 検索・hex color name・色 コード 名前の確認をまとめて行えます。CSS の color プロパティに名前付きカラーで指定したいときや、デザインの色にわかりやすい呼び名を付けたいときに便利です。
数値の近さではなく、人の見た目に近い OKLab 色空間で距離（ΔE）を計算しているため、「目で見て近い色」が上位に並びます。入力欄はカラーコードと色名のどちらでも受け付け、形式を選ぶ必要はありません。ネイティブのカラーピッカーから色を選んだり、名前付きの色を一覧から選んだりすることもできます。
日本語（ja）では、CSS カラー名に加えて和色（日本の伝統色）の近似色も表示します。茜色・浅葱色・山吹色といった伝統色の中から、入力した色に近いものを探したり、和色の名前や読みから HEX を逆引きしたりできます。
検索はすべてお使いのブラウザ内で行われ、入力した色が外部サーバーに送信されることはありません。アカウント登録やインストールなしで、すぐに使えます。
使い方
- 入力欄に HEX・RGB・HSL などのカラーコードを貼り付けます（形式は自動判定されます）。右側のカラーピッカーから色を選ぶこともできます。
- 一番近い CSS カラー名が近い順に表示されます。完全に一致する色名がある場合は「完全一致」と表示されます。
- 色名や HEX のコピーボタンで、必要な値をコピーして CSS やデザインツールに使います。
- 逆に色名から引きたいときは、入力欄に色名（例：tomato）を入れると、その色の HEX・RGB が表示されます。
- 「名前付きの色を一覧から探す」を開くと、CSS カラー名（日本語では和色も）の一覧から色を選んで確認できます。
利用シーン
- デザインカンプの HEX に近い、わかりやすい色名（カラーネーム）を知りたい Web デザイナー。
- CSS の color プロパティを、数値ではなく名前付きカラーで指定したいコーダー。
- tomato や teal などの CSS 色名が実際に何色なのかを HEX・RGB で確認したい開発者。
- ブランドカラーや写真から拾った色に、共有しやすい呼び名を付けたいデザイナー・ディレクター。
- 和色（日本の伝統色）の中から、指定の色に近い色や、名前・読みから HEX を調べたい人。
- 色 名前 検索・hex color name・色 名称 変換をまとめて済ませたいユーザー。
注意点
- 色名は CSS で標準化された名前付きカラー（Web 色名）148 色を対象にしています。色名そのものは CSS のキーワードのため、各言語とも英語表記のまま表示します。
- 近さの指標「ΔE」は、人の見た目に近い OKLab 色空間でのユークリッド距離です。印刷分野で使われる CIE ΔE2000 とは異なる近似値で、上位の並び順の目安としてご利用ください。
- 同じ色を指す別名（aqua と cyan、gray と grey など）は、近似結果では HEX で重複をまとめて 1 件に表示します。逆引きと一覧ではすべての名前を確認できます。
- 和色（日本の伝統色）の近似色は日本語（ja）でのみ表示します。HEX 値は和色大辞典・日本の伝統色などで広く参照される代表値を採用しています。
- 検索・計算はすべてブラウザ内で行われ、入力した色が外部に送信されることはありません。