色 / 名前

カラー名検索:HexまたはRGBから最も近いCSSカラー名を検索

hex、RGB、またはCSSカラーを入力すると、CIELABで計算した知覚的な色差の順に、148個のCSSカラー名から最も近い色を検索できます。比較用のスウォッチと各カラー名のhex値も表示します。

カラー名検索:HexまたはRGBから最も近いCSSカラー名を検索: 入力したカラーとすべてのCSSカラー名をCIELAB色空間に変換し、色の見た目に基づいて違いを測定します。最も近いカラー名を、色差ΔEの順に表示します。2.3未満では、ほとんどの人が違いを見分けられません。たとえば#3a7bd5は、cornflowerblueに最も近い色です。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。

カテゴリ
日常ツール
実行回数
ブラウザ内で
コスト
無料 · 登録不要
提供状況
すぐに使えます
色名検索ローカル処理

完全にブラウザ内で実行します

最も近いCSS名cornflowerblueΔE 10.7: おおまかに似ているだけ
#3a7bd5入力した色
cornflowerblue#6495ed · ΔE 10.7
dodgerblue#1e90ff · ΔE 13.5
royalblue#4169e1 · ΔE 21.4
steelblue#4682b4 · ΔE 24.4
mediumpurple#9370db · ΔE 27.4
slateblue#6a5acd · ΔE 27.6

色は、距離が等しければ見た目の違いもおおむね等しくなるように設計されたCIELAB色空間で、148種類すべてのCSS色名と比較されます。ほとんどの人が違いを見分けられない場合、距離ΔEはおよそ2.3未満です。スタイルシートでは、hexコードの代わりにcolor: steelblueのようなCSS名を使用できます。

名前の由来

CSSの色名の多くは、1980年代のX11ウィンドウシステムの色リストに由来します。そのため、papayawhipやlightgoldenrodyellowのような名前が存在します。rebeccapurple(#663399)は、Rebecca Meyerを記念して2014年に追加されました。

色の変換

色をHSL、RGBなどの表記に変換するには、色変換ツールをお使いください。

使い方

  1. カラーをhex、rgb()、または名前で入力します。
  2. 最も近いカラー名と、その近さを確認します。
  3. スウォッチを比較し、必要な名前をコピーします。

プライバシーと制限事項

すべての処理はブラウザ内で行われます。

関連ツール

よくある質問

CSSカラー名を使う理由は?

aliceblueからyellowgreenまで、スタイルシートでそのまま使える、標準的で広く知られたカラー名の一覧だからです。

ΔEとは何ですか?

CIELABにおける2つのカラー間の距離です。隣り合わせて比較したとき、ほとんどの人が気づく最小の差はおよそ1で、10を超えるとカラーの違いがはっきり分かります。

greyとgrayが両方表示されないのはなぜですか?

2つはつづりが異なるだけで同じカラーです。そのため、このツールでは各ペアから1つだけ表示します。

無料ツール · ブラウザ内で · アカウント不要