HEXカラーからカラーネームコンバーター
ガイド
HEXカラーからカラーネームコンバーター
任意のHEXカラーコードを、最も近いCSS/HTML名前付きカラーに即座に変換します。HEX値入力またはビジュアルカラーピッカーを使用して、標準の140のCSS3名前付きカラーから最も近い一致カラー名を見つけ、類似性スコアと並べて表示されるスウォッチ比較とともに表示します。
使い方
入力フィールドにHEXカラーコードを入力するか、カラーピッカーをクリックして視覚的に色を選択してください。このツールは、RGB距離計算を使用して、上位5つの最も近いCSS名前付きカラーを即座に見つけます。各一致には、カラースウォッチの比較、カラー名、HEX値、および類似性パーセンテージが表示されます。逆引きタブを使用して、カラー名で検索し、そのHEXコードを取得することもできます。
特徴
- 最も近いカラーマッチ – RGB空間でのユークリッド距離を使用して、任意のHEX入力に最も近いCSS3名前付きカラーを見つけます
- トップ5のマッチ – 類似性パーセンテージでランク付けされた5つの最も近いカラー名を表示します
- ビジュアルカラーピッカー – ネイティブブラウザのカラーピッカーで視覚的に色を選択します
- スウォッチ比較 – 入力カラーと各一致した名前付きカラーの並べて表示
- 逆引き – カラー名で検索して、その正確なHEXコードを見つけます
- 140 CSS3カラー – すべての標準CSS/HTML名前付きカラーの完全なデータベース
- ワンクリックコピー – 任意のHEX値を即座にクリップボードにコピーします
- クライアントサイドのみ – すべての処理はブラウザ内で行われ、データはサーバーに送信されません
よくある質問
-
CSS3にはいくつの名前付きカラーが存在しますか?
CSS3は正確に140の名前付きカラー(拡張カラーまたはX11カラーとも呼ばれます)を定義しています。これらは、赤、青、緑などの基本的な色から、コーンフラワーブルー、ダークオリーブグリーン、パパイヤホイップのようなより具体的な色合いまで多岐にわたります。すべてのモダンブラウザは140の名前すべてを認識するため、HEXコードを覚えることなくWeb開発で色を指定する信頼性の高い方法となります。
-
カラーマッチングにユークリッド距離はどのように機能しますか?
RGB空間でのユークリッド距離は、各色をRGB値(0〜255)を軸とする3D空間の点として扱います。2色間の距離は、各チャネルの差の二乗の合計の平方根として計算されます。距離が0の場合は完全一致を意味し、最大可能な距離(黒#000000と白#FFFFFFの間)は約441です。これは、色の類似性の単純かつ高速な近似を提供します。
-
なぜ最も近い名前付きカラーが入力と異なって見えるのですか?
CSS3には、1600万色以上の可能なHEXカラーのうち、名前付きカラーが140色しかありません。そのため、完全一致はまれです。最も近い名前付きカラーは利用可能な最も近いオプションですが、通常とは異なる色合いではその差が大きくなる可能性があります。類似性パーセンテージは、一致が実際にどれだけ近いかを判断するのに役立ちます。95%以上の場合は視覚的に非常に近く、80%未満のマッチでは明らかに異なるように見える場合があります。
-
RGB距離と知覚的色差の違いは何ですか?
RGBユークリッド距離はすべてのカラーチャネルを等しく扱いますが、人間の視覚は特定の色差に対してより敏感です。CIEDE2000(deltaE)のような知覚的色差の式は、人間が実際に色をどのように知覚するかを考慮し、緑への感度を高く重み付けし、色相シフトを考慮します。RGB距離は計算が高速でほとんどのユースケースで十分ですが、deltaEはプロフェッショナルなカラーワークにおいてはより正確です。
恵 スコアボードが到着しました!
スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します!
