コンテンツへスキップ

HTML・CSSのカラーネーム

tomatoやrebeccapurpleなど、どのブラウザでも使える名前付きの色をすべて掲載。HEX・RGB・HSL・OKLCHのコードをすぐにコピーできます。

コピー形式

CSSとHTMLの名前付きカラー148色

color: tomato;のように名前を書くだけで、どのブラウザでも使えます。大文字・小文字は区別されません。

赤10

詳細を見る

  • IndianRed

    #CD5C5C

  • LightCoral

    #F08080

  • Salmon

    #FA8072

  • DarkSalmon

    #E9967A

  • LightSalmon

    #FFA07A

  • Crimson

    #DC143C

  • Red

    #FF0000

  • FireBrick

    #B22222

  • DarkRed

    #8B0000

  • Maroon

    #800000

オレンジ5

詳細を見る

  • Coral

    #FF7F50

  • Tomato

    #FF6347

  • OrangeRed

    #FF4500

  • DarkOrange

    #FF8C00

  • Orange

    #FFA500

黄11

詳細を見る

  • Gold

    #FFD700

  • Yellow

    #FFFF00

  • LightYellow

    #FFFFE0

  • LemonChiffon

    #FFFACD

  • LightGoldenrodYellow

    #FAFAD2

  • PapayaWhip

    #FFEFD5

  • Moccasin

    #FFE4B5

  • PeachPuff

    #FFDAB9

  • PaleGoldenrod

    #EEE8AA

  • Khaki

    #F0E68C

  • DarkKhaki

    #BDB76B

緑23

詳細を見る

  • GreenYellow

    #ADFF2F

  • Chartreuse

    #7FFF00

  • LawnGreen

    #7CFC00

  • Lime

    #00FF00

  • LimeGreen

    #32CD32

  • PaleGreen

    #98FB98

  • LightGreen

    #90EE90

  • MediumSpringGreen

    #00FA9A

  • SpringGreen

    #00FF7F

  • MediumSeaGreen

    #3CB371

  • SeaGreen

    #2E8B57

  • ForestGreen

    #228B22

  • Green

    #008000

  • DarkGreen

    #006400

  • YellowGreen

    #9ACD32

  • OliveDrab

    #6B8E23

  • Olive

    #808000

  • DarkOliveGreen

    #556B2F

  • MediumAquamarine

    #66CDAA

  • DarkSeaGreen

    #8FBC8F

  • LightSeaGreen

    #20B2AA

  • DarkCyan

    #008B8B

  • Teal

    #008080

シアン8

詳細を見る

  • Aqua

    #00FFFF

  • Cyan

    #00FFFF

  • LightCyan

    #E0FFFF

  • PaleTurquoise

    #AFEEEE

  • Aquamarine

    #7FFFD4

  • Turquoise

    #40E0D0

  • MediumTurquoise

    #48D1CC

  • DarkTurquoise

    #00CED1

青17

詳細を見る

  • CadetBlue

    #5F9EA0

  • SteelBlue

    #4682B4

  • LightSteelBlue

    #B0C4DE

  • PowderBlue

    #B0E0E6

  • LightBlue

    #ADD8E6

  • SkyBlue

    #87CEEB

  • LightSkyBlue

    #87CEFA

  • DeepSkyBlue

    #00BFFF

  • DodgerBlue

    #1E90FF

  • CornflowerBlue

    #6495ED

  • MediumSlateBlue

    #7B68EE

  • RoyalBlue

    #4169E1

  • Blue

    #0000FF

  • MediumBlue

    #0000CD

  • DarkBlue

    #00008B

  • Navy

    #000080

  • MidnightBlue

    #191970

紫18

詳細を見る

  • Lavender

    #E6E6FA

  • Thistle

    #D8BFD8

  • Plum

    #DDA0DD

  • Violet

    #EE82EE

  • Orchid

    #DA70D6

  • Fuchsia

    #FF00FF

  • Magenta

    #FF00FF

  • MediumOrchid

    #BA55D3

  • MediumPurple

    #9370DB

  • RebeccaPurple

    #663399

  • BlueViolet

    #8A2BE2

  • DarkViolet

    #9400D3

  • DarkOrchid

    #9932CC

  • DarkMagenta

    #8B008B

  • Purple

    #800080

  • Indigo

    #4B0082

  • SlateBlue

    #6A5ACD

  • DarkSlateBlue

    #483D8B

ピンク6

詳細を見る

  • Pink

    #FFC0CB

  • LightPink

    #FFB6C1

  • HotPink

    #FF69B4

  • DeepPink

    #FF1493

  • MediumVioletRed

    #C71585

  • PaleVioletRed

    #DB7093

茶16

詳細を見る

  • Cornsilk

    #FFF8DC

  • BlanchedAlmond

    #FFEBCD

  • Bisque

    #FFE4C4

  • NavajoWhite

    #FFDEAD

  • Wheat

    #F5DEB3

  • BurlyWood

    #DEB887

  • Tan

    #D2B48C

  • RosyBrown

    #BC8F8F

  • SandyBrown

    #F4A460

  • Goldenrod

    #DAA520

  • DarkGoldenrod

    #B8860B

  • Peru

    #CD853F

  • Chocolate

    #D2691E

  • SaddleBrown

    #8B4513

  • Sienna

    #A0522D

  • Brown

    #A52A2A

白17

詳細を見る

  • White

    #FFFFFF

  • Snow

    #FFFAFA

  • HoneyDew

    #F0FFF0

  • MintCream

    #F5FFFA

  • Azure

    #F0FFFF

  • AliceBlue

    #F0F8FF

  • GhostWhite

    #F8F8FF

  • WhiteSmoke

    #F5F5F5

  • Seashell

    #FFF5EE

  • Beige

    #F5F5DC

  • OldLace

    #FDF5E6

  • FloralWhite

    #FFFAF0

  • Ivory

    #FFFFF0

  • AntiqueWhite

    #FAEBD7

  • Linen

    #FAF0E6

  • LavenderBlush

    #FFF0F5

  • MistyRose

    #FFE4E1

グレー17

詳細を見る

  • Gainsboro

    #DCDCDC

  • LightGray

    #D3D3D3

  • LightGrey

    #D3D3D3

  • Silver

    #C0C0C0

  • DarkGray

    #A9A9A9

  • DarkGrey

    #A9A9A9

  • Gray

    #808080

  • Grey

    #808080

  • DimGray

    #696969

  • DimGrey

    #696969

  • LightSlateGray

    #778899

  • LightSlateGrey

    #778899

  • SlateGray

    #708090

  • SlateGrey

    #708090

  • DarkSlateGray

    #2F4F4F

  • DarkSlateGrey

    #2F4F4F

  • Black

    #000000

CSSのカラーネームとは

CSSはtomato、cornflowerblue、rebeccapurpleなど148のカラーネームを認識します。それぞれ固定のHEXコードに対応し、何も定義しなくてもすべてのブラウザで同じように動作します。

コードより読みやすいので、プロトタイプ、サンプル、単発の色に便利です。正確で一貫した色調が必要なデザインシステムでは、HEX、RGB、OKLCHを使うほうが適しています。

CSSカラーネームの豆知識

リストの裏には、知っておきたい歴史やちょっとした癖があります。

  • 最初は16色だった

    HTML 4で定義されていたのはnavy、teal、oliveなどの16色だけでした。残りは後から、グラフィックシステムX11の色を引き継いで追加されました。

  • 148の名前、139の色

    9組は同じ色です：grayとgrey（とそのバリエーション）、aquaとcyan、fuchsiaとmagenta。

  • darkgrayはgrayより明るい

    X11から引き継いだ影響で、darkgray（#A9A9A9）はgray（#808080）より明るくなっています。濃いグレーがほしいならdimgrayを使いましょう。

  • rebeccapurpleの由来

    CSSの第一人者エリック・マイヤーの娘、レベッカ・マイヤーを偲んで2014年に追加されました。近年追加された唯一の名前です。

  • 大文字・小文字を区別しない

    tomato、Tomato、TOMATOは同じ色です。慣例として小文字で書きます。

  • transparentとcurrentColor

    リストには含まれませんが、これらもカラーキーワードです。transparentは完全な透明、currentColorは要素の文字色を使います。

よくある質問

148の名前があり、9組の別名（grayとgreyなど）があるため、異なる色は139色です。redやblueのような基本色から、mediumseagreenやrebeccapurpleまであります。

はい。color: tomato;のように、HEXやRGBに変換せずにどの色プロパティにもそのまま書けます。

はい。CSSはすべてのグレー（gray/grey、darkgray/darkgrey…）で両方の綴りを受け付け、まったく同じ色になります。

名前の出どころが違うためです。gray（#808080）は元のHTMLのリストから、darkgray（#A9A9A9）は「gray」がより明るかったX11の色から引き継がれました。濃いグレーにはdimgray（#696969）を使いましょう。

#663399の色で、CSSコミュニティの第一人者エリック・マイヤーの娘、レベッカ・マイヤーを偲んで2014年にCSSに追加されました。

いいえ。Tomato、tomato、TOMATOはどれも同じように動作しますが、小文字で書くのが一般的です。

はい。CSS標準の一部であり、現在のすべてのブラウザが対応しています。

関連ツール