CSS色名一覧
カラーコードは、CSSが理解する148の色名の完全なリストです。それぞれにhex・RGB・HSLのコードと、白および黒に対するコントラストが付いています。名前で検索することも、hex値を貼り付けてその色の名前を知ることもできます。系統で絞り込み、色相や明度で並べ替えれば、リスト全体をアルファベット順ではなく、目が感じ取る順序で眺められます。
全 148 色中 148 色
| 色 | 名前 | HEX | RGB | HSL | 白地 | 黒地 |
|---|---|---|---|---|---|---|
| aliceblue | 1.07 | 19.58 | ||||
| antiquewhite | 1.17 | 17.93 | ||||
| aqua | 1.25 | 16.75 | ||||
| aquamarine | 1.22 | 17.16 | ||||
| azure | 1.03 | 20.45 | ||||
| beige | 1.11 | 18.98 | ||||
| bisque | 1.22 | 17.15 | ||||
| black | 21.00 | 1.00 | ||||
| blanchedalmond | 1.17 | 18.02 | ||||
| blue | 8.59 | 2.44 | ||||
| blueviolet | 5.96 | 3.52 | ||||
| brown | 7.08 | 2.96 | ||||
| burlywood | 1.86 | 11.31 | ||||
| cadetblue | 3.05 | 6.88 | ||||
| chartreuse | 1.30 | 16.21 | ||||
| chocolate | 3.63 | 5.78 | ||||
| coral | 2.50 | 8.40 | ||||
| cornflowerblue | 2.97 | 7.06 | ||||
| cornsilk | 1.07 | 19.71 | ||||
| crimson | 4.99 | 4.21 | ||||
| cyan | 1.25 | 16.75 | ||||
| darkblue | 15.30 | 1.37 | ||||
| darkcyan | 4.15 | 5.07 | ||||
| darkgoldenrod | 3.25 | 6.45 | ||||
| darkgray | 2.35 | 8.94 | ||||
| darkgreen | 7.44 | 2.82 | ||||
| darkgrey | 2.35 | 8.94 | ||||
| darkkhaki | 2.07 | 10.15 | ||||
| darkmagenta | 8.50 | 2.47 | ||||
| darkolivegreen | 5.95 | 3.53 | ||||
| darkorange | 2.33 | 9.00 | ||||
| darkorchid | 5.70 | 3.68 | ||||
| darkred | 10.01 | 2.10 | ||||
| darksalmon | 2.31 | 9.11 | ||||
| darkseagreen | 2.15 | 9.76 | ||||
| darkslateblue | 9.07 | 2.32 | ||||
| darkslategray | 8.93 | 2.35 | ||||
| darkslategrey | 8.93 | 2.35 | ||||
| darkturquoise | 1.95 | 10.75 | ||||
| darkviolet | 6.56 | 3.20 | ||||
| deeppink | 3.64 | 5.77 | ||||
| deepskyblue | 2.12 | 9.90 | ||||
| dimgray | 5.49 | 3.83 | ||||
| dimgrey | 5.49 | 3.83 | ||||
| dodgerblue | 3.24 | 6.49 | ||||
| firebrick | 6.68 | 3.14 | ||||
| floralwhite | 1.04 | 20.18 | ||||
| forestgreen | 4.39 | 4.78 | ||||
| fuchsia | 3.14 | 6.70 | ||||
| gainsboro | 1.37 | 15.31 | ||||
| ghostwhite | 1.06 | 19.86 | ||||
| gold | 1.40 | 14.97 | ||||
| goldenrod | 2.24 | 9.38 | ||||
| gray | 3.95 | 5.32 | ||||
| green | 5.14 | 4.09 | ||||
| greenyellow | 1.23 | 17.12 | ||||
| grey | 3.95 | 5.32 | ||||
| honeydew | 1.04 | 20.27 | ||||
| hotpink | 2.65 | 7.93 | ||||
| indianred | 3.98 | 5.28 | ||||
| indigo | 12.95 | 1.62 | ||||
| ivory | 1.01 | 20.81 | ||||
| khaki | 1.28 | 16.40 | ||||
| lavender | 1.23 | 17.06 | ||||
| lavenderblush | 1.10 | 19.03 | ||||
| lawngreen | 1.33 | 15.78 | ||||
| lemonchiffon | 1.06 | 19.81 | ||||
| lightblue | 1.53 | 13.74 | ||||
| lightcoral | 2.59 | 8.10 | ||||
| lightcyan | 1.05 | 19.92 | ||||
| lightgoldenrodyellow | 1.07 | 19.67 | ||||
| lightgray | 1.50 | 14.03 | ||||
| lightgreen | 1.42 | 14.82 | ||||
| lightgrey | 1.50 | 14.03 | ||||
| lightpink | 1.65 | 12.71 | ||||
| lightsalmon | 1.99 | 10.56 | ||||
| lightseagreen | 2.62 | 8.01 | ||||
| lightskyblue | 1.72 | 12.24 | ||||
| lightslategray | 3.64 | 5.77 | ||||
| lightslategrey | 3.64 | 5.77 | ||||
| lightsteelblue | 1.78 | 11.80 | ||||
| lightyellow | 1.02 | 20.63 | ||||
| lime | 1.37 | 15.30 | ||||
| limegreen | 2.12 | 9.91 | ||||
| linen | 1.12 | 18.67 | ||||
| magenta | 3.14 | 6.70 | ||||
| maroon | 10.95 | 1.92 | ||||
| mediumaquamarine | 1.93 | 10.88 | ||||
| mediumblue | 11.16 | 1.88 | ||||
| mediumorchid | 3.94 | 5.33 | ||||
| mediumpurple | 3.76 | 5.58 | ||||
| mediumseagreen | 2.67 | 7.88 | ||||
| mediumslateblue | 4.15 | 5.06 | ||||
| mediumspringgreen | 1.39 | 15.14 | ||||
| mediumturquoise | 1.86 | 11.27 | ||||
| mediumvioletred | 5.42 | 3.87 | ||||
| midnightblue | 14.85 | 1.41 | ||||
| mintcream | 1.02 | 20.57 | ||||
| mistyrose | 1.20 | 17.44 | ||||
| moccasin | 1.23 | 17.02 | ||||
| navajowhite | 1.29 | 16.30 | ||||
| navy | 16.01 | 1.31 | ||||
| oldlace | 1.08 | 19.38 | ||||
| olive | 4.20 | 5.01 | ||||
| olivedrab | 3.81 | 5.52 | ||||
| orange | 1.97 | 10.63 | ||||
| orangered | 3.44 | 6.10 | ||||
| orchid | 2.89 | 7.27 | ||||
| palegoldenrod | 1.25 | 16.76 | ||||
| palegreen | 1.27 | 16.59 | ||||
| paleturquoise | 1.29 | 16.29 | ||||
| palevioletred | 3.11 | 6.75 | ||||
| papayawhip | 1.13 | 18.56 | ||||
| peachpuff | 1.31 | 15.98 | ||||
| peru | 2.99 | 7.02 | ||||
| pink | 1.54 | 13.65 | ||||
| plum | 2.07 | 10.15 | ||||
| powderblue | 1.43 | 14.65 | ||||
| purple | 9.42 | 2.23 | ||||
| rebeccapurple | 8.41 | 2.50 | ||||
| red | 4.00 | 5.25 | ||||
| rosybrown | 2.81 | 7.46 | ||||
| royalblue | 4.85 | 4.33 | ||||
| saddlebrown | 7.10 | 2.96 | ||||
| salmon | 2.50 | 8.40 | ||||
| sandybrown | 2.03 | 10.33 | ||||
| seagreen | 4.25 | 4.95 | ||||
| seashell | 1.07 | 19.55 | ||||
| sienna | 5.62 | 3.74 | ||||
| silver | 1.82 | 11.54 | ||||
| skyblue | 1.74 | 12.06 | ||||
| slateblue | 5.31 | 3.96 | ||||
| slategray | 4.05 | 5.18 | ||||
| slategrey | 4.05 | 5.18 | ||||
| snow | 1.03 | 20.31 | ||||
| springgreen | 1.35 | 15.61 | ||||
| steelblue | 4.11 | 5.11 | ||||
| tan | 1.97 | 10.65 | ||||
| teal | 4.77 | 4.40 | ||||
| thistle | 1.70 | 12.36 | ||||
| tomato | 2.95 | 7.13 | ||||
| turquoise | 1.64 | 12.79 | ||||
| violet | 2.32 | 9.06 | ||||
| wheat | 1.31 | 15.98 | ||||
| white | 1.00 | 21.00 | ||||
| whitesmoke | 1.09 | 19.26 | ||||
| yellow | 1.07 | 19.56 | ||||
| yellowgreen | 1.88 | 11.15 |
CSS色名一覧はどう動きますか？
CSSには148のカラーキーワードがあります。体系立てて作られたのではなく、積み重なったものです。16は当初のHTML 4パレットから来ており、そのパレットはVGAの16色が元になっています。残る130は、X11ウィンドウシステムのrgb.txtから来ました。1980年代を通じてMITで、必要になるたびに色に名前を付けては集めていったファイルです。だからgrayとgreyの両方が存在し、darkgrayがgrayより明るく、そしてrebeccapurple（2014年にEric Meyerの娘を偲んで追加された）だけが由来の物語を持つのです。
darkgrayがgrayより明るい理由
grayは#808080で、HTML 4パレットの中間点です。darkgrayは#a9a9a9で、こちらの方が明るい。由来が違いうち潰しされなかったのは、誰かが気づいた頃には、どちらかを直すと使っているページがすべて壊れてしまうからです。仕様を読まずに表を生成しただけのカラーツールを見抜く、最も確実な方法がこれです。
名前順ではなく色相順に並べる理由
アルファベット順は色を選ぶには役に立たず、名前の分かっている色を探すには最適です。色相順に並べると、リストは目が期待する順序になります。赤がまとまり、次にオレンジが来て、色相環を一周していく。これが「この色の近くには何があるのか」に答えてくれる見方です。使う色相はHSLの角度ではなくOKLChの角度なので、グループ分けは計算の結果ではなく、色の見た目に一致します。
コントラストの列
各行には、白および黒に対するWCAG 2.xの比率が付いています。この数値が、その色でテキストを載せられるかどうかを決めます。装飾以外の用途でこのリストの大部分をあきらめさせる、最速の方法でもあります。148色のうち、白背景で4.5:1に達するのは半分にも満たないからです。
色名またはhex値
navy
その色の全コード
hex #000080 rgb rgb(0 0 128) hsl hsl(240 100% 25.1%) on white 16.01 : 1 on black 1.31 : 1
CSS色名一覧が対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| 148 | 個数 | CSS Color 4 | 名前付きの色の数です。灰色の綴りが2種類ある場合、それぞれ別のキーワードとしてカウントします。通常引用される147という数値は、rebeccapurpleが追加される前のものです。 |
| gray / grey | 別名 | 両方有効 | すべての灰色のキーワードには両方の綴りが存在し、同じ値です。CSSは常にどちらの綴りも受け入れます。 |
| darkgray | #a9a9a9 | — | gray(#808080)より明るい色です。HTML 4とX11のパレットを統合した際の名残で、変更すると既存のページが壊れるため保持されています。 |
| rebeccapurple | #663399 | 2014 | X11からの導入以降で追加された唯一のキーワードで、Rebecca Meyerを記念して名付けられました。彼女の父親が使用していた値のエイリアスです。 |
| aqua / cyan | #00ffff | 同一 | fuchsiaとmagentaと同様に、同じ値で2つの名前が存在します。両方のペアは2つのソースパレットから残っています。 |
| transparent | キーワード | rgba(0,0,0,0) | 色が有効な場所ならどこでも使用できます。このリストに含まれていないのは、参照する値を持たないためです。 |
| コントラスト | 比率 | #fff / #000との比較 | WCAG 2.xコントラスト比です。4.5:1が通常テキストの最小値ですが、これらのキーワードの半数未満が白背景でこの値を達成します。 |
| 色相順 | OKLCh | 度 | 知覚的な色相角度でソートされており、HSLではありません。そのため、ここでは赤が0°ではなく29°に位置しています。 |
よくある質問
redのhexコードは何ですか？
#FF0000です。rgb(255 0 0)、hsl(0 100% 50%)と同じ色です。当初のHTML 4キーワード16色の1つです。知っておくと役立つ点：純粋な#FF0000は彩度の非常に高い赤で、白背景では振えてテキストとして読みにくい色です。白背景でのコントラストは4.0:1までしかなく、本文テキストとしてはWCAG AAを満たしません。多くのUIでは#C62828か、それより暗い色を使うことになります。
ネイビーのhexコードは何ですか？
#000080です。CSSキーワードのnavyで、rgb(0 0 128)、ちょうど半分の強度の青です。非常に暗く、白背景では16.0:1になるため、明るい背景のテキストには最適ですが、暗い背景ではほとんど読めません。ブランドパレットで使われる明るめのネイビーは、通常このキーワードではなく、#1B3A6Bあたりです。
darkgrayがgrayより明るいのはなぜですか？
由来が違うからです。grayはHTML 4パレットの#808080、darkgrayはX11のrgb.txtによる#A9A9A9です。1990年代後半にCSSが2つのリストを統合したとき、この矛盾はすでにブラウザに出荷済みだったため、直さずそのまま残されました。色のリファレンスが仕様からの写しなのか、誰かの思い込みで生成されたのかを見分ける、最高のテストです。
CSSの色名はいくつありますか？
148のキーワード、つまり139の異なる色の値です。差は、つづりが2通りあるグレー系と、aqua/cyan、fuchsia/magentaの各ペアです。よく見かける147という数字は、2014年に仕様に追加されたrebeccapurpleより前のものです。
CSSではhexコードの代わりに色名を使えますか？
使えます。色が有効な場所ならどこでもで、20年以上前からすべてのブラウザが全キーワードに対応しています。実用上の難点は、名前が体系化されていないことです。darkblueとblueの間には当てにできる関係がなく、一貫した明度の尺度もなく、補間の基準もありません。デザインシステムには、自分で生成した値が向いています。手早いプロトタイプやデバッグ用の枠線なら、`outline: 2px solid hotpink`の方がどんなhexより速く打てます。
hex色の名前を調べるには？
検索ボックスに貼り付けてください。フィルターは名前だけでなくhex値にも一致するので、#4169e1と入力すればroyalblueが見つかります。キーワードに完全一致しない値は何も返しません。これは近似検索ではなく完全一致の値であり、#4169e2が'royalblue'だと答えるツールは、まさにコードに貼り付けようとしている値について嘘をついていることになります。