HTML カラー名
すべてのツール
無料
標準 CSS/HTML 名前付きカラー全140色を美しいスウォッチグリッドで参照 — 名前や16進数で検索し、色系統で絞り込み、任意の色の hex、rgb()、hsl() 値をワンクリックでコピーできます。ブラウザ内、無料。
標準 CSS/HTML 名前付きカラー全140色を、hex・RGB・HSL 値とともに表示します。すべて組み込みリファレンスを使ってブラウザ内で動作します — サーバーには何も送信されません。
検索に一致する色がありません。
別の名前や16進値を試してください — 例: RebeccaPurple、#00FF00、teal。
HTML カラー名について
このリファレンスは、AliceBlueからYellowGreenまで、ブラウザが理解する標準のCSS/HTML名前付きカラー140色すべてを、レスポンシブなスウォッチグリッドとして提示します。各スウォッチには色そのものと名前、16進値が表示され、クリックするとhex、rgb()、hsl()の各形式が開き、それぞれワンクリックでコピーできます。
名前または16進値で検索でき、Tomatoと#FF6347は同じスウォッチに到達します。また、Reds、Pinks、Oranges、Yellows、Browns、Greens、Cyans、Blues、Purples、Whites、Grays & Blacksといったファミリーで絞り込むこともできます。おおよその色相が分かっている場合、候補を絞り込む最も速い方法はファミリー表示です。
名前付きカラーは、プロトタイプ、コードの例、SVGの塗り、教材などに便利です。RebeccaPurpleのような名前は、16進の3つ組よりも意図を伝えやすいからです。RGBとHSLの値は各色の16進値からブラウザ内で導出され、検索した内容がサーバーに送信されることはありません。
HTML カラー名の使い方
- 色名または16進値で検索します。例: Tomato、teal、#00FF00。
- ファミリー(Reds、Blues、Graysなど)で絞り込み、1つの色相範囲の色をリストアップします。
- スウォッチをクリックして、16進値を即座にコピーします。
- スウォッチのポップオーバーを開いて、代わりにrgb()やhsl()形式をコピーします。
よくある質問
現代のCSSには140の標準的な名前付きカラーがあり、元々の16色のHTMLカラーを、より大きなX11由来のリストで拡張したものです。現在のあらゆるブラウザが、色を受け付けるすべてのプロパティでこれらすべてをサポートしています。
いいえ。tomato、Tomato、TOMATOはすべて有効で、CSSとHTMLにおいて同一です。ここに示されているキャメルケースの表記は、LightGoldenrodYellowのような複数単語の名前を読みやすくするための慣習的な綴りにすぎません。
色名は例やプロトタイプ、単発のアクセントには最適です。本番のパレットは通常、hex、rgb()、hsl()の値を持つカスタムプロパティとして管理されます。デザインシステムの色は、名前付きカラーと正確に一致することがめったにないからです。機能的には、名前とその16進値は互換です。
CSSはgray/grey、darkgray/darkgreyなど、grayとその派生語の両方の綴りを含んでおり、それぞれのペアを同じ値に対応付けています。そのため、どちらの綴りも間違いではありません。
はい。140色すべてのスウォッチ、検索、ファミリーフィルター、hex/rgb()/hsl()のコピー機能は無料で、すべて完全にブラウザ内で動作します。
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。