Named Colors And Hex Equivalents - CSS-Tricks

Color Name HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGrey #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SlateGrey #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. M!l Permalink to comment# January 29, 2012

    wooow .. really nice job

    Loading... Reply
  2. Eddy Permalink to comment# January 29, 2012

    Would be nice if it was possible to arrange it by hex value, in case you know approximately what color you want but not the exact one.

    Loading... Reply
    • Raxin Permalink to comment# November 23, 2015

      Here’s a list sorted by hex: http://www.w3schools.com/cssref/css_colorsfull.asp

      They still look out of order in hex too though. It might be interesting to sort by hue, but then where would you put the grays, and how would you deal with different saturation levels of the same hue?

      The problem with trying to sort colors in any kind of list is that lists are 2D, and colorspace is 3D (not including the transparency channel), so no single list is sufficient.

      Loading...
    • Raxin Permalink to comment# November 23, 2015

      I meant lists are 1D.

      Loading...
    • Yuriy Linnyk Permalink to comment# March 26, 2016

      @Raxin, sorting “by hex” isn’t done right on that page from any viewpoint, they ordered the colors by converting hex as if it was one value, while in fact the hex is three values (red, green, blue). In other words, they made a mistake to treat something like “#bada55” as one hexadecimal number, while in fact that is “ba” value of red, “da” value of green, and “55” value of blue. And I know it how? I was playing around with sorting the colors myself and ran into the same mistake at first attempt, and that was the same ordering as on that page. Here’s my playground: http://colors.yur.io feel free to look at the source.

      Loading...
  3. _John_ Permalink to comment# January 29, 2012

    Nice job, i like how every single one of those colors are vibrant and actually look really good. I feel the urge to use ‘BurlyWood’ for a background or something now.

    Loading... Reply
  4. al Permalink to comment# January 29, 2012

    w3schools has a similar table http://www.w3schools.com/html/html_colornames.asp

    this is the one I ran across first

    Al

    Loading... Reply
  5. Philipp Permalink to comment# January 29, 2012

    Great job Chris, thanks for the list!

    Loading... Reply
  6. Vladimir Varbanov Permalink to comment# January 30, 2012

    This is really useful – thanks a lot – in my bookmarks!

    Loading... Reply
  7. Caleb Permalink to comment# January 30, 2012

    Nice! It would be cool to add the hsla there as well…

    Loading... Reply
  8. benny Permalink to comment# March 29, 2013

    cool!!

    Loading... Reply
  9. Dennis Dewey Permalink to comment# August 2, 2013

    I created a Sublime Text 2 Reg Replace pattern that finds all of the named css colors and replaces them with the hex value. This needs the Reg Replace plugin installed in order for it to work.

    https://gist.github.com/primitivehuman/6138823

    Loading... Reply
  10. Shaz3e Permalink to comment# August 15, 2014

    I managed all css colors with their name and made a single file to use any of CSS color easily for text and background. Have a look at it here -> http://shaz3e.github.io/S3-Colors/

    Loading... Reply
  11. FrankB Permalink to comment# October 12, 2014

    Random question. Does anyone know the story of why fuchsia/magenta and aqua/cyan are repeats of the same color (#FF00FF and #00FFFF respectively). So in reality there are only 138 colors? It’s not important, but I have always wondered how that came to pass…

    Loading... Reply
    • Tyson N. Permalink to comment# January 6, 2015

      Same reason gray/grey (and variants thereof, e.g. darkslategr[a|e]y) are equivalent names; different people use different spellings or names to refer to the same color. In particular, “fuchsia” and “aqua” were among the 16 color names defined in HTML 3.0, which in turn came from the standard names referenced in the MS Windows default VGA 4-bit color palette; however, the additive color model (RGB) has long termed the combination of maximum red and blue light as “magenta”, and the combination of maximum green and blue light as “cyan”, which are more broadly known as technical terms for those specific definitions, so “fuchsia” and “aqua” continue to be supported basically for legacy purposes dating back to HTML 3 and early Windows.

      Loading...
  12. Francis Sunday Permalink to comment# October 27, 2014

    Thanks this just helped me in my project on GitHub i call weblooks.css you can fork my work via this link http://www.github.com/frinteractive/weblooks.css

    Loading... Reply
  13. Mark Permalink to comment# May 9, 2015

    I use Boxing.css to group style strings for ‘color-names’, ‘color-background’ and ‘color-foreground’. CSS3 boxed style is always helpful, so great starter from Shaz at IO. But there’s more, each with its own flair. Mozilla as always goes all the way (RGBdec, RGB%, HSL, HEX, SHORT, and mountains of explanation). Resources: http://dev.w3.org/csswg/css-color/ http://www.w3.org/TR/SVG/types.html#ColorKeywords http://meyerweb.com/eric/css/colors/ http://www.w3schools.com/cssref/css_colornames.asp http://www.w3schools.com/cssref/css_colorsfull.asp http://www.learningwebdesign.com/colornames.html http://www.cssportal.com/css3-color-names/

    Named Colors and Hex Equivalents

    http://shaz3e.github.io/S3-Colors/ https://developer.mozilla.org/en/docs/Web/CSS/color_value

    Loading... Reply
  14. Ali Permalink to comment# July 6, 2015

    http://www.colorconversion.co – I’ve recently developed this color conversion site to help developers, designers or anyone who is interested in color conversion. It is free and fun to use :)

    Loading... Reply
  15. CarolColorer Permalink to comment# July 28, 2015

    Why don’t these appear as expected: lightGray Gray DarkGray

    How can a darker-gray to so much lighter than gray?

    Loading... Reply
  16. Jesse Permalink to comment# November 23, 2015

    This reads like Patrick Bateman’s lunch.

    Loading... Reply
  17. Mottie Permalink to comment# March 20, 2016

    This list is missing “rebeccapurple”: https://css-tricks.com/rebbeccapurple-663399/

    Loading... Reply
  18. mkupper Permalink to comment# January 9, 2017

    The wrong values are listed for two of the colors.

    MediumPurple is listed as #9370D8. This should be #9370DB.

    PaleVioletRed is listed as #D87093. This should be #DB7093.

    In both cases someone had entered the letter B as the digit 8 when constructing the list on this page. The August 2, 2013 post by Dennis Dewey also has the wrong color values.

    I’ll second adding RebeccaPurple to the list. While it’s not an official CSS3 color it has been a part of the official CSS4 specification since June 2014 and has been supported by all of the major web browsers since 2014. CSS3 list https://www.w3.org/TR/css3-color/ CSS4 list https://www.w3.org/TR/css-color-4/ has RebeccaPurple

    The page should mention that the color names are case insensitive. ‘YellowGreen’ and ‘yellowgreen’ are the same.

    While it has no affect on the displayed color the following color names are single English words and should not be CamelCased as two words in the list: Aquamarine, Goldenrod (used as part of several color names), Honeydew, and Seashell.

    Loading... Reply
  19. A Permalink to comment# July 30, 2020

    Can this be organized on a color wheel for reference? The geometry is hard to remember if I’m scrolling down endlessly.

    Loading... Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Δ

%d

Từ khóa » Html Color Names W3schools