{"id":4056,"date":"2017-02-20T04:13:18","date_gmt":"2017-02-20T09:13:18","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=4056"},"modified":"2021-12-08T13:20:05","modified_gmt":"2021-12-08T18:20:05","slug":"html-color-names-major-browsers","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/","title":{"rendered":"The HTML Color Names you can use in all Major Browsers"},"content":{"rendered":"\n<p>Web design has evolved over the decades and certainly along the way has been the introduction of the use of HTML color names. This is a friendly way of defining colors on <a href=\"\/\/local.brightwhiz\/tag\/html\/\">HTML<\/a> elements using names rather than the Hex color codes.<\/p>\n\n\n\n<p>The challenge with these is that you may not know what colors are valid for use in your project as these cannot just be any color you can perceive.<\/p>\n\n\n\n<p>There are actually currently <a href=\"http:\/\/local.brightwhiz\/html-color-codes-cheat-sheet\/\">140 HTML color names you can pick from<\/a> and they are used just the same way you would use the Hex codes in either HTML, <a href=\"\/\/local.brightwhiz\/tag\/css\/\">CSS<\/a>, or <a href=\"\/\/local.brightwhiz\/tag\/javascript\/\">JavaScript<\/a> or whichever way will work for you.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to use HTML Color Names on Your Website<\/h2>\n\n\n\n<p>You can use your HTML Color attributes names directly in your HTML as shown in this example but as of HTML5 the color attributes are no longer supported so take note. These have been added for backward compatibility.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;body&gt;\n  \n  &lt;p color=&quot;#ff0000&quot;&gt;Old style Red paragraph&lt;\/p&gt; \n  \n  &lt;p color=&quot;red&quot;&gt;Old style Red paragraph using color names&lt;\/p&gt; \n     \n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p>It is recommended to use the style attribute to set your colors in HTML as this example shows.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;body&gt;\n  \n  &lt;p style=&quot;color:#ff0000;&quot;&gt;Old style Red paragraph&lt;\/p&gt; \n  \n  &lt;p style=&quot;color:red;&quot;&gt;Old style Red paragraph using color names&lt;\/p&gt; \n     \n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How About in CSS?<\/h2>\n\n\n\n<p>The same color names can be used in your CSS files by setting the properties as seen in this example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">p{\n color:red;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How About JavaScript Styling?<\/h2>\n\n\n\n<p>There are several ways you can do the same in JavaScript. Because of the dynamic nature of the language you have several ways to code it in. Generally, this would be a way to set the color of an element using JavaScript:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">document.getElementById(&quot;redText&quot;).style.color = &quot;red&quot;;<\/code><\/pre>\n\n\n\n<p>Generally, that is all there is to it. You can <a href=\"http:\/\/local.brightwhiz\/html-color-codes-cheat-sheet\/\">view a complete HTML color names table here<\/a> representing the color names with equivalent RGB and Hex representations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web design has evolved over the decades and certainly along the way has been the introduction of the use of HTML color names. This is a friendly way of defining&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4058,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,14,17],"tags":[146,170,195,303,319,320,328,543,635,637,638,643],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>List of HTML Color Names Supported by all Major Browsers<\/title>\n<meta name=\"description\" content=\"Here is a list of the 140 HTML color names that are supported in all major browsers for use in HTML, CSS or JavaScript code in Hex or RGB formats\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"List of HTML Color Names Supported by all Major Browsers\" \/>\n<meta property=\"og:description\" content=\"Here is a list of the 140 HTML color names that are supported in all major browsers for use in HTML, CSS or JavaScript code in Hex or RGB formats\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-20T09:13:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T18:20:05+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"The HTML Color Names you can use in all Major Browsers\",\"datePublished\":\"2017-02-20T09:13:18+00:00\",\"dateModified\":\"2021-12-08T18:20:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/\"},\"wordCount\":283,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg\",\"keywords\":[\"Computer graphics\",\"CSS\",\"Digital arts\",\"HTML\",\"Interactive Technics\",\"Internet\",\"JavaScript\",\"Software Design\",\"Web\",\"Web Design\",\"Web Development\",\"Websites\"],\"articleSection\":[\"Articles\",\"Guides\",\"Resources\",\"Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/\",\"url\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/\",\"name\":\"List of HTML Color Names Supported by all Major Browsers\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg\",\"datePublished\":\"2017-02-20T09:13:18+00:00\",\"dateModified\":\"2021-12-08T18:20:05+00:00\",\"description\":\"Here is a list of the 140 HTML color names that are supported in all major browsers for use in HTML, CSS or JavaScript code in Hex or RGB formats\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg\",\"width\":1200,\"height\":630,\"caption\":\"HTML Color Names\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The HTML Color Names you can use in all Major Browsers\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/x.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"List of HTML Color Names Supported by all Major Browsers","description":"Here is a list of the 140 HTML color names that are supported in all major browsers for use in HTML, CSS or JavaScript code in Hex or RGB formats","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/","og_locale":"en_US","og_type":"article","og_title":"List of HTML Color Names Supported by all Major Browsers","og_description":"Here is a list of the 140 HTML color names that are supported in all major browsers for use in HTML, CSS or JavaScript code in Hex or RGB formats","og_url":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-02-20T09:13:18+00:00","article_modified_time":"2021-12-08T18:20:05+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"The HTML Color Names you can use in all Major Browsers","datePublished":"2017-02-20T09:13:18+00:00","dateModified":"2021-12-08T18:20:05+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/"},"wordCount":283,"commentCount":0,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg","keywords":["Computer graphics","CSS","Digital arts","HTML","Interactive Technics","Internet","JavaScript","Software Design","Web","Web Design","Web Development","Websites"],"articleSection":["Articles","Guides","Resources","Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/","url":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/","name":"List of HTML Color Names Supported by all Major Browsers","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg","datePublished":"2017-02-20T09:13:18+00:00","dateModified":"2021-12-08T18:20:05+00:00","description":"Here is a list of the 140 HTML color names that are supported in all major browsers for use in HTML, CSS or JavaScript code in Hex or RGB formats","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/html-color-names-major-browsers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/HTML-Color-Names-Flowers.jpg","width":1200,"height":630,"caption":"HTML Color Names"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/html-color-names-major-browsers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"The HTML Color Names you can use in all Major Browsers"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/x.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4056"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=4056"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4056\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/4058"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=4056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=4056"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=4056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}