HTMLカラーネーム一覧
ホーム HTMLカラーネーム
HTMLカラーネーム：全148色のHEX、RGB、HSL、OKLCH | We.Inc
CSSとHTMLの全148色のカラーネームを、HEX、RGB、HSL、OKLCHの値、白・黒に対するコントラスト、最も近いTailwindクラスとともに掲載。色相、明度、色系統で並べ替えられます。
CSSでは aliceblue から yellowgreen まで148の色名が定義されており、どのブラウザーもHTMLとCSSでこれらを理解します。そのうち9つは、gray に対する grey、aqua に対する cyan のように別の名前の異なる綴りなので、実際の色は139色です。下の表では、各色のHEX、RGB、HSL、OKLCHの値、文字のコントラスト、最も近いTailwindクラスを確認できます。
カラーネームに関する基本情報
大文字と小文字は区別される？ いいえ：Red、RED、red はすべて同じです どこで定義されている？ CSS Color Module Level 4 最も新しい色名 rebeccapurple (#663399)、2014年に追加 名前やHEXで検索し、色系統で絞り込み、色相、明度、名前で並べ替えて、どの値もワンクリックでコピーできます。各行には、その色の上で黒と白どちらの文字が読みやすいか、最も近いTailwindの色はどれかも表示されます。
検索ボックスに色名の一部またはHEXコードを入力すると、表が絞り込まれます。 Blue や Brown などの系統を選ぶと、その系統の色だけが表示されます。系統は知覚上の色相でまとめています。 名前順、色相順（スペクトルとして並ぶ）、明度順（暗い色から明るい色へ）で並べ替えられます。 値をクリックするとコピーされます。コントラストの列には、その色の上に白い文字と黒い文字を置いたときの比率が表示されます。 カラーネームはプロトタイプやサンプルには便利ですが、実際のデザインでは通常、正確なブランドカラーの値が必要です。公開前に色名をHEXやカスタムプロパティに置き換えましょう。 誤解を招く名前もあります。darkgray (#A9A9A9) は gray (#808080) より明るく、lightgoldenrodyellow は黄色ではなく淡いクリーム色です。 色名と合わせて transparent や currentColor も使いましょう。これらもCSSのキーワードですが、固定の色ではないため148色には含まれません。 カラーネームを文字色に使う前にコントラストを確認しましょう。yellow、gold、lime など明るい色の多くは、白い背景では基準を満たしません。 よくある質問
HTMLのカラーネームはいくつありますか？
HTMLが使用する CSS Color Module Level 4 には148の色名があります。そのうち9組は同じ色の別名です。aqua と cyan、fuchsia と magenta、そして darkgray と darkgrey のように gray と grey のどちらでも綴れる7つの名前です。そのため、このリストが表す異なる色は139色です。
カラーネームはすべてのブラウザーで使えますか？
はい。148の色名はすべて、現在のすべてのブラウザーでサポートされています。red、navy、teal など HTML 4 の元の16色は何十年も前から使えており、残りは X11 のカラーリストに由来し、こちらも長くサポートされています。
なぜ darkgray は gray より明るいのですか？
色名の出どころが2つあるためです。gray はHTMLで明度50% (#808080) として定義されましたが、darkgray はより古い X11 のカラーリストに由来し、そこでは #A9A9A9 でした。リストが統合されたとき、両方の値がそのまま残されました。
rebeccapurple とは何ですか？
#663399 の色で、CSSの著者 Eric Meyer の娘 Rebecca Meyer を偲んで2014年にCSSに追加されました。CSSに追加された最も新しい色名です。
カラーネームとHEXコードのどちらを使うべきですか？
本番のデザインでは、HEX、RGB、HSL、OKLCHの値を、できればカスタムプロパティとして保存して使いましょう。色名は148の固定された色しか表せないためです。正確さより読みやすさが大切な簡単なテスト、ドキュメント、教材では色名でも問題ありません。
色名の由来
HTML 4 では16の基本色名が定義されていました。black、silver、gray、white、maroon、red、purple、fuchsia、green、lime、olive、yellow、navy、blue、teal、aqua です。ブラウザーは X Window System からはるかに長いリストも取り入れており、CSS3 でそのリストが正式なものになりました。CSS Color Level 4 は rebeccapurple を追加し、残りはそのまま維持しています。 X11 の色名は計算式ではなく人の手で選ばれたため、偏りがあります。白に近い色がたくさんあり、ほとんど同じ緑もいくつかある一方で、名前がまったくない色相もあります。表を色相順に並べると、その空白がはっきりわかります。 追加の列の読み方
OKLCH は、色を明度、彩度（色の鮮やかさ）、色相で表す方式で、同じ幅の変化が同じに見えるよう設計された色空間です。明度だけを変えれば色相の見え方が保たれるため、カラーネームからパレットを作るときに便利です。 コントラストの列は WCAG 2 の計算式を使っています。通常の本文には4.5:1以上、大きな文字には3:1以上が必要です。Tailwindの列には、Tailwindのデフォルトパレットで最も近く見えるクラスを差分の数値とともに表示しています。2未満なら見分けるのは困難です。 名前 HEX RGB HSL OKLCH 白背景 黒背景 最も近いTailwind コピー
全148色を色相順にひと目で
全148のカラーネーム
名前またはHEXで検索
並べ替え
名前
色相（スペクトル）
明度（暗い順）
{n}件を表示
· {v} をコピーしました
色系統
すべて
CSSとHTMLのカラーネーム
色見本
差分 {d}
緑色のコントラスト値は4.5:1を満たしており、本文に十分です。Aa のサンプルには、黒と白のうち読みやすいほうを使っています。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る