HEXから色名を検索
#ff5733は最も近い色名tomato（#ff6347）と判定され、距離は23.323808です。似てはいても同じ色ではないことが分かります。hexコードに分かりやすい名前を付けられます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- Hex
- #ff5733
- 入力HEX
- #ff5733
- 名前
- tomato
- 名前付き Hex
- #ff6347
- 距離
- 23.323808
HEXコードは正確ですが、文書やレビューでは説明しにくいことがあります。本ツールは3桁または6桁の値を最も近いCSS/X11の単色へ対応させます。色名、正規HEX、双方のRGB、距離、完全一致かどうかを返すため、近似を同一色と誤解せずに扱えます。
有効な16進カラーを入力してください
hex欄へ<code>#ff5733</code>のような6桁、または<code>#f53</code>のような3桁を入力してください。先頭の#は任意で、大文字と小文字のどちらも使用できます。短縮形は各桁を繰り返して展開します。
透明度は単色間の距離に含まれないため、4桁と8桁のアルファ形式は受け付けません。<code>rgb()</code>、<code>hsl()</code>、変数、色名も対象外です。別の表記は事前に3桁または6桁のHEXへ変換してください。
最も近い色名の選び方
入力を0から255の赤、緑、青へ分解し、すべてのCSS/X11単色にも同じ処理を行います。各チャンネルの差を二乗して合計し、その平方根を求めます。最小距離が採用され、0なら完全一致です。
この方法は再現可能ですが、人間の色知覚を完全には表しません。grayとgrey、aquaとcyanなど、同じRGBを持つ別名もあります。パレットはアルファベット順なので、同距離なら常に先の名前を選びます。
元の色を保ったまま活用してください
返された名前は便利な説明として扱い、自動的な置換とは考えないでください。応答には正規化したHEXとRGBを残し、選ばれた名前、そのHEXとRGB、距離、完全一致状態を加えます。デザイントークンの表示、パレット正規化のしきい値判定、サポートでの説明に利用できます。
見た目の忠実性が必要なら元のHEXを保持し、ブラウザーの色名へ統一する場合は独自の距離基準を適用してください。ネットワーク、乱数、時計を使わないため、再現可能なテストにも適します。
活用例
デザイントークンへ色名を追加
元のHEXを保持しながら、読みやすいCSS色名を併記できます。
取り込んだパレットを確認
正規化の前に標準ブラウザー色との近さを測定できます。
色の伝達を明確化
不透明なコードを課題、文書、サポートで使える安定した名前へ変換します。
よくある質問
どのHEX形式を利用できますか？
先頭の#が任意の3桁または6桁で、大文字と小文字の両方に対応します。
最も近い色はどう計算しますか？
赤、緑、青の各チャンネルにおけるユークリッド距離を最小化します。
予想外の名前になるのはなぜですか？
RGB距離は知覚モデルではなく、CSS色名の分布も均一ではないためです。
#ff5733は何という色名になりますか？
最も近い色名はtomatoで、その色は#ff6347です。距離は23.323808なので、近いものの完全に一致するわけではありません。
距離が0とはどういう意味ですか？
入力した色が、その名前の色とまったく同じであることを意味します。数値が大きくなるほど、名前は近い色を表す目安にとどまります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/name-lookup \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#ff5733"}'const res = await fetch("https://api.kit.forhosting.com/color/name-lookup", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#ff5733"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/name-lookup",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#ff5733"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/name-lookup", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#ff5733"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#ff5733"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/name-lookup", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"hex": "#ff5733"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.name_lookup",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
有効な16進カラーを入力してください
桁数違い、不正文字、空値、文字列以外には<code>invalid_input</code>を返します。そのため、不正なトークンが別の色へ黙って変換されることはありません。
最も近い色名の選び方
APIとブラウザーは、どの実行環境でも安定して同じ結果を返します。
元の色を保ったまま活用してください
このページではローカル実行でき、自動APIリクエストは1回$0.002です。
技術的な質問
アルファ透明度に対応しますか？
いいえ。単色パレットのため、4桁と8桁の形式は拒否します。
同距離の場合はどうなりますか？
アルファベット順で確認し、先のCSSキーワードを選びます。
APIリクエストの料金はいくらですか？
1回$0.002です。ブラウザーでは同じ計算をローカルで実行します。