EN

HTML color names

This list of HTML color names shows all 148 named CSS colors with name, HEX code, RGB and HSL value. Search by name or code, filter by color family, sort by name, hue or lightness and copy a value with one click, visible right away and fine on a phone.

Source: W3C – CSS Color Module Level 4: Named Colors (148 color names with values). Updated: .

148 of 148 colors

  • aliceblue#F0F8FFrgb(240, 248, 255)hsl(208, 100%, 97%)Text contrast with black: 19.6 : 1
  • antiquewhite#FAEBD7rgb(250, 235, 215)hsl(34, 78%, 91%)Text contrast with black: 17.9 : 1
  • aqua#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)Text contrast with black: 16.7 : 1
  • aquamarine#7FFFD4rgb(127, 255, 212)hsl(160, 100%, 75%)Text contrast with black: 17.2 : 1
  • azure#F0FFFFrgb(240, 255, 255)hsl(180, 100%, 97%)Text contrast with black: 20.5 : 1
  • beige#F5F5DCrgb(245, 245, 220)hsl(60, 56%, 91%)Text contrast with black: 19.0 : 1
  • bisque#FFE4C4rgb(255, 228, 196)hsl(33, 100%, 88%)Text contrast with black: 17.1 : 1
  • black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)Text contrast with white: 21.0 : 1
  • blanchedalmond#FFEBCDrgb(255, 235, 205)hsl(36, 100%, 90%)Text contrast with black: 18.0 : 1
  • blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)Text contrast with white: 8.6 : 1
  • blueviolet#8A2BE2rgb(138, 43, 226)hsl(271, 76%, 53%)Text contrast with white: 6.0 : 1
  • brown#A52A2Argb(165, 42, 42)hsl(0, 59%, 41%)Text contrast with white: 7.1 : 1
  • burlywood#DEB887rgb(222, 184, 135)hsl(34, 57%, 70%)Text contrast with black: 11.3 : 1
  • cadetblue#5F9EA0rgb(95, 158, 160)hsl(182, 25%, 50%)Text contrast with black: 6.9 : 1
  • chartreuse#7FFF00rgb(127, 255, 0)hsl(90, 100%, 50%)Text contrast with black: 16.2 : 1
  • chocolate#D2691Ergb(210, 105, 30)hsl(25, 75%, 47%)Text contrast with black: 5.8 : 1
  • coral#FF7F50rgb(255, 127, 80)hsl(16, 100%, 66%)Text contrast with black: 8.4 : 1
  • cornflowerblue#6495EDrgb(100, 149, 237)hsl(219, 79%, 66%)Text contrast with black: 7.1 : 1
  • cornsilk#FFF8DCrgb(255, 248, 220)hsl(48, 100%, 93%)Text contrast with black: 19.7 : 1
  • crimson#DC143Crgb(220, 20, 60)hsl(348, 83%, 47%)Text contrast with white: 5.0 : 1
  • cyan#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)Text contrast with black: 16.7 : 1
  • darkblue#00008Brgb(0, 0, 139)hsl(240, 100%, 27%)Text contrast with white: 15.3 : 1
  • darkcyan#008B8Brgb(0, 139, 139)hsl(180, 100%, 27%)Text contrast with black: 5.1 : 1
  • darkgoldenrod#B8860Brgb(184, 134, 11)hsl(43, 89%, 38%)Text contrast with black: 6.5 : 1
  • darkgray#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)Text contrast with black: 8.9 : 1
  • darkgreen#006400rgb(0, 100, 0)hsl(120, 100%, 20%)Text contrast with white: 7.4 : 1
  • darkgrey#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)Text contrast with black: 8.9 : 1
  • darkkhaki#BDB76Brgb(189, 183, 107)hsl(56, 38%, 58%)Text contrast with black: 10.1 : 1
  • darkmagenta#8B008Brgb(139, 0, 139)hsl(300, 100%, 27%)Text contrast with white: 8.5 : 1
  • darkolivegreen#556B2Frgb(85, 107, 47)hsl(82, 39%, 30%)Text contrast with white: 5.9 : 1
  • darkorange#FF8C00rgb(255, 140, 0)hsl(33, 100%, 50%)Text contrast with black: 9.0 : 1
  • darkorchid#9932CCrgb(153, 50, 204)hsl(280, 61%, 50%)Text contrast with white: 5.7 : 1
  • darkred#8B0000rgb(139, 0, 0)hsl(0, 100%, 27%)Text contrast with white: 10.0 : 1
  • darksalmon#E9967Argb(233, 150, 122)hsl(15, 72%, 70%)Text contrast with black: 9.1 : 1
  • darkseagreen#8FBC8Frgb(143, 188, 143)hsl(120, 25%, 65%)Text contrast with black: 9.8 : 1
  • darkslateblue#483D8Brgb(72, 61, 139)hsl(248, 39%, 39%)Text contrast with white: 9.1 : 1
  • darkslategray#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)Text contrast with white: 8.9 : 1
  • darkslategrey#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)Text contrast with white: 8.9 : 1
  • darkturquoise#00CED1rgb(0, 206, 209)hsl(181, 100%, 41%)Text contrast with black: 10.7 : 1
  • darkviolet#9400D3rgb(148, 0, 211)hsl(282, 100%, 41%)Text contrast with white: 6.6 : 1
  • deeppink#FF1493rgb(255, 20, 147)hsl(328, 100%, 54%)Text contrast with black: 5.8 : 1
  • deepskyblue#00BFFFrgb(0, 191, 255)hsl(195, 100%, 50%)Text contrast with black: 9.9 : 1
  • dimgray#696969rgb(105, 105, 105)hsl(0, 0%, 41%)Text contrast with white: 5.5 : 1
  • dimgrey#696969rgb(105, 105, 105)hsl(0, 0%, 41%)Text contrast with white: 5.5 : 1
  • dodgerblue#1E90FFrgb(30, 144, 255)hsl(210, 100%, 56%)Text contrast with black: 6.5 : 1
  • firebrick#B22222rgb(178, 34, 34)hsl(0, 68%, 42%)Text contrast with white: 6.7 : 1
  • floralwhite#FFFAF0rgb(255, 250, 240)hsl(40, 100%, 97%)Text contrast with black: 20.2 : 1
  • forestgreen#228B22rgb(34, 139, 34)hsl(120, 61%, 34%)Text contrast with black: 4.8 : 1
  • fuchsia#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)Text contrast with black: 6.7 : 1
  • gainsboro#DCDCDCrgb(220, 220, 220)hsl(0, 0%, 86%)Text contrast with black: 15.3 : 1
  • ghostwhite#F8F8FFrgb(248, 248, 255)hsl(240, 100%, 99%)Text contrast with black: 19.9 : 1
  • gold#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%)Text contrast with black: 15.0 : 1
  • goldenrod#DAA520rgb(218, 165, 32)hsl(43, 74%, 49%)Text contrast with black: 9.4 : 1
  • gray#808080rgb(128, 128, 128)hsl(0, 0%, 50%)Text contrast with black: 5.3 : 1
  • green#008000rgb(0, 128, 0)hsl(120, 100%, 25%)Text contrast with white: 5.1 : 1
  • greenyellow#ADFF2Frgb(173, 255, 47)hsl(84, 100%, 59%)Text contrast with black: 17.1 : 1
  • grey#808080rgb(128, 128, 128)hsl(0, 0%, 50%)Text contrast with black: 5.3 : 1
  • honeydew#F0FFF0rgb(240, 255, 240)hsl(120, 100%, 97%)Text contrast with black: 20.3 : 1
  • hotpink#FF69B4rgb(255, 105, 180)hsl(330, 100%, 71%)Text contrast with black: 7.9 : 1
  • indianred#CD5C5Crgb(205, 92, 92)hsl(0, 53%, 58%)Text contrast with black: 5.3 : 1
  • indigo#4B0082rgb(75, 0, 130)hsl(275, 100%, 25%)Text contrast with white: 13.0 : 1
  • ivory#FFFFF0rgb(255, 255, 240)hsl(60, 100%, 97%)Text contrast with black: 20.8 : 1
  • khaki#F0E68Crgb(240, 230, 140)hsl(54, 77%, 75%)Text contrast with black: 16.4 : 1
  • lavender#E6E6FArgb(230, 230, 250)hsl(240, 67%, 94%)Text contrast with black: 17.1 : 1
  • lavenderblush#FFF0F5rgb(255, 240, 245)hsl(340, 100%, 97%)Text contrast with black: 19.0 : 1
  • lawngreen#7CFC00rgb(124, 252, 0)hsl(90, 100%, 49%)Text contrast with black: 15.8 : 1
  • lemonchiffon#FFFACDrgb(255, 250, 205)hsl(54, 100%, 90%)Text contrast with black: 19.8 : 1
  • lightblue#ADD8E6rgb(173, 216, 230)hsl(195, 53%, 79%)Text contrast with black: 13.7 : 1
  • lightcoral#F08080rgb(240, 128, 128)hsl(0, 79%, 72%)Text contrast with black: 8.1 : 1
  • lightcyan#E0FFFFrgb(224, 255, 255)hsl(180, 100%, 94%)Text contrast with black: 19.9 : 1
  • lightgoldenrodyellow#FAFAD2rgb(250, 250, 210)hsl(60, 80%, 90%)Text contrast with black: 19.7 : 1
  • lightgray#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)Text contrast with black: 14.0 : 1
  • lightgreen#90EE90rgb(144, 238, 144)hsl(120, 73%, 75%)Text contrast with black: 14.8 : 1
  • lightgrey#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)Text contrast with black: 14.0 : 1
  • lightpink#FFB6C1rgb(255, 182, 193)hsl(351, 100%, 86%)Text contrast with black: 12.7 : 1
  • lightsalmon#FFA07Argb(255, 160, 122)hsl(17, 100%, 74%)Text contrast with black: 10.6 : 1
  • lightseagreen#20B2AArgb(32, 178, 170)hsl(177, 70%, 41%)Text contrast with black: 8.0 : 1
  • lightskyblue#87CEFArgb(135, 206, 250)hsl(203, 92%, 75%)Text contrast with black: 12.2 : 1
  • lightslategray#778899rgb(119, 136, 153)hsl(210, 14%, 53%)Text contrast with black: 5.8 : 1
  • lightslategrey#778899rgb(119, 136, 153)hsl(210, 14%, 53%)Text contrast with black: 5.8 : 1
  • lightsteelblue#B0C4DErgb(176, 196, 222)hsl(214, 41%, 78%)Text contrast with black: 11.8 : 1
  • lightyellow#FFFFE0rgb(255, 255, 224)hsl(60, 100%, 94%)Text contrast with black: 20.6 : 1
  • lime#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)Text contrast with black: 15.3 : 1
  • limegreen#32CD32rgb(50, 205, 50)hsl(120, 61%, 50%)Text contrast with black: 9.9 : 1
  • linen#FAF0E6rgb(250, 240, 230)hsl(30, 67%, 94%)Text contrast with black: 18.7 : 1
  • magenta#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)Text contrast with black: 6.7 : 1
  • maroon#800000rgb(128, 0, 0)hsl(0, 100%, 25%)Text contrast with white: 10.9 : 1
  • mediumaquamarine#66CDAArgb(102, 205, 170)hsl(160, 51%, 60%)Text contrast with black: 10.9 : 1
  • mediumblue#0000CDrgb(0, 0, 205)hsl(240, 100%, 40%)Text contrast with white: 11.2 : 1
  • mediumorchid#BA55D3rgb(186, 85, 211)hsl(288, 59%, 58%)Text contrast with black: 5.3 : 1
  • mediumpurple#9370DBrgb(147, 112, 219)hsl(260, 60%, 65%)Text contrast with black: 5.6 : 1
  • mediumseagreen#3CB371rgb(60, 179, 113)hsl(147, 50%, 47%)Text contrast with black: 7.9 : 1
  • mediumslateblue#7B68EErgb(123, 104, 238)hsl(249, 80%, 67%)Text contrast with black: 5.1 : 1
  • mediumspringgreen#00FA9Argb(0, 250, 154)hsl(157, 100%, 49%)Text contrast with black: 15.1 : 1
  • mediumturquoise#48D1CCrgb(72, 209, 204)hsl(178, 60%, 55%)Text contrast with black: 11.3 : 1
  • mediumvioletred#C71585rgb(199, 21, 133)hsl(322, 81%, 43%)Text contrast with white: 5.4 : 1
  • midnightblue#191970rgb(25, 25, 112)hsl(240, 64%, 27%)Text contrast with white: 14.8 : 1
  • mintcream#F5FFFArgb(245, 255, 250)hsl(150, 100%, 98%)Text contrast with black: 20.6 : 1
  • mistyrose#FFE4E1rgb(255, 228, 225)hsl(6, 100%, 94%)Text contrast with black: 17.4 : 1
  • moccasin#FFE4B5rgb(255, 228, 181)hsl(38, 100%, 85%)Text contrast with black: 17.0 : 1
  • navajowhite#FFDEADrgb(255, 222, 173)hsl(36, 100%, 84%)Text contrast with black: 16.3 : 1
  • navy#000080rgb(0, 0, 128)hsl(240, 100%, 25%)Text contrast with white: 16.0 : 1
  • oldlace#FDF5E6rgb(253, 245, 230)hsl(39, 85%, 95%)Text contrast with black: 19.4 : 1
  • olive#808000rgb(128, 128, 0)hsl(60, 100%, 25%)Text contrast with black: 5.0 : 1
  • olivedrab#6B8E23rgb(107, 142, 35)hsl(80, 60%, 35%)Text contrast with black: 5.5 : 1
  • orange#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%)Text contrast with black: 10.6 : 1
  • orangered#FF4500rgb(255, 69, 0)hsl(16, 100%, 50%)Text contrast with black: 6.1 : 1
  • orchid#DA70D6rgb(218, 112, 214)hsl(302, 59%, 65%)Text contrast with black: 7.3 : 1
  • palegoldenrod#EEE8AArgb(238, 232, 170)hsl(55, 67%, 80%)Text contrast with black: 16.8 : 1
  • palegreen#98FB98rgb(152, 251, 152)hsl(120, 93%, 79%)Text contrast with black: 16.6 : 1
  • paleturquoise#AFEEEErgb(175, 238, 238)hsl(180, 65%, 81%)Text contrast with black: 16.3 : 1
  • palevioletred#DB7093rgb(219, 112, 147)hsl(340, 60%, 65%)Text contrast with black: 6.8 : 1
  • papayawhip#FFEFD5rgb(255, 239, 213)hsl(37, 100%, 92%)Text contrast with black: 18.6 : 1
  • peachpuff#FFDAB9rgb(255, 218, 185)hsl(28, 100%, 86%)Text contrast with black: 16.0 : 1
  • peru#CD853Frgb(205, 133, 63)hsl(30, 59%, 53%)Text contrast with black: 7.0 : 1
  • pink#FFC0CBrgb(255, 192, 203)hsl(350, 100%, 88%)Text contrast with black: 13.7 : 1
  • plum#DDA0DDrgb(221, 160, 221)hsl(300, 47%, 75%)Text contrast with black: 10.1 : 1
  • powderblue#B0E0E6rgb(176, 224, 230)hsl(187, 52%, 80%)Text contrast with black: 14.7 : 1
  • purple#800080rgb(128, 0, 128)hsl(300, 100%, 25%)Text contrast with white: 9.4 : 1
  • rebeccapurple#663399rgb(102, 51, 153)hsl(270, 50%, 40%)Text contrast with white: 8.4 : 1
  • red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)Text contrast with black: 5.3 : 1
  • rosybrown#BC8F8Frgb(188, 143, 143)hsl(0, 25%, 65%)Text contrast with black: 7.5 : 1
  • royalblue#4169E1rgb(65, 105, 225)hsl(225, 73%, 57%)Text contrast with white: 4.8 : 1
  • saddlebrown#8B4513rgb(139, 69, 19)hsl(25, 76%, 31%)Text contrast with white: 7.1 : 1
  • salmon#FA8072rgb(250, 128, 114)hsl(6, 93%, 71%)Text contrast with black: 8.4 : 1
  • sandybrown#F4A460rgb(244, 164, 96)hsl(28, 87%, 67%)Text contrast with black: 10.3 : 1
  • seagreen#2E8B57rgb(46, 139, 87)hsl(146, 50%, 36%)Text contrast with black: 4.9 : 1
  • seashell#FFF5EErgb(255, 245, 238)hsl(25, 100%, 97%)Text contrast with black: 19.5 : 1
  • sienna#A0522Drgb(160, 82, 45)hsl(19, 56%, 40%)Text contrast with white: 5.6 : 1
  • silver#C0C0C0rgb(192, 192, 192)hsl(0, 0%, 75%)Text contrast with black: 11.5 : 1
  • skyblue#87CEEBrgb(135, 206, 235)hsl(197, 71%, 73%)Text contrast with black: 12.1 : 1
  • slateblue#6A5ACDrgb(106, 90, 205)hsl(248, 53%, 58%)Text contrast with white: 5.3 : 1
  • slategray#708090rgb(112, 128, 144)hsl(210, 13%, 50%)Text contrast with black: 5.2 : 1
  • slategrey#708090rgb(112, 128, 144)hsl(210, 13%, 50%)Text contrast with black: 5.2 : 1
  • snow#FFFAFArgb(255, 250, 250)hsl(0, 100%, 99%)Text contrast with black: 20.3 : 1
  • springgreen#00FF7Frgb(0, 255, 127)hsl(150, 100%, 50%)Text contrast with black: 15.6 : 1
  • steelblue#4682B4rgb(70, 130, 180)hsl(207, 44%, 49%)Text contrast with black: 5.1 : 1
  • tan#D2B48Crgb(210, 180, 140)hsl(34, 44%, 69%)Text contrast with black: 10.6 : 1
  • teal#008080rgb(0, 128, 128)hsl(180, 100%, 25%)Text contrast with white: 4.8 : 1
  • thistle#D8BFD8rgb(216, 191, 216)hsl(300, 24%, 80%)Text contrast with black: 12.4 : 1
  • tomato#FF6347rgb(255, 99, 71)hsl(9, 100%, 64%)Text contrast with black: 7.1 : 1
  • turquoise#40E0D0rgb(64, 224, 208)hsl(174, 72%, 56%)Text contrast with black: 12.8 : 1
  • violet#EE82EErgb(238, 130, 238)hsl(300, 76%, 72%)Text contrast with black: 9.1 : 1
  • wheat#F5DEB3rgb(245, 222, 179)hsl(39, 77%, 83%)Text contrast with black: 16.0 : 1
  • white#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)Text contrast with black: 21.0 : 1
  • whitesmoke#F5F5F5rgb(245, 245, 245)hsl(0, 0%, 96%)Text contrast with black: 19.3 : 1
  • yellow#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)Text contrast with black: 19.6 : 1
  • yellowgreen#9ACD32rgb(154, 205, 50)hsl(80, 61%, 50%)Text contrast with black: 11.2 : 1

Source of the names and values: CSS Color Module Level 4 (W3C). The color families are an aid for browsing and not part of the specification.

My Toolbox

Result

How it is calculated

In short: in HTML and CSS you can give colors not only as codes but also by English names, such as color: tomato instead of #FF6347. There are 148 such names. The table above shows each one with its HEX code, RGB components and HSL value.

How to use the table

  1. Search box: look for part of a name or HEX code (“blue”, “green”, “6495ED”).
  2. Choose a color family to see only reds, greens and so on.
  3. Sort by name, hue (rainbow order, grays at the end) or lightness.
  4. Click HEX, Name or RGB: the value is on your clipboard.

HEX, RGB and HSL

Text contrast

Under each color you see whether black or white text is easier to read on it, with the contrast ratio according to WCAG 2.2. For normal text WCAG requires at least 4.5 : 1, for large text 3 : 1. Equivalent names such as aqua and cyan or gray and grey are aliases with identical values.

Frequently asked questions

How many color names are there in HTML and CSS?

There are 148 named colors, including aliases such as aqua and cyan, magenta and fuchsia, and gray and grey. The keywords transparent and currentcolor come on top.

How do I write a color name in CSS?

Directly as the value, for example color: tomato; or background: cornflowerblue;. The names are English and case-insensitive.

What are the HEX codes of red, green and blue?

red is #FF0000, lime (pure green) is #00FF00 and blue is #0000FF. The word green stands for a darker green in CSS, #008000.

How do I find the color name for a HEX code?

Type the code into the search box, with or without #. If a name has exactly that value it appears in the list.

Which text color suits a given color?

The note under the color tells you whether black or white gives more contrast. For readable text the ratio should be at least 4.5 : 1.

Sources and legal basis

As of: · Editorial policy

Related tools