色名とHEXコード検索

色名からHEX、RGB、HSLの値を調べたり、コードから最も近い色名を探せます。CSSの148色すべてについて、濃淡のバリエーションとWCAGコントラスト比も表示します。


色名を入力するか、HEX、RGB、HSLの値を貼り付けてください。4つの形式すべてに対応しています。
クリア

CSSの色名一覧

CSSに組み込まれた148色すべての色名と、そのHEXおよびRGB値です。行をクリックすると上部で開きます。

HEXカラーコードの仕組み

HEXコードは16進数で書かれた3つの数値にすぎません。赤・緑・青がそれぞれどれだけかを、00からFFまでで表します。つまり #FFD700 は赤が最大、緑が255のうち215、青はまったくなしという意味で、目にはこれが金色に見えます。意味を持つのは2桁の組だけなので、#FFF と #FFFFFF はどちらも白になります。

HEX、RGB、HSLの比較

3つとも同じ色を表しますが、伝える情報が異なります。HEXは簡潔で、CSSでは最も一般的な書き方です。RGBは同じ数値を10進数で表したもので、計算に向いています。HSLは色相を彩度と明度から切り離すため、手作業でパレットを組み立てるのがはるかに簡単です。色相はそのままに明度だけ変えれば、調和する濃淡が得られます。

コントラストが重要な理由

文字は、視力の弱い方や暗い画面でも読めるよう、背景から十分に際立っている必要があります。アクセシビリティのガイドラインでは、通常の文字で4.5対1（AA）、より厳しいAAAレベルでは7対1が求められます。大きな文字は3対1で許容されます。このツールは白と黒の両方に対する比率を計算するので、どちらを上に置くべきかがすぐに分かります。

知っておくと便利

  • CSSには148の色名があり、いくつかは重複しています。grey と gray、aqua と cyan はそれぞれ同一です。
  • HEXの短縮形は各組が繰り返しになっている場合にのみ使えます。#FFCC00 は #FC0 と書けますが、#FFD700 は短縮できません。
  • HEXの桁を2つ増やすと透明度を指定できます。#FFD70080 なら金色をおよそ半分の不透明度にしたものです。
  • パレットを作るときは、HSLで色相を固定して明度だけを変えてください。色同士が必ずまとまって見えます。

よくある質問

gold という名前のCSSカラーは #FFD700、すなわち rgb(255, 215, 0) です。金属的な色合いというより明るい黄金色で、単色では本物の金の輝きを再現できないためです。より金属らしく見せたい場合、デザイナーは通常、CSSで darkgoldenrod と呼ばれる #B8860B のような濃い金色と組み合わせます。

上の入力欄に名前を入力すれば、HEX、RGB、HSLの値がまとめて表示されます。CSSの148色すべてに対応しており、逆方向でも使えます。HEXコードを貼り付ければ、最も近い色名とその正確な距離を教えてくれます。

まったく同じ情報を異なる書き方で表しているだけです。HEXは3つのチャンネルをそれぞれ16進2桁で書くので、#FF7F50 は赤255、緑127、青80になります。RGBは同じ数値を10進数で rgb(255, 127, 80) と書きます。どちらが正確ということはなく、HEXはCSSで打つ文字数が少ないだけです。

色相・彩度・明度のことです。色相は0度から360度までの色相環上の位置、彩度は色の鮮やかさ、明度は0%の黒から100%の白までを表します。デザインには最も実用的な形式で、色相を保ったまま明度だけを変えれば、明らかに同じ系統に属する濃淡のセットが得られるからです。

CSSの仕様には transparent を含めて148の色名があります。複数の名前が同一の値を指す場合もあり、特に grey と gray、aqua と cyan、magenta と fuchsia がそうです。HEXとRGBの値を含む一覧はこのページにあります。

アクセシビリティのガイドラインでは、通常の本文で4.5対1以上、大きな文字で3対1以上が求められ、これがAAレベルです。より厳しいAAAレベルでは7対1が必要です。このツールは白と黒それぞれに対する比率を計算し、どちらが基準を満たすかを示すので、読みやすい方をすぐに選べます。

できます。8桁のHEXコードは末尾に2桁のアルファ値を加えるもので、00が完全な透明、FFが完全な不透明です。したがって #FF000080 はおよそ50%の不透明度の赤になります。現行のブラウザはすべて対応していますが、古い rgba() の書き方も依然としてよく使われています。

148の色名は、画面が表示できるおよそ1670万色のごく一部にすぎないからです。入力した値がその正確な点のどれにも当たらない場合、このツールはRGB空間で両者の距離を測って最も近い色名を探し、一致ではなく近似であることをお伝えします。

色のHEXコードを調べるには？

色名を入力すればHEX、RGB、HSLの値が一度に分かり、任意のコードを貼り付ければ最も近いCSSの色名が見つかります。gold は #FFD700、coral は #FF7F50、teal は #008080 です。結果にはシェードとティント、そして黒と白に対するコントラスト比も表示されます。