Htmlcolorcodes.com
How do I make an htmlcolorcodes.com?
What is a htmlcolorcodes.com? How do you make a htmlcolorcodes.com? This script and codes were developed by Carbon Ads on 25 October 2022, Tuesday.
Htmlcolorcodes.com Previews
Htmlcolorcodes.com - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>htmlcolorcodes.com</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html>
<head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-language" content="en"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="canonical" href="http://htmlcolorcodes.com/"> <link rel="publisher" href="https://plus.google.com/+htmlcolorcodez"> <title>HTML Color Codes</title> <meta name="title" content="HTML Color Codes"> <meta name="description" content="Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
"> <meta property="og:site_name" content="HTML Color Codes"> <meta property="og:type" content="website"> <meta property="og:url" content="http://htmlcolorcodes.com/"> <meta property="og:title" content="HTML Color Codes"> <meta property="og:description" content="Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
"> <meta property="og:image" content="http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg"> <meta name="twitter:site" content="@dixonandmoe"> <meta name="twitter:domain" content="htmlcolorcodes.com"> <meta name="twitter:card" content="photo"> <meta name="twitter:url" content="http://htmlcolorcodes.com/"> <meta name="twitter:title" content="HTML Color Codes"> <meta name="twitter:description" content="Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
"> <meta name="twitter:image" content="http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg"> <link rel="alternate" hreflang="en" href="http://htmlcolorcodes.com/" /> <link rel="alternate" hreflang="es" href="http://htmlcolorcodes.com/es/" /> <link rel="alternate" hreflang="fr" href="http://htmlcolorcodes.com/fr/" /> <link rel="alternate" hreflang="zh" href="http://htmlcolorcodes.com/zh/" /> <link rel="alternate" hreflang="x-default" href="http://htmlcolorcodes.com/" /> <link href="http://d.pr/f/ULZhLy+" rel="stylesheet" type="text/css" /> <style> body { -webkit-animation: bodyFade 1s; -moz-animation: bodyFade 1s; -ms-animation: bodyFade 1s; -o-animation: bodyFade 1s; animation: bodyFade 1s; } #header { padding: 6.5em 0 4.5em; -webkit-animation: headerIndex 0.75s; -moz-animation: headerIndex 0.75s; -ms-animation: headerIndex 0.75s; -o-animation: headerIndex 0.75s; animation: headerIndex 0.75s; } #main { background-color: #f7f7f7; z-index: 3; } #main, nav.color-nav { -webkit-animation: mainSlide 1s, mainFade 1s; -moz-animation: mainSlide 1s, mainFade 1s; -ms-animation: mainSlide 1s, mainFade 1s; -o-animation: mainSlide 1s, mainFade 1s; animation: mainSlide 1s, mainFade 1s; } @media only screen and (max-width: 40em) { nav.color-nav { display: none; } #header { padding: 6em 0 2.5em; } #footer > aside { background-color: #eeeeee; } } @media only screen and (max-width: 48em) { #header { padding: 4.5em 0 3em; } #mobile { -webkit-animation: navSlide 1s; -moz-animation: navSlide 1s; -ms-animation: navSlide 1s; -o-animation: navSlide 1s; animation: navSlide 1s; } } @media only screen and (min-width: 48.063em) { #nav { -webkit-animation: navSlide 1s; -moz-animation: navSlide 1s; -ms-animation: navSlide 1s; -o-animation: navSlide 1s; animation: navSlide 1s; } } @-webkit-keyframes mainSlide { 0% { -webkit-transform: translateY(1200px); } 20% { -webkit-transform: translateY(120px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes mainSlide { 0% { -moz-transform: translateY(1200px); } 20% { -moz-transform: translateY(120px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes mainSlide { 0% { -o-transform: translateY(1200px); } 20% { -o-transform: translateY(120px); } 100% { -o-transform: translateY(0); } } @keyframes mainSlide { 0% { transform: translateY(1200px); } 20% { transform: translateY(120px); } 100% { transform: translateY(0); } } @-webkit-keyframes mainFade { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes mainFade { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes mainFade { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } @keyframes mainFade { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } </style> <script src="//use.typekit.net/lxe4nsf.js"></script> <script> try { Typekit.load(); } catch (e) {} </script> <link rel="icon" sizes="16x16 32x32 48x48 64x64" href="http://htmlcolorcodes.com/assets/images/favicon.ico"> <!--[if IE]><link rel="shortcut icon" href="/path/to/favicon.ico"><![endif]--> <link rel="icon" sizes="192x192" href="http://htmlcolorcodes.com/assets/images/icons/touch-icon-192x192.png"> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="http://htmlcolorcodes.com/assets/images/icons/apple-touch-icon-180x180-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://htmlcolorcodes.com/assets/images/icons/apple-touch-icon-152x152-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://htmlcolorcodes.com/assets/images/icons/apple-touch-icon-144x144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://htmlcolorcodes.com/assets/images/icons/apple-touch-icon-120x120-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://htmlcolorcodes.com/assets/images/icons/apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="http://htmlcolorcodes.com/assets/images/icons/apple-touch-icon-76x76-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://htmlcolorcodes.com/assets/images/icons/apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="http://htmlcolorcodes.com/assets/images/icons/apple-touch-icon-precomposed.png"> <meta name="google-site-verification" content="btWtOy1HEbXXAlGVZOugSpPknPxFzjXN0U83cIq3UcA" /> <meta name="msvalidate.01" content="1C67127B37207626C508F315E2AA2A54" /> <Meta name="baidu-site-verification" content="5hPjC6aiNi" /> <meta name='yandex-verification' content='4fe0c2cf48027d09' /> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "http://htmlcolorcodes.com/", "name": "HTML Color Codes", "image": "http://htmlcolorcodes.com/assets/images/logo-html-color-codes-63d02017.png", "description": "Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. ", "sameAs": [ "https://plus.google.com/+htmlcolorcodez", "https://www.facebook.com/htmlcolorcodez" ], "inLanguage": [ "en", "es", "fr", "zh" ], "copyrightYear": "2017", "copyrightHolder": [{ "@type": "Organization", "url": "https://dixonandmoe.com/", "name": "Dixon & Moe, LLC", "logo": "http://htmlcolorcodes.com/assets/images/logo-dixon-and-moe-e2e766cd.png", "contactPoint": [{ "@type": "ContactPoint", "url": "https://dixonandmoe.com/", "email": "[email protected]", "contactType": "customer service" }] }] } </script>
</head>
<body vocab="http://schema.org/" typeof="WebPage"> <meta property="url" content="http://htmlcolorcodes.com/"> <div id="modal"></div> <div id="overlay"></div> <nav id="nav" class="nav-right" vocab="http://schema.org/" typeof="SiteNavigationElement" role="navigation"> <ul class="row"> <li class="col-xs-24 hide-md languages"> <h4 class="js-button js-button-leader">English <span class="triangle black"></span></h4> <ul class="js-list"> <li> <h4> <a href="http://htmlcolorcodes.com/">English</a> </h4> </li> <li> <h4> <a href="http://htmlcolorcodes.com/es/">Español</a> </h4> </li> <li> <h4> <a href="http://htmlcolorcodes.com/fr/">Français</a> </h4> </li> <li> <h4> <a href="http://htmlcolorcodes.com/zh/">中国</a> </h4> </li> </ul> </li> <li class="color-codes"> <a property="url" class=" active" href="/"> <span class="hide-md"><svg version="1.1" id="htmlcolorcodes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path fill="#581845" d="M15.891,15.887C14.852,16.927,13.471,17.5,12,17.5V24c3.207,0,6.223-1.25,8.489-3.52L15.891,15.887z"/>
<path fill="#900C3F" d="M17.5,12c0,1.468-0.57,2.85-1.609,3.886l4.598,4.597C22.753,18.216,24,15.204,24,12H17.5z"/>
<path fill="#C70039" d="M20.484,3.515L15.887,8.11C16.927,9.151,17.5,10.533,17.5,12H24C24,8.797,22.751,5.784,20.484,3.515z"/>
<path fill="#FF5733" d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12v-6.5c-3.033,0-5.5-2.467-5.5-5.5S8.967,6.5,12,6.5 c1.468,0,2.85,0.572,3.889,1.612l4.594-4.599C18.215,1.248,15.203,0,12,0z"/>
</svg>
</span> <div class="logo show-md"> <div class="deg-hidden"></div> <div class="donut deg45-1-gray"></div> <div class="donut deg45-1"></div> <div class="donut deg45-2-gray"></div> <div class="donut deg45-2"></div> <div class="donut deg45-3-gray"></div> <div class="donut deg45-3"></div> <div class="donut deg45-6-gray"></div> <div class="donut deg45-6"></div> <div class="donut deg45-5-gray"></div> <div class="donut deg45-5"></div> <div class="donut deg45-4-gray"></div> <div class="donut deg45-4"></div> </div> <h3 property="name" class="hide-md">Home</h3> </a> </li> <!-- <li class="color-picker show-md"> <h3 property="name">
<a property="url" class=" active" href="/"> <span class="black hide-md"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="24px" viewBox="0 0 27 24" enable-background="new 0 0 27 24" xml:space="preserve">
<path class="fill" d="M26,11.989V20.5c0,0.828-0.672,1.5-1.5,1.5S23,21.328,23,20.5v-8.511c-0.604-0.457-1-1.173-1-1.989s0.396-1.532,1-1.989V4.5 C23,3.671,23.672,3,24.5,3S26,3.671,26,4.5v3.511c0.604,0.457,1,1.173,1,1.989S26.604,11.532,26,11.989z M19,19.5v-14 C19,4.122,17.879,3,16.5,3h-14C1.122,3,0,4.122,0,5.5v14C0,20.879,1.122,22,2.5,22h14C17.879,22,19,20.879,19,19.5z M3,6h13v13H3V6z "/>
</svg>
</span> Home
</a> </h3> </li> --> <li class="color-picker"> <h3 property="name">
<a property="url" class="" href="/color-picker/"> <span class="black hide-md"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="24px" viewBox="0 0 27 24" enable-background="new 0 0 27 24" xml:space="preserve">
<path class="fill" d="M26,11.989V20.5c0,0.828-0.672,1.5-1.5,1.5S23,21.328,23,20.5v-8.511c-0.604-0.457-1-1.173-1-1.989s0.396-1.532,1-1.989V4.5 C23,3.671,23.672,3,24.5,3S26,3.671,26,4.5v3.511c0.604,0.457,1,1.173,1,1.989S26.604,11.532,26,11.989z M19,19.5v-14 C19,4.122,17.879,3,16.5,3h-14C1.122,3,0,4.122,0,5.5v14C0,20.879,1.122,22,2.5,22h14C17.879,22,19,20.879,19,19.5z M3,6h13v13H3V6z "/>
</svg>
</span> Picker
</a> </h3> </li> <li class="color-chart"> <h3 property="name">
<a property="url" class="" href="/color-chart/"> <span class="black hide-md"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="23px" viewBox="0 0 27 23" enable-background="new 0 0 27 23" xml:space="preserve">
<path class="fill" d="M7,9.5c0,0.552-0.448,1-1,1H1c-0.552,0-1-0.448-1-1v-5c0-0.552,0.448-1,1-1h5c0.552,0,1,0.448,1,1V9.5z M7,19.5 c0,0.553-0.448,1-1,1H1c-0.552,0-1-0.447-1-1v-5c0-0.553,0.448-1,1-1h5c0.552,0,1,0.447,1,1V19.5z M17,19.5c0,0.553-0.447,1-1,1h-5 c-0.552,0-1-0.447-1-1v-5c0-0.553,0.448-1,1-1h5c0.553,0,1,0.447,1,1V19.5z M27,19.5c0,0.553-0.447,1-1,1h-5c-0.553,0-1-0.447-1-1 v-5c0-0.553,0.447-1,1-1h5c0.553,0,1,0.447,1,1V19.5z M27,9.5c0,0.553-0.447,1-1,1h-5c-0.553,0-1-0.447-1-1v-5c0-0.553,0.447-1,1-1 h5c0.553,0,1,0.447,1,1V9.5z M17,9.5c0,0.553-0.447,1-1,1h-5c-0.553,0-1-0.447-1-1v-5c0-0.553,0.447-1,1-1h5c0.553,0,1,0.447,1,1 V9.5z"/>
</svg>
</span> Chart
</a> </h3> </li> <li class="color-names"> <h3 property="name">
<a property="url" class="" href="/color-names/"> <span class="black hide-md"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="24px" viewBox="0 0 27 24" enable-background="new 0 0 27 24" xml:space="preserve">
<path class="fill" d="M25.5,6h-17C7.671,6,7,5.329,7,4.5S7.671,3,8.5,3h17C26.328,3,27,3.671,27,4.5S26.328,6,25.5,6z M27,11.5 c0-0.829-0.672-1.5-1.5-1.5h-10c-0.828,0-1.5,0.671-1.5,1.5s0.672,1.5,1.5,1.5h10C26.328,13,27,12.329,27,11.5z M17,18.75 c0-0.828-0.672-1.5-1.5-1.5h-14c-0.829,0-1.5,0.672-1.5,1.5s0.671,1.5,1.5,1.5h14C16.328,20.25,17,19.578,17,18.75z M4,4.5 C4,3.671,3.329,3,2.5,3h-1C0.671,3,0,3.671,0,4.5S0.671,6,1.5,6h1C3.329,6,4,5.329,4,4.5z M11,11.5c0-0.829-0.671-1.5-1.5-1.5h-8 C0.671,10,0,10.671,0,11.5S0.671,13,1.5,13h8C10.329,13,11,12.329,11,11.5z M27,18.75c0-0.828-0.672-1.5-1.5-1.5h-4 c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h4C26.328,20.25,27,19.578,27,18.75z"/>
</svg>
</span> Names
</a> </h3> </li> <li class="color-tutorials"> <h3 property="name">
<a property="url" class="" href="/tutorials/"> <span class="black hide-md"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="18px" viewBox="0 0 32 18" enable-background="new 0 0 32 18" xml:space="preserve">
<path class="fill" d="M8.499,14c-0.297,0-0.597-0.088-0.859-0.271l-5-3.5C2.239,9.948,2,9.489,2,9s0.239-0.948,0.64-1.229l5-3.5 c0.679-0.475,1.615-0.31,2.089,0.369c0.475,0.679,0.31,1.614-0.369,2.089L6.116,9l3.245,2.271c0.679,0.475,0.844,1.41,0.369,2.088 C9.437,13.777,8.972,14,8.499,14z M24.359,13.729l5-3.5C29.761,9.948,30,9.489,30,9s-0.239-0.948-0.641-1.229l-5-3.5 c-0.676-0.474-1.613-0.31-2.088,0.369c-0.477,0.679-0.312,1.614,0.367,2.089L25.885,9l-3.244,2.271 c-0.68,0.475-0.845,1.41-0.369,2.088C22.562,13.777,23.029,14,23.501,14C23.798,14,24.1,13.912,24.359,13.729z M14.324,16.967 l6.125-14.785c0.316-0.766-0.047-1.643-0.812-1.96c-0.765-0.317-1.644,0.046-1.96,0.812l-6.125,14.784 c-0.317,0.767,0.046,1.644,0.812,1.961c0.188,0.078,0.382,0.113,0.574,0.113C13.526,17.893,14.084,17.544,14.324,16.967z"/>
</svg></span> Tutorials
</a> </h3> </li> <li class="color-resources"> <h3 property="name">
<a property="url" class="" href="/resources/"> <span class="black hide-md"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 27 27" enable-background="new 0 0 27 27" xml:space="preserve">
<path class="fill" d="M19.157,15c-0.384,0-0.768-0.146-1.061-0.439c-0.586-0.585-0.586-1.536,0-2.121l4.949-4.949l-3.534-3.536l-4.951,4.95 c-0.586,0.585-1.536,0.585-2.122,0c-0.585-0.586-0.585-1.536,0-2.122l6.012-6.01c0.281-0.281,0.663-0.439,1.061-0.439l0,0 c0.398,0,0.779,0.158,1.061,0.439l5.655,5.657c0.586,0.586,0.586,1.536,0,2.121l-6.01,6.01C19.925,14.854,19.541,15,19.157,15z M8.551,26.229l6.717-6.718c0.586-0.586,0.586-1.535,0-2.121s-1.536-0.586-2.121,0L7.49,23.047l-3.536-3.536l5.656-5.657 c0.586-0.586,0.586-1.536,0-2.121c-0.586-0.586-1.536-0.586-2.121,0L0.772,18.45c-0.586,0.586-0.586,1.535,0,2.121l5.657,5.657 c0.281,0.281,0.663,0.439,1.061,0.439S8.27,26.51,8.551,26.229z M10.318,18.804l8.485-8.485c0.586-0.585,0.586-1.536,0-2.121 c-0.586-0.586-1.535-0.586-2.121,0l-8.485,8.485c-0.586,0.586-0.586,1.535,0,2.121c0.293,0.293,0.677,0.439,1.061,0.439 S10.025,19.097,10.318,18.804z"/>
</svg>
</span> Resources
</a> </h3> </li> <!-- <li class="nav_desktop__list-item color-shop"> <h3 class="nav-desktop__list-item--new" property="name"> <span class="black hide-md"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 27 27" enable-background="new 0 0 27 27" xml:space="preserve">
<path class="fill" d="M19.157,15c-0.384,0-0.768-0.146-1.061-0.439c-0.586-0.585-0.586-1.536,0-2.121l4.949-4.949l-3.534-3.536l-4.951,4.95 c-0.586,0.585-1.536,0.585-2.122,0c-0.585-0.586-0.585-1.536,0-2.122l6.012-6.01c0.281-0.281,0.663-0.439,1.061-0.439l0,0 c0.398,0,0.779,0.158,1.061,0.439l5.655,5.657c0.586,0.586,0.586,1.536,0,2.121l-6.01,6.01C19.925,14.854,19.541,15,19.157,15z M8.551,26.229l6.717-6.718c0.586-0.586,0.586-1.535,0-2.121s-1.536-0.586-2.121,0L7.49,23.047l-3.536-3.536l5.656-5.657 c0.586-0.586,0.586-1.536,0-2.121c-0.586-0.586-1.536-0.586-2.121,0L0.772,18.45c-0.586,0.586-0.586,1.535,0,2.121l5.657,5.657 c0.281,0.281,0.663,0.439,1.061,0.439S8.27,26.51,8.551,26.229z M10.318,18.804l8.485-8.485c0.586-0.585,0.586-1.536,0-2.121 c-0.586-0.586-1.535-0.586-2.121,0l-8.485,8.485c-0.586,0.586-0.586,1.535,0,2.121c0.293,0.293,0.677,0.439,1.061,0.439 S10.025,19.097,10.318,18.804z"/>
</svg>
</span> </h3> </li> --> <li class="credit"> <h3 property="name"> by <a href="https://dixonandmoe.com/">Dixon & Moe</a> </h3> </li> <li class="color-border hide-md"> <span class="purple"></span> <span class="magenta"></span> <span class="red"></span> <span class="orange"></span> </li> <li class="hide-md credits"> <h5> © 2015 – 2017 </h5> <h3><a href="http://dixonandmoe.com/">Dixon & Moe</a></h3> </li> </ul> <!-- <section class="subnav" > <ul class="row lower"> <li class="col-xs-24 hide-md languages"></li> <li class="color-codes"></li> <li class="show-md dixonandmoe"> <h4 property="name"><a href="http://dixonandmoe.com/">by Dixon & Moe</a></h4> </li> <li class="social header" > </li> </ul> </section> --> </nav> <nav id="mobile" class="row hide-md"> <div> <a class="mobile-logo" href="/"> <svg version="1.1" id="htmlcolorcodes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path fill="#581845" d="M15.891,15.887C14.852,16.927,13.471,17.5,12,17.5V24c3.207,0,6.223-1.25,8.489-3.52L15.891,15.887z" /> <path fill="#900C3F" d="M17.5,12c0,1.468-0.57,2.85-1.609,3.886l4.598,4.597C22.753,18.216,24,15.204,24,12H17.5z" /> <path fill="#C70039" d="M20.484,3.515L15.887,8.11C16.927,9.151,17.5,10.533,17.5,12H24C24,8.797,22.751,5.784,20.484,3.515z" /> <path fill="#FF5733" d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12v-6.5c-3.033,0-5.5-2.467-5.5-5.5S8.967,6.5,12,6.5 c1.468,0,2.85,0.572,3.889,1.612l4.594-4.599C18.215,1.248,15.203,0,12,0z" /> </svg> </a> <ol class="show-sm" vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="http://htmlcolorcodes.com/"> <h4 property="name">HTML Color Codes</h4> </a> <meta property="position" content="1"> </li> </ol> <h4 class="hide-sm"><a href="/">HTML Color Codes</a></h4> <a id="nav-open-button" class="nav-button gray hide-md"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="23px" viewBox="0 0 24 23" enable-background="new 0 0 24 23" xml:space="preserve"> <path class="fill" d="M21,6H3C2.171,6,1.5,5.329,1.5,4.5S2.171,3,3,3h18c0.828,0,1.5,0.671,1.5,1.5S21.828,6,21,6z M22.5,11.5 c0-0.829-0.672-1.5-1.5-1.5H3c-0.829,0-1.5,0.671-1.5,1.5C1.5,12.328,2.171,13,3,13h18C21.828,13,22.5,12.328,22.5,11.5z M22.5,18.5 c0-0.828-0.672-1.5-1.5-1.5H3c-0.829,0-1.5,0.672-1.5,1.5S2.171,20,3,20h18C21.828,20,22.5,19.328,22.5,18.5z" /> </svg> </a> </div> </nav> <header id="header" class="page-header magenta js-header"> <div class="home-group row show-sm"> <div class="home-group__social show-md"> <a id="Twitter" class="gray popup" target="_blank" href="https://twitter.com/share?url=http://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M24,4.557c-0.883,0.392-1.832,0.656-2.828,0.775c1.018-0.609,1.799-1.574,2.164-2.724 c-0.951,0.564-2.004,0.974-3.125,1.195c-0.898-0.957-2.18-1.555-3.596-1.555c-2.719,0-4.924,2.205-4.924,4.924 c0,0.386,0.044,0.762,0.128,1.122C7.728,8.087,4.1,6.127,1.67,3.148C1.247,3.875,1.003,4.722,1.003,5.625 c0,1.708,0.869,3.216,2.19,4.099c-0.807-0.025-1.566-0.247-2.23-0.616c0,0.021,0,0.041,0,0.062c0,2.386,1.697,4.375,3.95,4.829 C4.5,14.109,4.065,14.17,3.617,14.17c-0.317,0-0.625-0.029-0.926-0.088c0.626,1.955,2.445,3.379,4.6,3.42 c-1.685,1.32-3.808,2.107-6.115,2.107c-0.397,0-0.79-0.023-1.175-0.068c2.179,1.396,4.768,2.211,7.548,2.211 c9.057,0,14.01-7.502,14.01-14.008c0-0.213-0.004-0.426-0.016-0.637C22.504,6.412,23.34,5.543,24,4.557z" /> </svg> </a> <a id="Facebook" class="gray popup" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://htmlcolorcodes.com/"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M9.156,23V12.965H5.743V9.054h3.414V6.17c0-3.349,2.068-5.17,5.088-5.17c1.44,0,2.688,0.107,3.049,0.155 v3.498L15.2,4.654c-1.642,0-1.96,0.772-1.96,1.903v2.497h3.914l-0.508,3.911H13.24V23H9.156z" /> </svg> </a> <a id="Google+" class="gray popup" target="_blank" href="https://plus.google.com/share?url=http://htmlcolorcodes.com/"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M15.241,0H8.963c-0.834,0-1.727,0.097-2.68,0.292C5.322,0.517,4.394,1,3.503,1.737c-1.301,1.261-1.95,2.665-1.95,4.213 c0,1.281,0.459,2.404,1.376,3.367c0.876,1.036,2.149,1.563,3.82,1.584c0.316,0,0.653-0.021,1.01-0.062 c-0.06,0.165-0.124,0.345-0.192,0.541c-0.079,0.185-0.118,0.417-0.118,0.695c0,0.465,0.103,0.86,0.311,1.19 c0.177,0.342,0.378,0.659,0.604,0.959c-0.731,0.021-1.651,0.111-2.761,0.275c-1.119,0.191-2.188,0.583-3.204,1.166 c-0.905,0.542-1.531,1.17-1.876,1.889c-0.356,0.717-0.534,1.364-0.534,1.947c0,1.197,0.547,2.229,1.643,3.085 C2.715,23.509,4.356,23.979,6.555,24c2.627-0.041,4.637-0.671,6.03-1.891c1.344-1.18,2.015-2.533,2.015-4.062 c-0.019-1.075-0.264-1.946-0.733-2.612c-0.5-0.656-1.08-1.254-1.742-1.797l-1.064-0.878c-0.153-0.153-0.312-0.331-0.476-0.538 c-0.191-0.215-0.287-0.487-0.287-0.814c0-0.338,0.094-0.636,0.28-0.892c0.158-0.246,0.331-0.466,0.519-0.661 c0.327-0.287,0.636-0.569,0.926-0.846c0.262-0.277,0.509-0.579,0.743-0.907c0.479-0.676,0.725-1.578,0.744-2.706 c0-0.616-0.069-1.153-0.207-1.614c-0.168-0.461-0.359-0.861-0.577-1.2c-0.228-0.358-0.458-0.661-0.695-0.907 c-0.247-0.236-0.468-0.416-0.665-0.539h1.937L15.241,0z M11.8,17.191c0.52,0.597,0.779,1.293,0.779,2.093 c0,0.983-0.381,1.786-1.141,2.411c-0.779,0.638-1.909,0.966-3.388,0.986c-1.649-0.021-2.949-0.393-3.899-1.108 c-1-0.718-1.499-1.63-1.499-2.736c0-0.563,0.115-1.046,0.345-1.446c0.2-0.379,0.445-0.697,0.735-0.953 c0.299-0.246,0.594-0.436,0.884-0.567c0.29-0.123,0.516-0.216,0.675-0.277c0.679-0.204,1.345-0.354,1.994-0.444 c0.659-0.062,1.069-0.082,1.23-0.062c0.27,0,0.504,0.009,0.705,0.03C10.39,15.936,11.248,16.629,11.8,17.191z M10.781,7.916 c-0.077,0.421-0.248,0.833-0.514,1.232c-0.551,0.565-1.24,0.863-2.066,0.894c-0.653,0-1.235-0.199-1.745-0.6 C5.948,9.041,5.532,8.553,5.211,7.978c-0.665-1.232-0.997-2.419-0.997-3.56C4.193,3.556,4.422,2.775,4.896,2.077 C5.461,1.409,6.167,1.065,7.02,1.044c0.643,0.021,1.211,0.21,1.707,0.571c0.485,0.379,0.875,0.873,1.173,1.478 c0.633,1.264,0.949,2.518,0.949,3.76C10.849,7.141,10.826,7.495,10.781,7.916z M24.013,11h-3v3h-2v-3h-3V9h3V6h2v3h3V11z" /> </svg> </a> <a id="Pinterest" class="gray popup" target="_blank" href="https://pinterest.com/pin/create/button/?url=http://htmlcolorcodes.com/&media=http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg&description=Easily%20find%20HTML%20color%20codes%20for%20your%20website%20using%20our%20color%20picker,%20color%20chart%20and%20HTML%20color%20names%20with%20Hex%20color%20codes,%20RGB%20and%20HSL%20values."> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M12,0C5.373,0,0,5.373,0,11.999c0,4.915,2.955,9.136,7.184,10.991c-0.035-0.838-0.006-1.844,0.209-2.756 c0.23-0.974,1.543-6.537,1.543-6.537s-0.383-0.768-0.383-1.9c0-1.778,1.031-3.106,2.314-3.106c1.092,0,1.619,0.82,1.619,1.802 c0,1.098-0.701,2.739-1.062,4.26c-0.301,1.272,0.64,2.312,1.896,2.312c2.272,0,3.805-2.92,3.805-6.38 c0-2.631-1.771-4.598-4.994-4.598c-3.639,0-5.906,2.713-5.906,5.745c0,1.046,0.307,1.784,0.791,2.354 c0.221,0.263,0.252,0.367,0.172,0.668c-0.059,0.222-0.189,0.754-0.244,0.965c-0.08,0.304-0.326,0.412-0.602,0.3 c-1.676-0.685-2.457-2.521-2.457-4.586c0-3.408,2.875-7.495,8.576-7.495c4.582,0,7.598,3.315,7.598,6.873 c0,4.709-2.617,8.226-6.475,8.226c-1.297,0-2.516-0.7-2.932-1.495c0,0-0.697,2.764-0.846,3.297 c-0.254,0.926-0.752,1.852-1.207,2.571C9.68,23.826,10.818,24,12,24c6.627,0,12-5.372,12-12.001C24,5.373,18.627,0,12,0z" /> </svg> </a> </div> <div class="home-group__content"> <h1 class="home-group__content-title" property="name">HTML Color Codes</h1> <p class="home-group__content-description" property="description">Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names. Let's go! </p> </div> <div class="home-group__aside show-md"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Responsive Unit --> <ins class="adsbygoogle responsive-ad-unit-300" style="display:block;max-height:250px;" data-ad-client="ca-pub-6244236343601184" data-ad-slot="9389581559" data-ad-format="rectangle"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- <h5 class="home-group__aside-title">What's New</h5> --> <!-- <div class="home-group__aside-advert"></div> --> </div> </div> <div class="animation row"> <div class="letter letter-c purple"> <div class="box-1"></div> <div class="donut deg180-1"></div> </div> <div class="letter letter-o magenta"> <div class="box-1"></div> <div class="donut deg45-1"></div> <div class="donut deg45-2"></div> <div class="donut deg45-3"></div> <div class="donut deg45-4"></div> <div class="donut deg45-5"></div> </div> <div class="letter letter-l red"> <div class="box-1"></div> <div class="box-2"></div> <div class="line top"></div> <div class="donut deg45-1"></div> </div> <div class="letter letter-o orange"> <div class="box-1"></div> <div class="donut deg45-1"></div> <div class="donut deg45-2"></div> <div class="donut deg45-3"></div> <div class="donut deg45-4"></div> <div class="donut deg45-5"></div> </div> <div class="letter letter-r yellow"> <div class="box-1"></div> <div class="box-2"></div> <div class="donut deg45-1"></div> <div class="line bottom"></div> </div> </div> </header> <nav id="color" class="color-nav"> <div class="color-icon show-md"> <svg version="1.1" id="color-data" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="16px" viewBox="-0.5 21.5 24 16" enable-background="new -0.5 21.5 24 16" xml:space="preserve"> <path fill="#C3C3C3" d="M1,37.5c-0.829,0-1.5-0.672-1.5-1.5v-4c0-0.828,0.671-1.5,1.5-1.5s1.5,0.672,1.5,1.5v4 C2.5,36.828,1.829,37.5,1,37.5z M9.5,36v-8c0-0.828-0.671-1.5-1.5-1.5S6.5,27.172,6.5,28v8c0,0.828,0.671,1.5,1.5,1.5 S9.5,36.828,9.5,36z M16.5,36v-6c0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5v6c0,0.828,0.672,1.5,1.5,1.5S16.5,36.828,16.5,36z M23.5,36V25c0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5v11c0,0.828,0.672,1.5,1.5,1.5S23.5,36.828,23.5,36z" /> </svg> </div> <div class="color-data"> <div class="color-swatch" title="Selected color"> <div class="js-swatch js-star" style="background-color: #FF5733"></div> </div> <div class="color-label hex"> <h5>HEX</h5> </div> <div class="color-code hex" title="Hexadecimal value"> <span class="hex js-hex selectable">#FF5733</span> </div> <div class="color-label rgb show-sm-inline"> <h5>RGB</h5> </div> <div class="color-code rgb show-sm-inline" title="Red, green and blue values"> <span class="rgb js-rgb selectable">255, 87, 51</span> </div> <div class="color-label hsl show-md-inline"> <h5>HSL</h5> </div> <div class="color-code hsl show-md-inline" title="Hue, saturation and lightness values"> <span class="hsl js-hsl selectable">11, 80%, 60%</span> </div> <div class="color-export" title="Export palette"> <h5 class="export gray show-md js-export" data-export="palette"><svg version="1.1" class="button-svg" data-export="palette" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path class="fill" data-export="palette" d="M17.938,11.671l-5,4c-0.008,0.009-0.021,0.011-0.029,0.017c-0.118,0.09-0.248,0.164-0.389,0.215 c-0.024,0.011-0.049,0.017-0.075,0.023C12.303,15.971,12.155,16,12,16s-0.303-0.029-0.443-0.074 c-0.025-0.008-0.05-0.014-0.074-0.023c-0.142-0.051-0.271-0.125-0.389-0.215c-0.009-0.006-0.021-0.008-0.03-0.017l-5-4 C5.417,11.153,5.312,10.21,5.83,9.563c0.518-0.646,1.462-0.751,2.108-0.234l2.563,2.05V3.5C10.5,2.671,11.171,2,12,2 s1.5,0.671,1.5,1.5v7.879l2.562-2.05c0.649-0.518,1.592-0.413,2.107,0.234C18.688,10.21,18.584,11.154,17.938,11.671z M23,19.5v-4 c0-0.828-0.672-1.5-1.5-1.5S20,14.672,20,15.5V19H4v-3.5C4,14.672,3.329,14,2.5,14S1,14.672,1,15.5v4C1,20.879,2.122,22,3.5,22h17 C21.879,22,23,20.879,23,19.5z"/>
</svg></h5> <h5 class="export gray show-sm-only"> <a target="_blank" href="/export/?type=palette"><svg version="1.1" class="button-svg" data-export="palette" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path class="fill" data-export="palette" d="M17.938,11.671l-5,4c-0.008,0.009-0.021,0.011-0.029,0.017c-0.118,0.09-0.248,0.164-0.389,0.215 c-0.024,0.011-0.049,0.017-0.075,0.023C12.303,15.971,12.155,16,12,16s-0.303-0.029-0.443-0.074 c-0.025-0.008-0.05-0.014-0.074-0.023c-0.142-0.051-0.271-0.125-0.389-0.215c-0.009-0.006-0.021-0.008-0.03-0.017l-5-4 C5.417,11.153,5.312,10.21,5.83,9.563c0.518-0.646,1.462-0.751,2.108-0.234l2.563,2.05V3.5C10.5,2.671,11.171,2,12,2 s1.5,0.671,1.5,1.5v7.879l2.562-2.05c0.649-0.518,1.592-0.413,2.107,0.234C18.688,10.21,18.584,11.154,17.938,11.671z M23,19.5v-4 c0-0.828-0.672-1.5-1.5-1.5S20,14.672,20,15.5V19H4v-3.5C4,14.672,3.329,14,2.5,14S1,14.672,1,15.5v4C1,20.879,2.122,22,3.5,22h17 C21.879,22,23,20.879,23,19.5z"/>
</svg></a> </h5> </div> </div> <div class="mobile-palette js-mobile-palette"></div> <div class="color-palette js-palette"></div> <div class="mobile-export hide-sm" title="Export palette"> <h5 class="export gray" data-export="palette">
<a target="_blank" href="/export/?type=palette"> <svg version="1.1" class="button-svg" data-export="palette" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path class="fill" data-export="palette" d="M17.938,11.671l-5,4c-0.008,0.009-0.021,0.011-0.029,0.017c-0.118,0.09-0.248,0.164-0.389,0.215 c-0.024,0.011-0.049,0.017-0.075,0.023C12.303,15.971,12.155,16,12,16s-0.303-0.029-0.443-0.074 c-0.025-0.008-0.05-0.014-0.074-0.023c-0.142-0.051-0.271-0.125-0.389-0.215c-0.009-0.006-0.021-0.008-0.03-0.017l-5-4 C5.417,11.153,5.312,10.21,5.83,9.563c0.518-0.646,1.462-0.751,2.108-0.234l2.563,2.05V3.5C10.5,2.671,11.171,2,12,2 s1.5,0.671,1.5,1.5v7.879l2.562-2.05c0.649-0.518,1.592-0.413,2.107,0.234C18.688,10.21,18.584,11.154,17.938,11.671z M23,19.5v-4 c0-0.828-0.672-1.5-1.5-1.5S20,14.672,20,15.5V19H4v-3.5C4,14.672,3.329,14,2.5,14S1,14.672,1,15.5v4C1,20.879,2.122,22,3.5,22h17 C21.879,22,23,20.879,23,19.5z"/>
</svg> Export palette
</a> </h5> </div> </nav> <main id="main" class="row animate delay-125 fadeIn" property="mainContentOfPage" typeof="WebPageElement" role="main"> <aside class="social js-social show-md"> <a id="Twitter" class="gray popup" target="_blank" href="https://twitter.com/share?url=http://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M24,4.557c-0.883,0.392-1.832,0.656-2.828,0.775c1.018-0.609,1.799-1.574,2.164-2.724 c-0.951,0.564-2.004,0.974-3.125,1.195c-0.898-0.957-2.18-1.555-3.596-1.555c-2.719,0-4.924,2.205-4.924,4.924 c0,0.386,0.044,0.762,0.128,1.122C7.728,8.087,4.1,6.127,1.67,3.148C1.247,3.875,1.003,4.722,1.003,5.625 c0,1.708,0.869,3.216,2.19,4.099c-0.807-0.025-1.566-0.247-2.23-0.616c0,0.021,0,0.041,0,0.062c0,2.386,1.697,4.375,3.95,4.829 C4.5,14.109,4.065,14.17,3.617,14.17c-0.317,0-0.625-0.029-0.926-0.088c0.626,1.955,2.445,3.379,4.6,3.42 c-1.685,1.32-3.808,2.107-6.115,2.107c-0.397,0-0.79-0.023-1.175-0.068c2.179,1.396,4.768,2.211,7.548,2.211 c9.057,0,14.01-7.502,14.01-14.008c0-0.213-0.004-0.426-0.016-0.637C22.504,6.412,23.34,5.543,24,4.557z" /> </svg> </a> <a id="Facebook" class="gray popup" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://htmlcolorcodes.com/"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M9.156,23V12.965H5.743V9.054h3.414V6.17c0-3.349,2.068-5.17,5.088-5.17c1.44,0,2.688,0.107,3.049,0.155 v3.498L15.2,4.654c-1.642,0-1.96,0.772-1.96,1.903v2.497h3.914l-0.508,3.911H13.24V23H9.156z" /> </svg> </a> <a id="Google+" class="gray popup" target="_blank" href="https://plus.google.com/share?url=http://htmlcolorcodes.com/"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M15.241,0H8.963c-0.834,0-1.727,0.097-2.68,0.292C5.322,0.517,4.394,1,3.503,1.737c-1.301,1.261-1.95,2.665-1.95,4.213 c0,1.281,0.459,2.404,1.376,3.367c0.876,1.036,2.149,1.563,3.82,1.584c0.316,0,0.653-0.021,1.01-0.062 c-0.06,0.165-0.124,0.345-0.192,0.541c-0.079,0.185-0.118,0.417-0.118,0.695c0,0.465,0.103,0.86,0.311,1.19 c0.177,0.342,0.378,0.659,0.604,0.959c-0.731,0.021-1.651,0.111-2.761,0.275c-1.119,0.191-2.188,0.583-3.204,1.166 c-0.905,0.542-1.531,1.17-1.876,1.889c-0.356,0.717-0.534,1.364-0.534,1.947c0,1.197,0.547,2.229,1.643,3.085 C2.715,23.509,4.356,23.979,6.555,24c2.627-0.041,4.637-0.671,6.03-1.891c1.344-1.18,2.015-2.533,2.015-4.062 c-0.019-1.075-0.264-1.946-0.733-2.612c-0.5-0.656-1.08-1.254-1.742-1.797l-1.064-0.878c-0.153-0.153-0.312-0.331-0.476-0.538 c-0.191-0.215-0.287-0.487-0.287-0.814c0-0.338,0.094-0.636,0.28-0.892c0.158-0.246,0.331-0.466,0.519-0.661 c0.327-0.287,0.636-0.569,0.926-0.846c0.262-0.277,0.509-0.579,0.743-0.907c0.479-0.676,0.725-1.578,0.744-2.706 c0-0.616-0.069-1.153-0.207-1.614c-0.168-0.461-0.359-0.861-0.577-1.2c-0.228-0.358-0.458-0.661-0.695-0.907 c-0.247-0.236-0.468-0.416-0.665-0.539h1.937L15.241,0z M11.8,17.191c0.52,0.597,0.779,1.293,0.779,2.093 c0,0.983-0.381,1.786-1.141,2.411c-0.779,0.638-1.909,0.966-3.388,0.986c-1.649-0.021-2.949-0.393-3.899-1.108 c-1-0.718-1.499-1.63-1.499-2.736c0-0.563,0.115-1.046,0.345-1.446c0.2-0.379,0.445-0.697,0.735-0.953 c0.299-0.246,0.594-0.436,0.884-0.567c0.29-0.123,0.516-0.216,0.675-0.277c0.679-0.204,1.345-0.354,1.994-0.444 c0.659-0.062,1.069-0.082,1.23-0.062c0.27,0,0.504,0.009,0.705,0.03C10.39,15.936,11.248,16.629,11.8,17.191z M10.781,7.916 c-0.077,0.421-0.248,0.833-0.514,1.232c-0.551,0.565-1.24,0.863-2.066,0.894c-0.653,0-1.235-0.199-1.745-0.6 C5.948,9.041,5.532,8.553,5.211,7.978c-0.665-1.232-0.997-2.419-0.997-3.56C4.193,3.556,4.422,2.775,4.896,2.077 C5.461,1.409,6.167,1.065,7.02,1.044c0.643,0.021,1.211,0.21,1.707,0.571c0.485,0.379,0.875,0.873,1.173,1.478 c0.633,1.264,0.949,2.518,0.949,3.76C10.849,7.141,10.826,7.495,10.781,7.916z M24.013,11h-3v3h-2v-3h-3V9h3V6h2v3h3V11z" /> </svg> </a> <a id="Pinterest" class="gray popup" target="_blank" href="https://pinterest.com/pin/create/button/?url=http://htmlcolorcodes.com/&media=http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg&description=Easily%20find%20HTML%20color%20codes%20for%20your%20website%20using%20our%20color%20picker,%20color%20chart%20and%20HTML%20color%20names%20with%20Hex%20color%20codes,%20RGB%20and%20HSL%20values."> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M12,0C5.373,0,0,5.373,0,11.999c0,4.915,2.955,9.136,7.184,10.991c-0.035-0.838-0.006-1.844,0.209-2.756 c0.23-0.974,1.543-6.537,1.543-6.537s-0.383-0.768-0.383-1.9c0-1.778,1.031-3.106,2.314-3.106c1.092,0,1.619,0.82,1.619,1.802 c0,1.098-0.701,2.739-1.062,4.26c-0.301,1.272,0.64,2.312,1.896,2.312c2.272,0,3.805-2.92,3.805-6.38 c0-2.631-1.771-4.598-4.994-4.598c-3.639,0-5.906,2.713-5.906,5.745c0,1.046,0.307,1.784,0.791,2.354 c0.221,0.263,0.252,0.367,0.172,0.668c-0.059,0.222-0.189,0.754-0.244,0.965c-0.08,0.304-0.326,0.412-0.602,0.3 c-1.676-0.685-2.457-2.521-2.457-4.586c0-3.408,2.875-7.495,8.576-7.495c4.582,0,7.598,3.315,7.598,6.873 c0,4.709-2.617,8.226-6.475,8.226c-1.297,0-2.516-0.7-2.932-1.495c0,0-0.697,2.764-0.846,3.297 c-0.254,0.926-0.752,1.852-1.207,2.571C9.68,23.826,10.818,24,12,24c6.627,0,12-5.372,12-12.001C24,5.373,18.627,0,12,0z" /> </svg> </a> </aside> <article id="home" class="home color-picker show-sm js-content" vocab="http://schema.org/" typeof="Article"> <meta property="image" content="http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg"> <meta property="datePublished" content="2015-09-03"> <header class="row"> <div id="js-picker"></div> <h2 property="headline">
<a property="url" href="/color-picker/"> Color Picker
</a> </h2> <p property="description">Find that perfect color with our <a href="http://htmlcolorcodes.com/color-picker/">color picker</a> and discover beautiful color harmonies, tints, shades and tones; input Hex color codes, RGB and HSL values, and generate HTML, CSS and SCSS styles. </p> <div class="buttons row"> <a href="/color-picker/"> <div class="button border gray"> <h5 class="arrow gray">Take it for a spin!<svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></h5> </div> </a> </div> </header> <aside class="sidebar js-sidebar"> <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script> <div class="bsa-cpc"></div> <script> (function(){ if(typeof _bsa !== 'undefined' && _bsa) { _bsa.init('default', 'CVAIKKQM', 'placement:demo', { target: '.bsa-cpc', align: 'horizontal', disable_css: 'true' }); } })(); </script> <h5>Picking Colors</h5> <h6 class="gray arrow-icon"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11,5H4V3c0-0.202-0.122-0.385-0.309-0.462C3.505,2.459,3.29,2.503,3.146,2.646l-3,3c-0.195,0.195-0.195,0.512,0,0.707l3,3 C3.242,9.449,3.37,9.5,3.5,9.5c0.064,0,0.129-0.013,0.191-0.038C3.878,9.385,4,9.202,4,9V7h7c0.553,0,1-0.448,1-1S11.553,5,11,5z"/>
</svg> Click the color swatch at left to add it to your palette.</h6> <h5>Saving Colors</h5> <h6 class="gray lock-icon"><img src="http://htmlcolorcodes.com/assets/images/button-lock-39f7f620.svg" /> / <img src="http://htmlcolorcodes.com/assets/images/button-unlock-9b2e5485.svg" /> save and unsave colors in your palette; they'll be here on your next visit.</h6> <h5>Exporting Colors</h5> <h6 class="gray export-icon"><svg version="1.1" class="button-svg" data-export="palette" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path class="fill" data-export="palette" d="M17.938,11.671l-5,4c-0.008,0.009-0.021,0.011-0.029,0.017c-0.118,0.09-0.248,0.164-0.389,0.215 c-0.024,0.011-0.049,0.017-0.075,0.023C12.303,15.971,12.155,16,12,16s-0.303-0.029-0.443-0.074 c-0.025-0.008-0.05-0.014-0.074-0.023c-0.142-0.051-0.271-0.125-0.389-0.215c-0.009-0.006-0.021-0.008-0.03-0.017l-5-4 C5.417,11.153,5.312,10.21,5.83,9.563c0.518-0.646,1.462-0.751,2.108-0.234l2.563,2.05V3.5C10.5,2.671,11.171,2,12,2 s1.5,0.671,1.5,1.5v7.879l2.562-2.05c0.649-0.518,1.592-0.413,2.107,0.234C18.688,10.21,18.584,11.154,17.938,11.671z M23,19.5v-4 c0-0.828-0.672-1.5-1.5-1.5S20,14.672,20,15.5V19H4v-3.5C4,14.672,3.329,14,2.5,14S1,14.672,1,15.5v4C1,20.879,2.122,22,3.5,22h17 C21.879,22,23,20.879,23,19.5z"/>
</svg> exports your current palette in Hex, RGB, HTML, CSS and SCSS formats. Try it!</h6> <div class="show-md"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Responsive Unit --> <ins class="adsbygoogle responsive-ad-unit-300" style="display:block;max-height:250px;" data-ad-client="ca-pub-6244236343601184" data-ad-slot="9389581559" data-ad-format="rectangle"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </article> <article class="home color-charts show-sm" vocab="http://schema.org/" typeof="Article"> <meta property="image" content="http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg"> <meta property="datePublished" content="2015-09-03"> <header id="flat" class="chart row"> <div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #f9ebea" data-hex="#f9ebea" data-rgb="249, 235, 234" data-hsl="6, 54%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f2d7d5" data-hex="#f2d7d5" data-rgb="242, 215, 213" data-hsl="6, 54%, 89%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #e6b0aa" data-hex="#e6b0aa" data-rgb="230, 176, 170" data-hsl="6, 54%, 78%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d98880" data-hex="#d98880" data-rgb="217, 136, 128" data-hsl="6, 54%, 68%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #cd6155" data-hex="#cd6155" data-rgb="205, 97, 85" data-hsl="6, 54%, 57%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #c0392b" data-hex="#c0392b" data-rgb="192, 57, 43" data-hsl="6, 63%, 46%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #a93226" data-hex="#a93226" data-rgb="169, 50, 38" data-hsl="6, 63%, 41%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #922b21" data-hex="#922b21" data-rgb="146, 43, 33" data-hsl="6, 63%, 35%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #7b241c" data-hex="#7b241c" data-rgb="123, 36, 28" data-hsl="6, 63%, 29%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #641e16" data-hex="#641e16" data-rgb="100, 30, 22" data-hsl="6, 63%, 24%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #fdedec" data-hex="#fdedec" data-rgb="253, 237, 236" data-hsl="6, 78%, 96%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #fadbd8" data-hex="#fadbd8" data-rgb="250, 219, 216" data-hsl="6, 78%, 91%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f5b7b1" data-hex="#f5b7b1" data-rgb="245, 183, 177" data-hsl="6, 78%, 83%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f1948a" data-hex="#f1948a" data-rgb="241, 148, 138" data-hsl="6, 78%, 74%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #ec7063" data-hex="#ec7063" data-rgb="236, 112, 99" data-hsl="6, 78%, 66%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #e74c3c" data-hex="#e74c3c" data-rgb="231, 76, 60" data-hsl="6, 78%, 57%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #cb4335" data-hex="#cb4335" data-rgb="203, 67, 53" data-hsl="6, 59%, 50%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #b03a2e" data-hex="#b03a2e" data-rgb="176, 58, 46" data-hsl="6, 59%, 43%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #943126" data-hex="#943126" data-rgb="148, 49, 38" data-hsl="6, 59%, 37%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #78281f" data-hex="#78281f" data-rgb="120, 40, 31" data-hsl="6, 59%, 30%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #f5eef8" data-hex="#f5eef8" data-rgb="245, 238, 248" data-hsl="283, 39%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #ebdef0" data-hex="#ebdef0" data-rgb="235, 222, 240" data-hsl="283, 39%, 91%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d7bde2" data-hex="#d7bde2" data-rgb="215, 189, 226" data-hsl="283, 39%, 81%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #c39bd3" data-hex="#c39bd3" data-rgb="195, 155, 211" data-hsl="283, 39%, 72%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #af7ac5" data-hex="#af7ac5" data-rgb="175, 122, 197" data-hsl="283, 39%, 63%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #9b59b6" data-hex="#9b59b6" data-rgb="155, 89, 182" data-hsl="283, 39%, 53%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #884ea0" data-hex="#884ea0" data-rgb="136, 78, 160" data-hsl="283, 34%, 47%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #76448a" data-hex="#76448a" data-rgb="118, 68, 138" data-hsl="283, 34%, 40%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #633974" data-hex="#633974" data-rgb="99, 57, 116" data-hsl="283, 34%, 34%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #512e5f" data-hex="#512e5f" data-rgb="81, 46, 95" data-hsl="283, 34%, 28%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #f4ecf7" data-hex="#f4ecf7" data-rgb="244, 236, 247" data-hsl="282, 39%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #e8daef" data-hex="#e8daef" data-rgb="232, 218, 239" data-hsl="282, 39%, 89%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d2b4de" data-hex="#d2b4de" data-rgb="210, 180, 222" data-hsl="282, 39%, 79%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #bb8fce" data-hex="#bb8fce" data-rgb="187, 143, 206" data-hsl="282, 39%, 68%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #a569bd" data-hex="#a569bd" data-rgb="165, 105, 189" data-hsl="282, 39%, 58%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #8e44ad" data-hex="#8e44ad" data-rgb="142, 68, 173" data-hsl="282, 44%, 47%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #7d3c98" data-hex="#7d3c98" data-rgb="125, 60, 152" data-hsl="282, 44%, 42%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #6c3483" data-hex="#6c3483" data-rgb="108, 52, 131" data-hsl="282, 44%, 36%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #5b2c6f" data-hex="#5b2c6f" data-rgb="91, 44, 111" data-hsl="282, 44%, 30%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #4a235a" data-hex="#4a235a" data-rgb="74, 35, 90" data-hsl="282, 44%, 25%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #eaf2f8" data-hex="#eaf2f8" data-rgb="234, 242, 248" data-hsl="204, 51%, 94%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d4e6f1" data-hex="#d4e6f1" data-rgb="212, 230, 241" data-hsl="204, 51%, 89%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #a9cce3" data-hex="#a9cce3" data-rgb="169, 204, 227" data-hsl="204, 51%, 78%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #7fb3d5" data-hex="#7fb3d5" data-rgb="127, 179, 213" data-hsl="204, 51%, 67%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #5499c7" data-hex="#5499c7" data-rgb="84, 153, 199" data-hsl="204, 51%, 55%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #2980b9" data-hex="#2980b9" data-rgb="41, 128, 185" data-hsl="204, 64%, 44%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #2471a3" data-hex="#2471a3" data-rgb="36, 113, 163" data-hsl="204, 64%, 39%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #1f618d" data-hex="#1f618d" data-rgb="31, 97, 141" data-hsl="204, 64%, 34%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #1a5276" data-hex="#1a5276" data-rgb="26, 82, 118" data-hsl="204, 64%, 28%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #154360" data-hex="#154360" data-rgb="21, 67, 96" data-hsl="204, 64%, 23%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #ebf5fb" data-hex="#ebf5fb" data-rgb="235, 245, 251" data-hsl="204, 70%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d6eaf8" data-hex="#d6eaf8" data-rgb="214, 234, 248" data-hsl="204, 70%, 91%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #aed6f1" data-hex="#aed6f1" data-rgb="174, 214, 241" data-hsl="204, 70%, 81%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #85c1e9" data-hex="#85c1e9" data-rgb="133, 193, 233" data-hsl="204, 70%, 72%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #5dade2" data-hex="#5dade2" data-rgb="93, 173, 226" data-hsl="204, 70%, 63%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #3498db" data-hex="#3498db" data-rgb="52, 152, 219" data-hsl="204, 70%, 53%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #2e86c1" data-hex="#2e86c1" data-rgb="46, 134, 193" data-hsl="204, 62%, 47%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #2874a6" data-hex="#2874a6" data-rgb="40, 116, 166" data-hsl="204, 62%, 40%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #21618c" data-hex="#21618c" data-rgb="33, 97, 140" data-hsl="204, 62%, 34%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #1b4f72" data-hex="#1b4f72" data-rgb="27, 79, 114" data-hsl="204, 62%, 28%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #e8f8f5" data-hex="#e8f8f5" data-rgb="232, 248, 245" data-hsl="168, 55%, 94%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d1f2eb" data-hex="#d1f2eb" data-rgb="209, 242, 235" data-hsl="168, 55%, 88%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #a3e4d7" data-hex="#a3e4d7" data-rgb="163, 228, 215" data-hsl="168, 55%, 77%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #76d7c4" data-hex="#76d7c4" data-rgb="118, 215, 196" data-hsl="168, 55%, 65%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #48c9b0" data-hex="#48c9b0" data-rgb="72, 201, 176" data-hsl="168, 55%, 54%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #1abc9c" data-hex="#1abc9c" data-rgb="26, 188, 156" data-hsl="168, 76%, 42%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #17a589" data-hex="#17a589" data-rgb="23, 165, 137" data-hsl="168, 76%, 37%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #148f77" data-hex="#148f77" data-rgb="20, 143, 119" data-hsl="168, 76%, 32%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #117864" data-hex="#117864" data-rgb="17, 120, 100" data-hsl="168, 76%, 27%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #0e6251" data-hex="#0e6251" data-rgb="14, 98, 81" data-hsl="168, 76%, 22%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #e8f6f3" data-hex="#e8f6f3" data-rgb="232, 246, 243" data-hsl="168, 42%, 94%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d0ece7" data-hex="#d0ece7" data-rgb="208, 236, 231" data-hsl="168, 42%, 87%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #a2d9ce" data-hex="#a2d9ce" data-rgb="162, 217, 206" data-hsl="168, 42%, 74%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #73c6b6" data-hex="#73c6b6" data-rgb="115, 198, 182" data-hsl="168, 42%, 61%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #45b39d" data-hex="#45b39d" data-rgb="69, 179, 157" data-hsl="168, 45%, 49%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #16a085" data-hex="#16a085" data-rgb="22, 160, 133" data-hsl="168, 76%, 36%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #138d75" data-hex="#138d75" data-rgb="19, 141, 117" data-hsl="168, 76%, 31%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #117a65" data-hex="#117a65" data-rgb="17, 122, 101" data-hsl="168, 76%, 27%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #0e6655" data-hex="#0e6655" data-rgb="14, 102, 85" data-hsl="168, 76%, 23%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #0b5345" data-hex="#0b5345" data-rgb="11, 83, 69" data-hsl="168, 76%, 19%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #e9f7ef" data-hex="#e9f7ef" data-rgb="233, 247, 239" data-hsl="145, 45%, 94%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d4efdf" data-hex="#d4efdf" data-rgb="212, 239, 223" data-hsl="145, 45%, 88%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #a9dfbf" data-hex="#a9dfbf" data-rgb="169, 223, 191" data-hsl="145, 45%, 77%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #7dcea0" data-hex="#7dcea0" data-rgb="125, 206, 160" data-hsl="145, 45%, 65%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #52be80" data-hex="#52be80" data-rgb="82, 190, 128" data-hsl="145, 45%, 53%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #27ae60" data-hex="#27ae60" data-rgb="39, 174, 96" data-hsl="145, 63%, 42%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #229954" data-hex="#229954" data-rgb="34, 153, 84" data-hsl="145, 63%, 37%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #1e8449" data-hex="#1e8449" data-rgb="30, 132, 73" data-hsl="145, 63%, 32%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #196f3d" data-hex="#196f3d" data-rgb="25, 111, 61" data-hsl="145, 63%, 27%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #145a32" data-hex="#145a32" data-rgb="20, 90, 50" data-hsl="145, 63%, 22%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #eafaf1" data-hex="#eafaf1" data-rgb="234, 250, 241" data-hsl="145, 61%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d5f5e3" data-hex="#d5f5e3" data-rgb="213, 245, 227" data-hsl="145, 61%, 90%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #abebc6" data-hex="#abebc6" data-rgb="171, 235, 198" data-hsl="145, 61%, 80%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #82e0aa" data-hex="#82e0aa" data-rgb="130, 224, 170" data-hsl="145, 61%, 69%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #58d68d" data-hex="#58d68d" data-rgb="88, 214, 141" data-hsl="145, 61%, 59%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #2ecc71" data-hex="#2ecc71" data-rgb="46, 204, 113" data-hsl="145, 63%, 49%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #28b463" data-hex="#28b463" data-rgb="40, 180, 99" data-hsl="145, 63%, 43%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #239b56" data-hex="#239b56" data-rgb="35, 155, 86" data-hsl="145, 63%, 37%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #1d8348" data-hex="#1d8348" data-rgb="29, 131, 72" data-hsl="145, 63%, 31%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #186a3b" data-hex="#186a3b" data-rgb="24, 106, 59" data-hsl="145, 63%, 25%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #fef9e7" data-hex="#fef9e7" data-rgb="254, 249, 231" data-hsl="48, 89%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #fcf3cf" data-hex="#fcf3cf" data-rgb="252, 243, 207" data-hsl="48, 89%, 90%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f9e79f" data-hex="#f9e79f" data-rgb="249, 231, 159" data-hsl="48, 89%, 80%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f7dc6f" data-hex="#f7dc6f" data-rgb="247, 220, 111" data-hsl="48, 89%, 70%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f4d03f" data-hex="#f4d03f" data-rgb="244, 208, 63" data-hsl="48, 89%, 60%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f1c40f" data-hex="#f1c40f" data-rgb="241, 196, 15" data-hsl="48, 89%, 50%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d4ac0d" data-hex="#d4ac0d" data-rgb="212, 172, 13" data-hsl="48, 88%, 44%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #b7950b" data-hex="#b7950b" data-rgb="183, 149, 11" data-hsl="48, 88%, 38%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #9a7d0a" data-hex="#9a7d0a" data-rgb="154, 125, 10" data-hsl="48, 88%, 32%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #7d6608" data-hex="#7d6608" data-rgb="125, 102, 8" data-hsl="48, 88%, 26%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #fef5e7" data-hex="#fef5e7" data-rgb="254, 245, 231" data-hsl="37, 90%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #fdebd0" data-hex="#fdebd0" data-rgb="253, 235, 208" data-hsl="37, 90%, 90%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #fad7a0" data-hex="#fad7a0" data-rgb="250, 215, 160" data-hsl="37, 90%, 80%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f8c471" data-hex="#f8c471" data-rgb="248, 196, 113" data-hsl="37, 90%, 71%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f5b041" data-hex="#f5b041" data-rgb="245, 176, 65" data-hsl="37, 90%, 61%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f39c12" data-hex="#f39c12" data-rgb="243, 156, 18" data-hsl="37, 90%, 51%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d68910" data-hex="#d68910" data-rgb="214, 137, 16" data-hsl="37, 86%, 45%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #b9770e" data-hex="#b9770e" data-rgb="185, 119, 14" data-hsl="37, 86%, 39%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #9c640c" data-hex="#9c640c" data-rgb="156, 100, 12" data-hsl="37, 86%, 33%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #7e5109" data-hex="#7e5109" data-rgb="126, 81, 9" data-hsl="37, 86%, 27%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #fdf2e9" data-hex="#fdf2e9" data-rgb="253, 242, 233" data-hsl="28, 80%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #fae5d3" data-hex="#fae5d3" data-rgb="250, 229, 211" data-hsl="28, 80%, 90%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f5cba7" data-hex="#f5cba7" data-rgb="245, 203, 167" data-hsl="28, 80%, 81%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f0b27a" data-hex="#f0b27a" data-rgb="240, 178, 122" data-hsl="28, 80%, 71%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #eb984e" data-hex="#eb984e" data-rgb="235, 152, 78" data-hsl="28, 80%, 61%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #e67e22" data-hex="#e67e22" data-rgb="230, 126, 34" data-hsl="28, 80%, 52%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #ca6f1e" data-hex="#ca6f1e" data-rgb="202, 111, 30" data-hsl="28, 74%, 46%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #af601a" data-hex="#af601a" data-rgb="175, 96, 26" data-hsl="28, 74%, 39%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #935116" data-hex="#935116" data-rgb="147, 81, 22" data-hsl="28, 74%, 33%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #784212" data-hex="#784212" data-rgb="120, 66, 18" data-hsl="28, 74%, 27%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #fbeee6" data-hex="#fbeee6" data-rgb="251, 238, 230" data-hsl="24, 71%, 94%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f6ddcc" data-hex="#f6ddcc" data-rgb="246, 221, 204" data-hsl="24, 71%, 88%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #edbb99" data-hex="#edbb99" data-rgb="237, 187, 153" data-hsl="24, 71%, 77%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #e59866" data-hex="#e59866" data-rgb="229, 152, 102" data-hsl="24, 71%, 65%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #dc7633" data-hex="#dc7633" data-rgb="220, 118, 51" data-hsl="24, 71%, 53%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d35400" data-hex="#d35400" data-rgb="211, 84, 0" data-hsl="24, 100%, 41%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #ba4a00" data-hex="#ba4a00" data-rgb="186, 74, 0" data-hsl="24, 100%, 36%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #a04000" data-hex="#a04000" data-rgb="160, 64, 0" data-hsl="24, 100%, 31%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #873600" data-hex="#873600" data-rgb="135, 54, 0" data-hsl="24, 100%, 26%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #6e2c00" data-hex="#6e2c00" data-rgb="110, 44, 0" data-hsl="24, 100%, 22%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #fdfefe" data-hex="#fdfefe" data-rgb="253, 254, 254" data-hsl="192, 15%, 99%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #fbfcfc" data-hex="#fbfcfc" data-rgb="251, 252, 252" data-hsl="192, 15%, 99%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f7f9f9" data-hex="#f7f9f9" data-rgb="247, 249, 249" data-hsl="192, 15%, 97%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f4f6f7" data-hex="#f4f6f7" data-rgb="244, 246, 247" data-hsl="192, 15%, 96%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f0f3f4" data-hex="#f0f3f4" data-rgb="240, 243, 244" data-hsl="192, 15%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #ecf0f1" data-hex="#ecf0f1" data-rgb="236, 240, 241" data-hsl="192, 15%, 94%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d0d3d4" data-hex="#d0d3d4" data-rgb="208, 211, 212" data-hsl="192, 5%, 82%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #b3b6b7" data-hex="#b3b6b7" data-rgb="179, 182, 183" data-hsl="192, 3%, 71%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #979a9a" data-hex="#979a9a" data-rgb="151, 154, 154" data-hsl="192, 2%, 60%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #7b7d7d" data-hex="#7b7d7d" data-rgb="123, 125, 125" data-hsl="192, 1%, 49%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #f8f9f9" data-hex="#f8f9f9" data-rgb="248, 249, 249" data-hsl="204, 8%, 98%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #f2f3f4" data-hex="#f2f3f4" data-rgb="242, 243, 244" data-hsl="204, 8%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #e5e7e9" data-hex="#e5e7e9" data-rgb="229, 231, 233" data-hsl="204, 8%, 90%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d7dbdd" data-hex="#d7dbdd" data-rgb="215, 219, 221" data-hsl="204, 8%, 86%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #cacfd2" data-hex="#cacfd2" data-rgb="202, 207, 210" data-hsl="204, 8%, 81%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #bdc3c7" data-hex="#bdc3c7" data-rgb="189, 195, 199" data-hsl="204, 8%, 76%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #a6acaf" data-hex="#a6acaf" data-rgb="166, 172, 175" data-hsl="204, 5%, 67%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #909497" data-hex="#909497" data-rgb="144, 148, 151" data-hsl="204, 4%, 58%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #797d7f" data-hex="#797d7f" data-rgb="121, 125, 127" data-hsl="204, 3%, 49%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #626567" data-hex="#626567" data-rgb="98, 101, 103" data-hsl="204, 3%, 40%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #f4f6f6" data-hex="#f4f6f6" data-rgb="244, 246, 246" data-hsl="184, 9%, 96%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #eaeded" data-hex="#eaeded" data-rgb="234, 237, 237" data-hsl="184, 9%, 92%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d5dbdb" data-hex="#d5dbdb" data-rgb="213, 219, 219" data-hsl="184, 9%, 85%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #bfc9ca" data-hex="#bfc9ca" data-rgb="191, 201, 202" data-hsl="184, 9%, 77%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #aab7b8" data-hex="#aab7b8" data-rgb="170, 183, 184" data-hsl="184, 9%, 69%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #95a5a6" data-hex="#95a5a6" data-rgb="149, 165, 166" data-hsl="184, 9%, 62%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #839192" data-hex="#839192" data-rgb="131, 145, 146" data-hsl="184, 6%, 54%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #717d7e" data-hex="#717d7e" data-rgb="113, 125, 126" data-hsl="184, 5%, 47%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #5f6a6a" data-hex="#5f6a6a" data-rgb="95, 106, 106" data-hsl="184, 5%, 40%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #4d5656" data-hex="#4d5656" data-rgb="77, 86, 86" data-hsl="184, 5%, 32%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #f2f4f4" data-hex="#f2f4f4" data-rgb="242, 244, 244" data-hsl="184, 6%, 95%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #e5e8e8" data-hex="#e5e8e8" data-rgb="229, 232, 232" data-hsl="184, 6%, 91%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #ccd1d1" data-hex="#ccd1d1" data-rgb="204, 209, 209" data-hsl="184, 6%, 81%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #b2babb" data-hex="#b2babb" data-rgb="178, 186, 187" data-hsl="184, 6%, 72%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #99a3a4" data-hex="#99a3a4" data-rgb="153, 163, 164" data-hsl="184, 6%, 62%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #7f8c8d" data-hex="#7f8c8d" data-rgb="127, 140, 141" data-hsl="184, 6%, 53%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #707b7c" data-hex="#707b7c" data-rgb="112, 123, 124" data-hsl="184, 5%, 46%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #616a6b" data-hex="#616a6b" data-rgb="97, 106, 107" data-hsl="184, 5%, 40%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #515a5a" data-hex="#515a5a" data-rgb="81, 90, 90" data-hsl="184, 5%, 34%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #424949" data-hex="#424949" data-rgb="66, 73, 73" data-hsl="184, 5%, 27%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #ebedef" data-hex="#ebedef" data-rgb="235, 237, 239" data-hsl="210, 12%, 93%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d6dbdf" data-hex="#d6dbdf" data-rgb="214, 219, 223" data-hsl="210, 12%, 86%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #aeb6bf" data-hex="#aeb6bf" data-rgb="174, 182, 191" data-hsl="210, 12%, 71%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #85929e" data-hex="#85929e" data-rgb="133, 146, 158" data-hsl="210, 12%, 57%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #5d6d7e" data-hex="#5d6d7e" data-rgb="93, 109, 126" data-hsl="210, 15%, 43%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #34495e" data-hex="#34495e" data-rgb="52, 73, 94" data-hsl="210, 29%, 29%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #2e4053" data-hex="#2e4053" data-rgb="46, 64, 83" data-hsl="210, 29%, 25%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #283747" data-hex="#283747" data-rgb="40, 55, 71" data-hsl="210, 29%, 22%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #212f3c" data-hex="#212f3c" data-rgb="33, 47, 60" data-hsl="210, 29%, 18%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #1b2631" data-hex="#1b2631" data-rgb="27, 38, 49" data-hsl="210, 29%, 15%"></div> </div> </div> <div class="color-group"> <div class="color-block"> <div class="js-color" style="background-color: #eaecee" data-hex="#eaecee" data-rgb="234, 236, 238" data-hsl="210, 9%, 92%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #d5d8dc" data-hex="#d5d8dc" data-rgb="213, 216, 220" data-hsl="210, 9%, 85%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #abb2b9" data-hex="#abb2b9" data-rgb="171, 178, 185" data-hsl="210, 9%, 70%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #808b96" data-hex="#808b96" data-rgb="128, 139, 150" data-hsl="210, 9%, 55%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #566573" data-hex="#566573" data-rgb="86, 101, 115" data-hsl="210, 14%, 39%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #2c3e50" data-hex="#2c3e50" data-rgb="44, 62, 80" data-hsl="210, 29%, 24%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #273746" data-hex="#273746" data-rgb="39, 55, 70" data-hsl="210, 29%, 21%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #212f3d" data-hex="#212f3d" data-rgb="33, 47, 61" data-hsl="210, 29%, 18%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #1c2833" data-hex="#1c2833" data-rgb="28, 40, 51" data-hsl="210, 29%, 16%"></div> </div> <div class="color-block"> <div class="js-color" style="background-color: #17202a" data-hex="#17202a" data-rgb="23, 32, 42" data-hsl="210, 29%, 13%"></div> </div> </div> </div> <h2 property="headline">
<a property="url" href="/color-chart/"> Color Chart
</a> </h2> <p property="description">Looking for some already great color combinations? Our <a href="http://htmlcolorcodes.com/color-chart/">color chart</a> features flat design colors, Google's Material design scheme and the classic web safe color palette, all with Hex color codes. </p> <div class="buttons row"> <a href="/color-chart/"> <div class="button border gray"> <h5 class="arrow gray">See all the charts!<svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></h5> </div> </a> </div> </header> <aside class="sidebar"> <div class="show-md" style="margin-bottom:24px;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Responsive Unit --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6244236343601184" data-ad-slot="9389581559" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </article> <article class="home color-names show-sm" vocab="http://schema.org/" typeof="Article"> <meta property="image" content="http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg"> <meta property="datePublished" content="2015-09-03"> <header class="chart row"> <table> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#CD5C5C;" data-hex="#CD5C5C" data-rgb="205, 92, 92" data-hsl="0, 53%, 58%"></div> </td> <td class="color-name"> <h4>IndianRed</h4> </td> <td class="color-hex selectable"> <h4>#CD5C5C</h4> </td> <td class="color-rgb selectable"> <h4>rgb(205, 92, 92)</h4> </td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#F08080;" data-hex="#F08080" data-rgb="240, 128, 128" data-hsl="0, 79%, 72%"></div> </td> <td class="color-name"> <h4>LightCoral</h4> </td> <td class="color-hex selectable"> <h4>#F08080</h4> </td> <td class="color-rgb selectable"> <h4>rgb(240, 128, 128)</h4> </td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#FA8072;" data-hex="#FA8072" data-rgb="250, 128, 114" data-hsl="6, 93%, 71%"></div> </td> <td class="color-name"> <h4>Salmon</h4> </td> <td class="color-hex selectable"> <h4>#FA8072</h4> </td> <td class="color-rgb selectable"> <h4>rgb(250, 128, 114)</h4> </td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#E9967A;" data-hex="#E9967A" data-rgb="233, 150, 122" data-hsl="15, 72%, 70%"></div> </td> <td class="color-name"> <h4>DarkSalmon</h4> </td> <td class="color-hex selectable"> <h4>#E9967A</h4> </td> <td class="color-rgb selectable"> <h4>rgb(233, 150, 122)</h4> </td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#FFA07A;" data-hex="#FFA07A" data-rgb="255, 160, 122" data-hsl="17, 100%, 74%"></div> </td> <td class="color-name"> <h4>LightSalmon</h4> </td> <td class="color-hex selectable"> <h4>#FFA07A</h4> </td> <td class="color-rgb selectable"> <h4>rgb(255, 160, 122)</h4> </td> </tr> </table> <h2 property="headline">
<a property="url" href="/color-names/"> Color Names
</a> </h2> <p property="description">Can't remember all 140 HTML color names? We've got you covered, check out our <a href="http://htmlcolorcodes.com/color-names/">guide</a> for a quick reference of all the HTML color names grouped by color. </p> <div class="buttons row"> <a href="/color-names/"> <div class="button border gray"> <h5 class="arrow gray">Browse the full list!<svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></h5> </div> </a> </div> </header> <aside class="sidebar"> <a class="affiliate-card affiliate-card--ct" href="//www.creative-tim.com/product/material-kit-pro?affiliate_id=98137" target="_blank"> <figure class="affiliate-card__image affiliate-card__image-ct"> <img src="http://htmlcolorcodes.com/assets/images/affiliates/creativetim-bootstrap-600x400-db5007ea.png" /> </figure> <div class="affiliate-card__text"> <h5 class="affiliate-card__tagline">Beautiful Bootstrap UI Kit</h5> <!-- <h3 class="affiliate-card__title">$5.95 /mo.</h3> --> <span class="affiliate-card__link cta-arrow ruby" target="_blank">Check It Out<svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></span> </div> </a> <a class="affiliate-card" href="//www.bluehost.com/track/amdixon/htmlcolorcodes" target="_blank"> <figure class="affiliate-card__image"> <img src="http://htmlcolorcodes.com/assets/images/affiliates/bluehost-300x150-d46ab71a.png" /> </figure> <div class="affiliate-card__text"> <h5 class="affiliate-card__tagline">Unlimited Web Hosting only</h5> <h3 class="affiliate-card__title">$5.95 /mo.</h3> <span class="affiliate-card__link cta-arrow yellow" target="_blank">Get Started<svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></span> </div> </a> <!-- <ul class="affiliate-list"> <li class="affiliate-list__title"><h5>Featured WordPress Themes</h5></li> <li class="affiliate-list__item"> <a class="affiliate-list__link" href="http://themeforest.net/item/salient-responsive-multipurpose-theme/4363266?ref=amdixon" target="_blank"> <figure class="affiliate-list__item-image"> <img src="http://htmlcolorcodes.com/assets/images/themes/salient-wordpress-theme-on-themeforest-183615d7.jpg" /> </figure> <div class="affiliate-list__item-text"> <h4 class="affiliate-list__item-title">Salient</h4> <small class="affiliate-list__item-description">Responsive Multi-Purpose Theme</small> <span class="affiliate-list__item-link cta-arrow--small yellow" href="" target="_blank"><svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></span> </div> </a> </li> <li class="affiliate-list__item"> <a class="affiliate-list__link" href="http://themeforest.net/item/kalium-creative-theme-for-professionals/10860525?ref=amdixon" target="_blank"> <figure class="affiliate-list__item-image"> <img src="http://htmlcolorcodes.com/assets/images/themes/kalium-wordpress-theme-on-themeforest-a42b03a7.jpg" /> </figure> <div class="affiliate-list__item-text"> <h4 class="affiliate-list__item-title">Kalium</h4> <small class="affiliate-list__item-description">Creative Theme for Professionals</small> <span class="affiliate-list__item-link cta-arrow--small yellow" href="" target="_blank"><svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></span> </div> </a> </li> <li class="affiliate-list__item"> <a class="affiliate-list__link" href="http://themeforest.net/item/bridge-creative-multipurpose-wordpress-theme/7315054?ref=amdixon" target="_blank"> <figure class="affiliate-list__item-image"> <img src="http://htmlcolorcodes.com/assets/images/themes/bridge-wordpress-theme-on-themeforest-cfedcb8b.jpg" /> </figure> <div class="affiliate-list__item-text"> <h4 class="affiliate-list__item-title">Bridge</h4> <small class="affiliate-list__item-description">Multi-Purpose WordPress Theme</small> <span class="affiliate-list__item-link cta-arrow--small yellow" href="" target="_blank"><svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></span> </div> </a> </li> <li class="affiliate-list__item"> <a class="affiliate-list__link" href="http://themeforest.net/item/rock-group-multipurpose-infographic-theme/9855659?ref=amdixon" target="_blank"> <figure class="affiliate-list__item-image"> <img src="http://htmlcolorcodes.com/assets/images/themes/rock-group-wordpress-theme-on-themeforest-6955ec82.jpg" /> </figure> <div class="affiliate-list__item-text"> <h4 class="affiliate-list__item-title">Rock Group</h4> <small class="affiliate-list__item-description">Multi-Purpose Infographic Theme</small> <span class="affiliate-list__item-link cta-arrow--small yellow" href="" target="_blank"><svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></span> </div> </a> </li> </ul> --> </aside> </article> <article class="home color-tutorials show-sm" vocab="http://schema.org/" typeof="Article"> <meta property="image" content="http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg"> <meta property="datePublished" content="2015-09-03"> <figure property="image" vocab="http://schema.org/" typeof="ImageObject"> <meta property="name" content="HTML ≈ CSS HTML & CSS Tutorials"> <div class="image top portrait ratio-16x86"> <a property="url" href="/tutorials/"> <meta property="thumbnail" content="/assets/images/html-color-codes-color-tutorials-thumb-c5433193.jpg"> <img alt="HTML & CSS Tutorials" property="contentUrl" src="http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-903ea3cb.jpg" /> </a> </div> </figure> <header class="row"> <h2 property="headline">HTML & CSS Tutorials</h2> <p property="description">Just starting your website or need a refresher? Our <a href="http://htmlcolorcodes.com/tutorials/">tutorials</a> section has something for everyone, from basic HTML and CSS color guides to more advanced techniques in SCSS. </p> <div class="buttons row"> <a href="/tutorials/"> <div class="button border gray"> <h5 class="arrow gray">Start learning!<svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></h5> </div> </a> </div> </header> <aside class="sidebar js-sidebar"> <a href="http://treehouse.7eer.net/c/232362/233864/3944"> <img class="ad--lg" border="0" width="300" height="600" alt="" src="http://htmlcolorcodes.com/assets/images/ads/teamtreehouse--300x600-blue-e53d4cd5.png" /> <img class="ad--md" border="0" width="160" height="600" alt="" src="http://htmlcolorcodes.com/assets/images/ads/teamtreehouse--160x600-blue-d354e682.gif" /> </a> <img height="0" width="0" src="http://treehouse.7eer.net/i/232362/233864/3944" style="position:absolute;visibility:hidden;" border="0" /> </aside> </article> <article class="home color-resources show-sm" vocab="http://schema.org/" typeof="Article"> <meta property="image" content="http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg"> <meta property="datePublished" content="2015-09-03"> <figure property="image" vocab="http://schema.org/" typeof="ImageObject"> <meta property="name" content="translation missing: en.header.color Resources"> <div class="image top portrait ratio-16x86"> <a property="url" href="/resources/"> <meta property="thumbnail" content="/assets/images/html-color-codes-color-palette-generators-thumb-5513a0bc.jpg"> <img alt="Web Resources" property="contentUrl" src="http://htmlcolorcodes.com/assets/images/html-color-codes-color-palette-generators-7a5b8241.jpg" /> </a> </div> </figure> <header> <h2 property="headline">Resources</h2> <p property="description">Our favorite tools and tricks from around the web, including the best <a href="http://htmlcolorcodes.com/resources/best-color-palette-generators/">color palette generators</a>, <a href="http://htmlcolorcodes.com/resources/ultimate-guide-to-free-stock-photos/">free stock photo sites</a>, <a href="http://htmlcolorcodes.com/resources/how-to-search-for-images-by-color/">image search using color</a>, and so much more. </p> <div class="buttons row"> <a href="/resources/"> <div class="button border gray"> <h5 class="arrow gray">See the guides!<svg version="1.1" id="arrow" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" xml:space="preserve">
<path class="fill" d="M11.854,6.354l-3,3C8.758,9.449,8.63,9.5,8.5,9.5c-0.064,0-0.13-0.013-0.191-0.038C8.122,9.385,8,9.202,8,9V7H1 C0.448,7,0,6.552,0,6s0.448-1,1-1h7V3c0-0.202,0.122-0.385,0.309-0.462C8.495,2.46,8.71,2.503,8.854,2.646l3,3 C12.049,5.842,12.049,6.158,11.854,6.354z"/>
</svg></h5> </div> </a> </div> </header> </article> <article id="color-codes" class="home color-html show-sm" vocab="http://schema.org/" typeof="Article"> <meta property="image" content="http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg"> <meta property="datePublished" content="2015-09-03"> <header> <h2 property="headline">What are HTML color codes?</h2> <p property="description">Color codes are ways of representing the colors we see everyday in a format that a computer can interpret and display. Commonly used in websites and other software applications, there are a variety of formats, including Hex color codes, RGB and HSL values, and HTML color names, amongst others. </p> </header> <section property="articleBody"> <h4>Hex color codes</h4> <p>The most popular are Hex color codes; three byte hexadecimal numbers (meaning they consist of six digits), with each byte, or pair of characters in the Hex code, representing the intensity of red, green and blue in the color respectively. </p> <div class="row"> <div class="full"> <h3>#<span>XX</span><span>XX</span><span>XX</span></h3> </div> </div> <p>Hex code byte values range from 00, which is the lowest intensity of a color, to FF which represents the highest intensity. The color white, for example, is made by mixing each of the three primary colors at their full intensity, resulting in the Hex color code of #FFFFFF. </p> <div class="row"> <div class="full" style="border:1px solid #3f3844"> <h3>#FFFFFF</h3> </div> </div> <p>Black, the absence of any color on a screen display, is the complete opposite, with each color displayed at their lowest possible intensity and a Hex color code of #000000. </p> <div class="row"> <div class="full" style="background-color:#000000"> <h3 style="color:#FFFFFF">#000000</h3> </div> </div> <p>Understanding the basics of Hex color code notation we can create grayscale colors very easily, since they consist of equal intensities of each color: </p> <div class="row"> <div class="half" style="background-color:#454545"> <h3 style="color:#FFFFFF">#454545</h3> </div> <div class="half" style="background-color:#999999"> <h3 style="color:#FFFFFF">#999999</h3> </div> </div> <p>The three primary colors, red, green and blue, are made by mixing the highest intensity of the desired color with the lowest intensities of the other two: </p> <div class="row"> <div class="third" style="background-color:#FF0000"> <h3 style="color:#FFFFFF">#FF0000</h3> </div> <div class="third" style="background-color:#00FF00"> <h3 style="color:#FFFFFF">#00FF00</h3> </div> <div class="third" style="background-color:#0000FF"> <h3 style="color:#FFFFFF">#0000FF</h3> </div> </div> <p>With modern browsers supporting the full spectrum of 24-bit color, there are 16,777,216 different color possibilities. Use our <a href="http://htmlcolorcodes.com/color-picker/">color picker </a> to explore all 16.7 million of them, or if that’s too many, check out our <a href="http://htmlcolorcodes.com/color-charts/">color charts </a> for a selection of palettes focused on flat design, Material design and web safe colors. </p> </section> <section> <h2 property="headline">List of common HTML color codes</h2> <br> <br> <table> <tbody> <tr> <th class="color-swatch">Color</th> <th class="color-name"> <h4>Color Name</h4></th> <th class="color-hex"> <h4>Hex Color Code</h4></th> <th class="color-rgb"> <h4>RGB Color Code</h4></th> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#FFFFFF;" data-hex="#FFFFFF" data-rgb="255, 255, 255" data-hsl="0, 0%, 100%"></div> </td> <td class="color-name">White</td> <td class="color-hex selectable">#FFFFFF</td> <td class="color-rgb selectable">rgb(255, 255, 255)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#C0C0C0;" data-hex="#C0C0C0" data-rgb="192, 192, 192" data-hsl="0, 0%, 75%"></div> </td> <td class="color-name">Silver</td> <td class="color-hex selectable">#C0C0C0</td> <td class="color-rgb selectable">rgb(192, 192, 192)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#808080;" data-hex="#808080" data-rgb="128, 128, 128" data-hsl="0, 0%, 50%"></div> </td> <td class="color-name">Gray</td> <td class="color-hex selectable">#808080</td> <td class="color-rgb selectable">rgb(128, 128, 128)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#000000;" data-hex="#000000" data-rgb="0, 0, 0" data-hsl="0, 0%, 0%"></div> </td> <td class="color-name">Black</td> <td class="color-hex selectable">#000000</td> <td class="color-rgb selectable">rgb(0, 0, 0)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#FF0000;" data-hex="#FF0000" data-rgb="255, 0, 0" data-hsl="0, 100%, 50%"></div> </td> <td class="color-name">Red</td> <td class="color-hex selectable">#FF0000</td> <td class="color-rgb selectable">rgb(255, 0, 0)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#800000;" data-hex="#800000" data-rgb="128, 0, 0" data-hsl="0, 100%, 25%"></div> </td> <td class="color-name">Maroon</td> <td class="color-hex selectable">#800000</td> <td class="color-rgb selectable">rgb(128, 0, 0)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#FFFF00;" data-hex="#FFFF00" data-rgb="255, 255, 0" data-hsl="60, 100%, 50%"></div> </td> <td class="color-name">Yellow</td> <td class="color-hex selectable">#FFFF00</td> <td class="color-rgb selectable">rgb(255, 255, 0)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#808000;" data-hex="#808000" data-rgb="128, 128, 0" data-hsl="60, 100%, 25%"></div> </td> <td class="color-name">Olive</td> <td class="color-hex selectable">#808000</td> <td class="color-rgb selectable">rgb(128, 128, 0)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#00FF00;" data-hex="#00FF00" data-rgb="0, 255, 0" data-hsl="120, 100%, 50%"></div> </td> <td class="color-name">Lime</td> <td class="color-hex selectable">#00FF00</td> <td class="color-rgb selectable">rgb(0, 255, 0)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#008000;" data-hex="#008000" data-rgb="0, 128, 0" data-hsl="120, 100%, 25%"></div> </td> <td class="color-name">Green</td> <td class="color-hex selectable">#008000</td> <td class="color-rgb selectable">rgb(0, 128, 0)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#00FFFF;" data-hex="#00FFFF" data-rgb="0, 255, 255" data-hsl="180, 100%, 50%"></div> </td> <td class="color-name">Aqua</td> <td class="color-hex selectable">#00FFFF</td> <td class="color-rgb selectable">rgb(0, 255, 255)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#008080;" data-hex="#008080" data-rgb="0, 128, 128" data-hsl="180, 100%, 25%"></div> </td> <td class="color-name">Teal</td> <td class="color-hex selectable">#008080</td> <td class="color-rgb selectable">rgb(0, 128, 128)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#0000FF;" data-hex="#0000FF" data-rgb="0, 0, 255" data-hsl="240, 100%, 50%"></div> </td> <td class="color-name">Blue</td> <td class="color-hex selectable">#0000FF</td> <td class="color-rgb selectable">rgb(0, 0, 255)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#000080;" data-hex="#000080" data-rgb="0, 0, 128" data-hsl="240, 100%, 25%"></div> </td> <td class="color-name">Navy</td> <td class="color-hex selectable">#000080</td> <td class="color-rgb selectable">rgb(0, 0, 128)</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#FF00FF;" data-hex="#FF00FF" data-rgb="255, 0, 255" data-hsl="300, 100%, 50%"></div> </td> <td class="color-name">Fuchsia</td> <td class="color-hex selectable">#FF00FF</td> <td class="color-rgb selectable">rgb(255, 0, 255))</td> </tr> <tr class="color"> <td class="color-swatch"> <div class="js-color" style="background-color:#800080;" data-hex="#800080" data-rgb="128, 0, 128" data-hsl="300, 100%, 25%"></div> </td> <td class="color-name">Purple</td> <td class="color-hex selectable">#800080</td> <td class="color-rgb selectable">rgb(128, 0, 128))</td> </tr> </tbody> </table> </section> <footer class="row show-md"> <h5>Share HTML Color Codes with your friends!</h5> <div class="button-group"> <ul> <a id="Twitter" class="gray popup" target="_blank" href="https://twitter.com/share?url=http://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful"> <li> <h5><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path class="fill" d="M24,4.557c-0.883,0.392-1.832,0.656-2.828,0.775c1.018-0.609,1.799-1.574,2.164-2.724 c-0.951,0.564-2.004,0.974-3.125,1.195c-0.898-0.957-2.18-1.555-3.596-1.555c-2.719,0-4.924,2.205-4.924,4.924 c0,0.386,0.044,0.762,0.128,1.122C7.728,8.087,4.1,6.127,1.67,3.148C1.247,3.875,1.003,4.722,1.003,5.625 c0,1.708,0.869,3.216,2.19,4.099c-0.807-0.025-1.566-0.247-2.23-0.616c0,0.021,0,0.041,0,0.062c0,2.386,1.697,4.375,3.95,4.829 C4.5,14.109,4.065,14.17,3.617,14.17c-0.317,0-0.625-0.029-0.926-0.088c0.626,1.955,2.445,3.379,4.6,3.42 c-1.685,1.32-3.808,2.107-6.115,2.107c-0.397,0-0.79-0.023-1.175-0.068c2.179,1.396,4.768,2.211,7.548,2.211 c9.057,0,14.01-7.502,14.01-14.008c0-0.213-0.004-0.426-0.016-0.637C22.504,6.412,23.34,5.543,24,4.557z"/>
</svg>
Tweet</h5> </li> </a> <a id="Facebook" class="gray popup" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://htmlcolorcodes.com/"> <li> <h5><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path class="fill" d="M9.156,23V12.965H5.743V9.054h3.414V6.17c0-3.349,2.068-5.17,5.088-5.17c1.44,0,2.688,0.107,3.049,0.155 v3.498L15.2,4.654c-1.642,0-1.96,0.772-1.96,1.903v2.497h3.914l-0.508,3.911H13.24V23H9.156z"/>
</svg>Post</h5> </li> </a> <a id="Google+" class="gray popup" target="_blank" href="https://plus.google.com/share?url=http://htmlcolorcodes.com/"> <li> <h5><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path class="fill" d="M15.241,0H8.963c-0.834,0-1.727,0.097-2.68,0.292C5.322,0.517,4.394,1,3.503,1.737c-1.301,1.261-1.95,2.665-1.95,4.213 c0,1.281,0.459,2.404,1.376,3.367c0.876,1.036,2.149,1.563,3.82,1.584c0.316,0,0.653-0.021,1.01-0.062 c-0.06,0.165-0.124,0.345-0.192,0.541c-0.079,0.185-0.118,0.417-0.118,0.695c0,0.465,0.103,0.86,0.311,1.19 c0.177,0.342,0.378,0.659,0.604,0.959c-0.731,0.021-1.651,0.111-2.761,0.275c-1.119,0.191-2.188,0.583-3.204,1.166 c-0.905,0.542-1.531,1.17-1.876,1.889c-0.356,0.717-0.534,1.364-0.534,1.947c0,1.197,0.547,2.229,1.643,3.085 C2.715,23.509,4.356,23.979,6.555,24c2.627-0.041,4.637-0.671,6.03-1.891c1.344-1.18,2.015-2.533,2.015-4.062 c-0.019-1.075-0.264-1.946-0.733-2.612c-0.5-0.656-1.08-1.254-1.742-1.797l-1.064-0.878c-0.153-0.153-0.312-0.331-0.476-0.538 c-0.191-0.215-0.287-0.487-0.287-0.814c0-0.338,0.094-0.636,0.28-0.892c0.158-0.246,0.331-0.466,0.519-0.661 c0.327-0.287,0.636-0.569,0.926-0.846c0.262-0.277,0.509-0.579,0.743-0.907c0.479-0.676,0.725-1.578,0.744-2.706 c0-0.616-0.069-1.153-0.207-1.614c-0.168-0.461-0.359-0.861-0.577-1.2c-0.228-0.358-0.458-0.661-0.695-0.907 c-0.247-0.236-0.468-0.416-0.665-0.539h1.937L15.241,0z M11.8,17.191c0.52,0.597,0.779,1.293,0.779,2.093 c0,0.983-0.381,1.786-1.141,2.411c-0.779,0.638-1.909,0.966-3.388,0.986c-1.649-0.021-2.949-0.393-3.899-1.108 c-1-0.718-1.499-1.63-1.499-2.736c0-0.563,0.115-1.046,0.345-1.446c0.2-0.379,0.445-0.697,0.735-0.953 c0.299-0.246,0.594-0.436,0.884-0.567c0.29-0.123,0.516-0.216,0.675-0.277c0.679-0.204,1.345-0.354,1.994-0.444 c0.659-0.062,1.069-0.082,1.23-0.062c0.27,0,0.504,0.009,0.705,0.03C10.39,15.936,11.248,16.629,11.8,17.191z M10.781,7.916 c-0.077,0.421-0.248,0.833-0.514,1.232c-0.551,0.565-1.24,0.863-2.066,0.894c-0.653,0-1.235-0.199-1.745-0.6 C5.948,9.041,5.532,8.553,5.211,7.978c-0.665-1.232-0.997-2.419-0.997-3.56C4.193,3.556,4.422,2.775,4.896,2.077 C5.461,1.409,6.167,1.065,7.02,1.044c0.643,0.021,1.211,0.21,1.707,0.571c0.485,0.379,0.875,0.873,1.173,1.478 c0.633,1.264,0.949,2.518,0.949,3.76C10.849,7.141,10.826,7.495,10.781,7.916z M24.013,11h-3v3h-2v-3h-3V9h3V6h2v3h3V11z"/>
</svg>Share</h5> </li> </a> <a id="Pinterest" class="gray popup" target="_blank" href="https://pinterest.com/pin/create/button/?url=http://htmlcolorcodes.com/&media=http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg&description=Easily%20find%20HTML%20color%20codes%20for%20your%20website%20using%20our%20color%20picker,%20color%20chart%20and%20HTML%20color%20names%20with%20Hex%20color%20codes,%20RGB%20and%20HSL%20values."> <li> <h5><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path class="fill" d="M12,0C5.373,0,0,5.373,0,11.999c0,4.915,2.955,9.136,7.184,10.991c-0.035-0.838-0.006-1.844,0.209-2.756 c0.23-0.974,1.543-6.537,1.543-6.537s-0.383-0.768-0.383-1.9c0-1.778,1.031-3.106,2.314-3.106c1.092,0,1.619,0.82,1.619,1.802 c0,1.098-0.701,2.739-1.062,4.26c-0.301,1.272,0.64,2.312,1.896,2.312c2.272,0,3.805-2.92,3.805-6.38 c0-2.631-1.771-4.598-4.994-4.598c-3.639,0-5.906,2.713-5.906,5.745c0,1.046,0.307,1.784,0.791,2.354 c0.221,0.263,0.252,0.367,0.172,0.668c-0.059,0.222-0.189,0.754-0.244,0.965c-0.08,0.304-0.326,0.412-0.602,0.3 c-1.676-0.685-2.457-2.521-2.457-4.586c0-3.408,2.875-7.495,8.576-7.495c4.582,0,7.598,3.315,7.598,6.873 c0,4.709-2.617,8.226-6.475,8.226c-1.297,0-2.516-0.7-2.932-1.495c0,0-0.697,2.764-0.846,3.297 c-0.254,0.926-0.752,1.852-1.207,2.571C9.68,23.826,10.818,24,12,24c6.627,0,12-5.372,12-12.001C24,5.373,18.627,0,12,0z"/>
</svg>Pin</h5> </li> </a> </ul> </div> </footer> </article> <article class="home hide-sm js-content"> <a class="color-picker" href="/color-picker/"> <section> <h2>Picker <span class="gray"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="24px" viewBox="0 0 27 24" enable-background="new 0 0 27 24" xml:space="preserve">
<path class="fill" d="M26,11.989V20.5c0,0.828-0.672,1.5-1.5,1.5S23,21.328,23,20.5v-8.511c-0.604-0.457-1-1.173-1-1.989s0.396-1.532,1-1.989V4.5 C23,3.671,23.672,3,24.5,3S26,3.671,26,4.5v3.511c0.604,0.457,1,1.173,1,1.989S26.604,11.532,26,11.989z M19,19.5v-14 C19,4.122,17.879,3,16.5,3h-14C1.122,3,0,4.122,0,5.5v14C0,20.879,1.122,22,2.5,22h14C17.879,22,19,20.879,19,19.5z M3,6h13v13H3V6z "/>
</svg>
</span></h2> <div></div> <h5>Colors and harmonies</h5> </section> </a> <a class="color-charts" href="/color-chart/"> <section> <h2>Chart <span class="gray"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="23px" viewBox="0 0 27 23" enable-background="new 0 0 27 23" xml:space="preserve">
<path class="fill" d="M7,9.5c0,0.552-0.448,1-1,1H1c-0.552,0-1-0.448-1-1v-5c0-0.552,0.448-1,1-1h5c0.552,0,1,0.448,1,1V9.5z M7,19.5 c0,0.553-0.448,1-1,1H1c-0.552,0-1-0.447-1-1v-5c0-0.553,0.448-1,1-1h5c0.552,0,1,0.447,1,1V19.5z M17,19.5c0,0.553-0.447,1-1,1h-5 c-0.552,0-1-0.447-1-1v-5c0-0.553,0.448-1,1-1h5c0.553,0,1,0.447,1,1V19.5z M27,19.5c0,0.553-0.447,1-1,1h-5c-0.553,0-1-0.447-1-1 v-5c0-0.553,0.447-1,1-1h5c0.553,0,1,0.447,1,1V19.5z M27,9.5c0,0.553-0.447,1-1,1h-5c-0.553,0-1-0.447-1-1v-5c0-0.553,0.447-1,1-1 h5c0.553,0,1,0.447,1,1V9.5z M17,9.5c0,0.553-0.447,1-1,1h-5c-0.553,0-1-0.447-1-1v-5c0-0.553,0.447-1,1-1h5c0.553,0,1,0.447,1,1 V9.5z"/>
</svg>
</span></h2> <div></div> <h5>Flat, Material, Web Safe</h5> </section> </a> <a class="color-names" href="/color-names/"> <section> <h2>Names <span class="gray"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="24px" viewBox="0 0 27 24" enable-background="new 0 0 27 24" xml:space="preserve">
<path class="fill" d="M25.5,6h-17C7.671,6,7,5.329,7,4.5S7.671,3,8.5,3h17C26.328,3,27,3.671,27,4.5S26.328,6,25.5,6z M27,11.5 c0-0.829-0.672-1.5-1.5-1.5h-10c-0.828,0-1.5,0.671-1.5,1.5s0.672,1.5,1.5,1.5h10C26.328,13,27,12.329,27,11.5z M17,18.75 c0-0.828-0.672-1.5-1.5-1.5h-14c-0.829,0-1.5,0.672-1.5,1.5s0.671,1.5,1.5,1.5h14C16.328,20.25,17,19.578,17,18.75z M4,4.5 C4,3.671,3.329,3,2.5,3h-1C0.671,3,0,3.671,0,4.5S0.671,6,1.5,6h1C3.329,6,4,5.329,4,4.5z M11,11.5c0-0.829-0.671-1.5-1.5-1.5h-8 C0.671,10,0,10.671,0,11.5S0.671,13,1.5,13h8C10.329,13,11,12.329,11,11.5z M27,18.75c0-0.828-0.672-1.5-1.5-1.5h-4 c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h4C26.328,20.25,27,19.578,27,18.75z"/>
</svg>
</span></h2> <div></div> <h5>140 named HTML colors</h5> </section> </a> <a class="color-tutorials" href="/tutorials/"> <section> <h2>Tutorials <span class="gray"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="18px" viewBox="0 0 32 18" enable-background="new 0 0 32 18" xml:space="preserve">
<path class="fill" d="M8.499,14c-0.297,0-0.597-0.088-0.859-0.271l-5-3.5C2.239,9.948,2,9.489,2,9s0.239-0.948,0.64-1.229l5-3.5 c0.679-0.475,1.615-0.31,2.089,0.369c0.475,0.679,0.31,1.614-0.369,2.089L6.116,9l3.245,2.271c0.679,0.475,0.844,1.41,0.369,2.088 C9.437,13.777,8.972,14,8.499,14z M24.359,13.729l5-3.5C29.761,9.948,30,9.489,30,9s-0.239-0.948-0.641-1.229l-5-3.5 c-0.676-0.474-1.613-0.31-2.088,0.369c-0.477,0.679-0.312,1.614,0.367,2.089L25.885,9l-3.244,2.271 c-0.68,0.475-0.845,1.41-0.369,2.088C22.562,13.777,23.029,14,23.501,14C23.798,14,24.1,13.912,24.359,13.729z M14.324,16.967 l6.125-14.785c0.316-0.766-0.047-1.643-0.812-1.96c-0.765-0.317-1.644,0.046-1.96,0.812l-6.125,14.784 c-0.317,0.767,0.046,1.644,0.812,1.961c0.188,0.078,0.382,0.113,0.574,0.113C13.526,17.893,14.084,17.544,14.324,16.967z"/>
</svg></span></h2> <div></div> <h5>HTML, CSS and SCSS</h5> </section> </a> <a class="color-resources" href="/resources/"> <section> <h2>Resources <span class="gray"><svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 27 27" enable-background="new 0 0 27 27" xml:space="preserve">
<path class="fill" d="M19.157,15c-0.384,0-0.768-0.146-1.061-0.439c-0.586-0.585-0.586-1.536,0-2.121l4.949-4.949l-3.534-3.536l-4.951,4.95 c-0.586,0.585-1.536,0.585-2.122,0c-0.585-0.586-0.585-1.536,0-2.122l6.012-6.01c0.281-0.281,0.663-0.439,1.061-0.439l0,0 c0.398,0,0.779,0.158,1.061,0.439l5.655,5.657c0.586,0.586,0.586,1.536,0,2.121l-6.01,6.01C19.925,14.854,19.541,15,19.157,15z M8.551,26.229l6.717-6.718c0.586-0.586,0.586-1.535,0-2.121s-1.536-0.586-2.121,0L7.49,23.047l-3.536-3.536l5.656-5.657 c0.586-0.586,0.586-1.536,0-2.121c-0.586-0.586-1.536-0.586-2.121,0L0.772,18.45c-0.586,0.586-0.586,1.535,0,2.121l5.657,5.657 c0.281,0.281,0.663,0.439,1.061,0.439S8.27,26.51,8.551,26.229z M10.318,18.804l8.485-8.485c0.586-0.585,0.586-1.536,0-2.121 c-0.586-0.586-1.535-0.586-2.121,0l-8.485,8.485c-0.586,0.586-0.586,1.535,0,2.121c0.293,0.293,0.677,0.439,1.061,0.439 S10.025,19.097,10.318,18.804z"/>
</svg>
</span></h2> <div></div> <h5>Color tips and tricks</h5> </section> </a> </article> </main> <footer id="footer" class="js-footer" role="contentinfo"> <nav class="show-md"> <ul class="row"> <li class="color-codes"> <a property="url" href="/"> <div class="logo show-md"> <div class="deg-hidden"></div> <div class="donut deg45-1-gray"></div> <div class="donut deg45-1"></div> <div class="donut deg45-2-gray"></div> <div class="donut deg45-2"></div> <div class="donut deg45-3-gray"></div> <div class="donut deg45-3"></div> <div class="donut deg45-6-gray"></div> <div class="donut deg45-6"></div> <div class="donut deg45-5-gray"></div> <div class="donut deg45-5"></div> <div class="donut deg45-4-gray"></div> <div class="donut deg45-4"></div> </div> </a> </li> <li class="breadcrumbs"> <ol class="show-sm" vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="http://htmlcolorcodes.com/"> <h4 property="name">HTML Color Codes</h4> </a> <meta property="position" content="1"> </li> </ol> </li> <li class="languages"> <h4 class="js-button js-button-leader">English <span class="triangle black"></span></h4> <ul class="js-list"> <li> <h4> <a href="http://htmlcolorcodes.com/">English</a> </h4> </li> <li> <h4> <a href="http://htmlcolorcodes.com/es/">Español</a> </h4> </li> <li> <h4> <a href="http://htmlcolorcodes.com/fr/">Français</a> </h4> </li> <li> <h4> <a href="http://htmlcolorcodes.com/zh/">中国</a> </h4> </li> </ul> </li> </ul> </nav> <aside class="social hide-md"> <a id="Twitter" class="gray popup" target="_blank" href="https://twitter.com/share?url=http://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M24,4.557c-0.883,0.392-1.832,0.656-2.828,0.775c1.018-0.609,1.799-1.574,2.164-2.724 c-0.951,0.564-2.004,0.974-3.125,1.195c-0.898-0.957-2.18-1.555-3.596-1.555c-2.719,0-4.924,2.205-4.924,4.924 c0,0.386,0.044,0.762,0.128,1.122C7.728,8.087,4.1,6.127,1.67,3.148C1.247,3.875,1.003,4.722,1.003,5.625 c0,1.708,0.869,3.216,2.19,4.099c-0.807-0.025-1.566-0.247-2.23-0.616c0,0.021,0,0.041,0,0.062c0,2.386,1.697,4.375,3.95,4.829 C4.5,14.109,4.065,14.17,3.617,14.17c-0.317,0-0.625-0.029-0.926-0.088c0.626,1.955,2.445,3.379,4.6,3.42 c-1.685,1.32-3.808,2.107-6.115,2.107c-0.397,0-0.79-0.023-1.175-0.068c2.179,1.396,4.768,2.211,7.548,2.211 c9.057,0,14.01-7.502,14.01-14.008c0-0.213-0.004-0.426-0.016-0.637C22.504,6.412,23.34,5.543,24,4.557z" /> </svg> </a> <a id="Facebook" class="gray popup" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://htmlcolorcodes.com/"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M9.156,23V12.965H5.743V9.054h3.414V6.17c0-3.349,2.068-5.17,5.088-5.17c1.44,0,2.688,0.107,3.049,0.155 v3.498L15.2,4.654c-1.642,0-1.96,0.772-1.96,1.903v2.497h3.914l-0.508,3.911H13.24V23H9.156z" /> </svg> </a> <a id="Google+" class="gray popup" target="_blank" href="https://plus.google.com/share?url=http://htmlcolorcodes.com/"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M15.241,0H8.963c-0.834,0-1.727,0.097-2.68,0.292C5.322,0.517,4.394,1,3.503,1.737c-1.301,1.261-1.95,2.665-1.95,4.213 c0,1.281,0.459,2.404,1.376,3.367c0.876,1.036,2.149,1.563,3.82,1.584c0.316,0,0.653-0.021,1.01-0.062 c-0.06,0.165-0.124,0.345-0.192,0.541c-0.079,0.185-0.118,0.417-0.118,0.695c0,0.465,0.103,0.86,0.311,1.19 c0.177,0.342,0.378,0.659,0.604,0.959c-0.731,0.021-1.651,0.111-2.761,0.275c-1.119,0.191-2.188,0.583-3.204,1.166 c-0.905,0.542-1.531,1.17-1.876,1.889c-0.356,0.717-0.534,1.364-0.534,1.947c0,1.197,0.547,2.229,1.643,3.085 C2.715,23.509,4.356,23.979,6.555,24c2.627-0.041,4.637-0.671,6.03-1.891c1.344-1.18,2.015-2.533,2.015-4.062 c-0.019-1.075-0.264-1.946-0.733-2.612c-0.5-0.656-1.08-1.254-1.742-1.797l-1.064-0.878c-0.153-0.153-0.312-0.331-0.476-0.538 c-0.191-0.215-0.287-0.487-0.287-0.814c0-0.338,0.094-0.636,0.28-0.892c0.158-0.246,0.331-0.466,0.519-0.661 c0.327-0.287,0.636-0.569,0.926-0.846c0.262-0.277,0.509-0.579,0.743-0.907c0.479-0.676,0.725-1.578,0.744-2.706 c0-0.616-0.069-1.153-0.207-1.614c-0.168-0.461-0.359-0.861-0.577-1.2c-0.228-0.358-0.458-0.661-0.695-0.907 c-0.247-0.236-0.468-0.416-0.665-0.539h1.937L15.241,0z M11.8,17.191c0.52,0.597,0.779,1.293,0.779,2.093 c0,0.983-0.381,1.786-1.141,2.411c-0.779,0.638-1.909,0.966-3.388,0.986c-1.649-0.021-2.949-0.393-3.899-1.108 c-1-0.718-1.499-1.63-1.499-2.736c0-0.563,0.115-1.046,0.345-1.446c0.2-0.379,0.445-0.697,0.735-0.953 c0.299-0.246,0.594-0.436,0.884-0.567c0.29-0.123,0.516-0.216,0.675-0.277c0.679-0.204,1.345-0.354,1.994-0.444 c0.659-0.062,1.069-0.082,1.23-0.062c0.27,0,0.504,0.009,0.705,0.03C10.39,15.936,11.248,16.629,11.8,17.191z M10.781,7.916 c-0.077,0.421-0.248,0.833-0.514,1.232c-0.551,0.565-1.24,0.863-2.066,0.894c-0.653,0-1.235-0.199-1.745-0.6 C5.948,9.041,5.532,8.553,5.211,7.978c-0.665-1.232-0.997-2.419-0.997-3.56C4.193,3.556,4.422,2.775,4.896,2.077 C5.461,1.409,6.167,1.065,7.02,1.044c0.643,0.021,1.211,0.21,1.707,0.571c0.485,0.379,0.875,0.873,1.173,1.478 c0.633,1.264,0.949,2.518,0.949,3.76C10.849,7.141,10.826,7.495,10.781,7.916z M24.013,11h-3v3h-2v-3h-3V9h3V6h2v3h3V11z" /> </svg> </a> <a id="Pinterest" class="gray popup" target="_blank" href="https://pinterest.com/pin/create/button/?url=http://htmlcolorcodes.com/&media=http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg&amp;description=Easily%20find%20HTML%20color%20codes%20for%20your%20website%20using%20our%20color%20picker,%20color%20chart%20and%20HTML%20color%20names%20with%20Hex%20color%20codes,%20RGB%20and%20HSL%20values."> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M12,0C5.373,0,0,5.373,0,11.999c0,4.915,2.955,9.136,7.184,10.991c-0.035-0.838-0.006-1.844,0.209-2.756 c0.23-0.974,1.543-6.537,1.543-6.537s-0.383-0.768-0.383-1.9c0-1.778,1.031-3.106,2.314-3.106c1.092,0,1.619,0.82,1.619,1.802 c0,1.098-0.701,2.739-1.062,4.26c-0.301,1.272,0.64,2.312,1.896,2.312c2.272,0,3.805-2.92,3.805-6.38 c0-2.631-1.771-4.598-4.994-4.598c-3.639,0-5.906,2.713-5.906,5.745c0,1.046,0.307,1.784,0.791,2.354 c0.221,0.263,0.252,0.367,0.172,0.668c-0.059,0.222-0.189,0.754-0.244,0.965c-0.08,0.304-0.326,0.412-0.602,0.3 c-1.676-0.685-2.457-2.521-2.457-4.586c0-3.408,2.875-7.495,8.576-7.495c4.582,0,7.598,3.315,7.598,6.873 c0,4.709-2.617,8.226-6.475,8.226c-1.297,0-2.516-0.7-2.932-1.495c0,0-0.697,2.764-0.846,3.297 c-0.254,0.926-0.752,1.852-1.207,2.571C9.68,23.826,10.818,24,12,24c6.627,0,12-5.372,12-12.001C24,5.373,18.627,0,12,0z" /> </svg> </a> <a id="Reddit" class="gray popup" target="_blank" href="https://www.reddit.com/submit?url=http://htmlcolorcodes.com/&title=HTML%20Color%20Codes"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M24,13.713c0-1.521-1.238-2.759-2.76-2.759c-0.688,0-1.33,0.263-1.832,0.715 c-1.763-1.143-4.107-1.88-6.705-2.002l1.377-4.354l3.751,0.883c0.025,1.236,1.033,2.234,2.275,2.234 c1.258,0,2.281-1.023,2.281-2.281s-1.023-2.281-2.281-2.281c-0.925,0-1.718,0.555-2.075,1.347l-4.174-0.982 c-0.25-0.058-0.513,0.087-0.591,0.336L11.66,9.652c-2.752,0.05-5.247,0.793-7.108,1.982c-0.498-0.429-1.126-0.68-1.792-0.68 C1.238,10.954,0,12.192,0,13.713c0,0.953,0.493,1.83,1.283,2.332c-0.041,0.256-0.065,0.514-0.065,0.777 C1.217,20.779,6.033,24,11.951,24c5.918,0,10.732-3.221,10.732-7.178c0-0.244-0.02-0.484-0.055-0.723 C23.474,15.611,24,14.715,24,13.713z M20.107,4.868c0.706,0,1.281,0.575,1.281,1.281c0,0.707-0.575,1.281-1.281,1.281 s-1.28-0.575-1.28-1.281C18.827,5.442,19.401,4.868,20.107,4.868z M1.578,15.008C1.22,14.68,1,14.215,1,13.713 c0-0.97,0.789-1.759,1.759-1.759c0.338,0,0.66,0.105,0.939,0.284C2.708,13.033,1.981,13.977,1.578,15.008z M6.734,15.523 c0-0.91,0.763-1.672,1.671-1.672c0.909,0,1.647,0.762,1.647,1.672c0,0.908-0.738,1.646-1.647,1.646 C7.497,17.17,6.734,16.432,6.734,15.523z M15.889,20.248c-0.812,0.814-2.081,1.211-3.876,1.211c-0.005,0-0.009-0.004-0.013-0.004 s-0.008,0.004-0.013,0.004c-1.794,0-3.062-0.396-3.875-1.211c-0.195-0.197-0.195-0.514,0.001-0.707 c0.195-0.195,0.512-0.195,0.707,0c0.616,0.617,1.652,0.918,3.167,0.918c0.005,0,0.009,0.002,0.013,0.002s0.008-0.002,0.013-0.002 c1.516,0,2.553-0.301,3.169-0.918c0.195-0.195,0.512-0.195,0.707,0C16.084,19.734,16.084,20.051,15.889,20.248z M15.619,17.17 c-0.908,0-1.673-0.738-1.673-1.646c0-0.91,0.765-1.672,1.673-1.672c0.91,0,1.646,0.762,1.646,1.672 C17.265,16.432,16.529,17.17,15.619,17.17z M22.351,15.08c-0.391-1.045-1.113-2-2.104-2.808c0.29-0.201,0.632-0.318,0.994-0.318 c0.971,0,1.76,0.789,1.76,1.759C23,14.258,22.756,14.752,22.351,15.08z" /> </svg> </a> </aside> <header class="row"> <aside class="social show-md"> <a id="Twitter" class="gray popup" target="_blank" href="https://twitter.com/share?url=http://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M24,4.557c-0.883,0.392-1.832,0.656-2.828,0.775c1.018-0.609,1.799-1.574,2.164-2.724 c-0.951,0.564-2.004,0.974-3.125,1.195c-0.898-0.957-2.18-1.555-3.596-1.555c-2.719,0-4.924,2.205-4.924,4.924 c0,0.386,0.044,0.762,0.128,1.122C7.728,8.087,4.1,6.127,1.67,3.148C1.247,3.875,1.003,4.722,1.003,5.625 c0,1.708,0.869,3.216,2.19,4.099c-0.807-0.025-1.566-0.247-2.23-0.616c0,0.021,0,0.041,0,0.062c0,2.386,1.697,4.375,3.95,4.829 C4.5,14.109,4.065,14.17,3.617,14.17c-0.317,0-0.625-0.029-0.926-0.088c0.626,1.955,2.445,3.379,4.6,3.42 c-1.685,1.32-3.808,2.107-6.115,2.107c-0.397,0-0.79-0.023-1.175-0.068c2.179,1.396,4.768,2.211,7.548,2.211 c9.057,0,14.01-7.502,14.01-14.008c0-0.213-0.004-0.426-0.016-0.637C22.504,6.412,23.34,5.543,24,4.557z" /> </svg> </a> <a id="Facebook" class="gray popup" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://htmlcolorcodes.com/"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M9.156,23V12.965H5.743V9.054h3.414V6.17c0-3.349,2.068-5.17,5.088-5.17c1.44,0,2.688,0.107,3.049,0.155 v3.498L15.2,4.654c-1.642,0-1.96,0.772-1.96,1.903v2.497h3.914l-0.508,3.911H13.24V23H9.156z" /> </svg> </a> <a id="Google+" class="gray popup" target="_blank" href="https://plus.google.com/share?url=http://htmlcolorcodes.com/"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M15.241,0H8.963c-0.834,0-1.727,0.097-2.68,0.292C5.322,0.517,4.394,1,3.503,1.737c-1.301,1.261-1.95,2.665-1.95,4.213 c0,1.281,0.459,2.404,1.376,3.367c0.876,1.036,2.149,1.563,3.82,1.584c0.316,0,0.653-0.021,1.01-0.062 c-0.06,0.165-0.124,0.345-0.192,0.541c-0.079,0.185-0.118,0.417-0.118,0.695c0,0.465,0.103,0.86,0.311,1.19 c0.177,0.342,0.378,0.659,0.604,0.959c-0.731,0.021-1.651,0.111-2.761,0.275c-1.119,0.191-2.188,0.583-3.204,1.166 c-0.905,0.542-1.531,1.17-1.876,1.889c-0.356,0.717-0.534,1.364-0.534,1.947c0,1.197,0.547,2.229,1.643,3.085 C2.715,23.509,4.356,23.979,6.555,24c2.627-0.041,4.637-0.671,6.03-1.891c1.344-1.18,2.015-2.533,2.015-4.062 c-0.019-1.075-0.264-1.946-0.733-2.612c-0.5-0.656-1.08-1.254-1.742-1.797l-1.064-0.878c-0.153-0.153-0.312-0.331-0.476-0.538 c-0.191-0.215-0.287-0.487-0.287-0.814c0-0.338,0.094-0.636,0.28-0.892c0.158-0.246,0.331-0.466,0.519-0.661 c0.327-0.287,0.636-0.569,0.926-0.846c0.262-0.277,0.509-0.579,0.743-0.907c0.479-0.676,0.725-1.578,0.744-2.706 c0-0.616-0.069-1.153-0.207-1.614c-0.168-0.461-0.359-0.861-0.577-1.2c-0.228-0.358-0.458-0.661-0.695-0.907 c-0.247-0.236-0.468-0.416-0.665-0.539h1.937L15.241,0z M11.8,17.191c0.52,0.597,0.779,1.293,0.779,2.093 c0,0.983-0.381,1.786-1.141,2.411c-0.779,0.638-1.909,0.966-3.388,0.986c-1.649-0.021-2.949-0.393-3.899-1.108 c-1-0.718-1.499-1.63-1.499-2.736c0-0.563,0.115-1.046,0.345-1.446c0.2-0.379,0.445-0.697,0.735-0.953 c0.299-0.246,0.594-0.436,0.884-0.567c0.29-0.123,0.516-0.216,0.675-0.277c0.679-0.204,1.345-0.354,1.994-0.444 c0.659-0.062,1.069-0.082,1.23-0.062c0.27,0,0.504,0.009,0.705,0.03C10.39,15.936,11.248,16.629,11.8,17.191z M10.781,7.916 c-0.077,0.421-0.248,0.833-0.514,1.232c-0.551,0.565-1.24,0.863-2.066,0.894c-0.653,0-1.235-0.199-1.745-0.6 C5.948,9.041,5.532,8.553,5.211,7.978c-0.665-1.232-0.997-2.419-0.997-3.56C4.193,3.556,4.422,2.775,4.896,2.077 C5.461,1.409,6.167,1.065,7.02,1.044c0.643,0.021,1.211,0.21,1.707,0.571c0.485,0.379,0.875,0.873,1.173,1.478 c0.633,1.264,0.949,2.518,0.949,3.76C10.849,7.141,10.826,7.495,10.781,7.916z M24.013,11h-3v3h-2v-3h-3V9h3V6h2v3h3V11z" /> </svg> </a> <a id="Pinterest" class="gray popup" target="_blank" href="https://pinterest.com/pin/create/button/?url=http://htmlcolorcodes.com/&media=http://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources-afc56fd3.jpg&description=Easily%20find%20HTML%20color%20codes%20for%20your%20website%20using%20our%20color%20picker,%20color%20chart%20and%20HTML%20color%20names%20with%20Hex%20color%20codes,%20RGB%20and%20HSL%20values."> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M12,0C5.373,0,0,5.373,0,11.999c0,4.915,2.955,9.136,7.184,10.991c-0.035-0.838-0.006-1.844,0.209-2.756 c0.23-0.974,1.543-6.537,1.543-6.537s-0.383-0.768-0.383-1.9c0-1.778,1.031-3.106,2.314-3.106c1.092,0,1.619,0.82,1.619,1.802 c0,1.098-0.701,2.739-1.062,4.26c-0.301,1.272,0.64,2.312,1.896,2.312c2.272,0,3.805-2.92,3.805-6.38 c0-2.631-1.771-4.598-4.994-4.598c-3.639,0-5.906,2.713-5.906,5.745c0,1.046,0.307,1.784,0.791,2.354 c0.221,0.263,0.252,0.367,0.172,0.668c-0.059,0.222-0.189,0.754-0.244,0.965c-0.08,0.304-0.326,0.412-0.602,0.3 c-1.676-0.685-2.457-2.521-2.457-4.586c0-3.408,2.875-7.495,8.576-7.495c4.582,0,7.598,3.315,7.598,6.873 c0,4.709-2.617,8.226-6.475,8.226c-1.297,0-2.516-0.7-2.932-1.495c0,0-0.697,2.764-0.846,3.297 c-0.254,0.926-0.752,1.852-1.207,2.571C9.68,23.826,10.818,24,12,24c6.627,0,12-5.372,12-12.001C24,5.373,18.627,0,12,0z" /> </svg> </a> <a id="Reddit" class="gray popup" target="_blank" href="https://www.reddit.com/submit?url=http://htmlcolorcodes.com/&title=HTML%20Color%20Codes"> <svg version="1.1" class="button-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <path class="fill" d="M24,13.713c0-1.521-1.238-2.759-2.76-2.759c-0.688,0-1.33,0.263-1.832,0.715 c-1.763-1.143-4.107-1.88-6.705-2.002l1.377-4.354l3.751,0.883c0.025,1.236,1.033,2.234,2.275,2.234 c1.258,0,2.281-1.023,2.281-2.281s-1.023-2.281-2.281-2.281c-0.925,0-1.718,0.555-2.075,1.347l-4.174-0.982 c-0.25-0.058-0.513,0.087-0.591,0.336L11.66,9.652c-2.752,0.05-5.247,0.793-7.108,1.982c-0.498-0.429-1.126-0.68-1.792-0.68 C1.238,10.954,0,12.192,0,13.713c0,0.953,0.493,1.83,1.283,2.332c-0.041,0.256-0.065,0.514-0.065,0.777 C1.217,20.779,6.033,24,11.951,24c5.918,0,10.732-3.221,10.732-7.178c0-0.244-0.02-0.484-0.055-0.723 C23.474,15.611,24,14.715,24,13.713z M20.107,4.868c0.706,0,1.281,0.575,1.281,1.281c0,0.707-0.575,1.281-1.281,1.281 s-1.28-0.575-1.28-1.281C18.827,5.442,19.401,4.868,20.107,4.868z M1.578,15.008C1.22,14.68,1,14.215,1,13.713 c0-0.97,0.789-1.759,1.759-1.759c0.338,0,0.66,0.105,0.939,0.284C2.708,13.033,1.981,13.977,1.578,15.008z M6.734,15.523 c0-0.91,0.763-1.672,1.671-1.672c0.909,0,1.647,0.762,1.647,1.672c0,0.908-0.738,1.646-1.647,1.646 C7.497,17.17,6.734,16.432,6.734,15.523z M15.889,20.248c-0.812,0.814-2.081,1.211-3.876,1.211c-0.005,0-0.009-0.004-0.013-0.004 s-0.008,0.004-0.013,0.004c-1.794,0-3.062-0.396-3.875-1.211c-0.195-0.197-0.195-0.514,0.001-0.707 c0.195-0.195,0.512-0.195,0.707,0c0.616,0.617,1.652,0.918,3.167,0.918c0.005,0,0.009,0.002,0.013,0.002s0.008-0.002,0.013-0.002 c1.516,0,2.553-0.301,3.169-0.918c0.195-0.195,0.512-0.195,0.707,0C16.084,19.734,16.084,20.051,15.889,20.248z M15.619,17.17 c-0.908,0-1.673-0.738-1.673-1.646c0-0.91,0.765-1.672,1.673-1.672c0.91,0,1.646,0.762,1.646,1.672 C17.265,16.432,16.529,17.17,15.619,17.17z M22.351,15.08c-0.391-1.045-1.113-2-2.104-2.808c0.29-0.201,0.632-0.318,0.994-0.318 c0.971,0,1.76,0.789,1.76,1.759C23,14.258,22.756,14.752,22.351,15.08z" /> </svg> </a> </aside> <div class="credits"> <h5>Designed By</h5> <h2><a href="http://dixonandmoe.com/">Dixon & Moe</a></h2> <h4> © 2015 – 2017 </h4> </div> <div class="contact"> <h5>Contact</h5> <h4><a href="mailto:[email protected]">Email</a></h4> <h4><a href="https://twitter.com/dixonandmoe">Twitter</a></h4> </div> <div class="profiles"> <h5>Socialize</h5> <h4><a href="https://plus.google.com/+htmlcolorcodez">Google<b>+</b></a></h4> <h4><a href="https://facebook.com/htmlcolorcodez">Facebook</a></h4> <h4><a href="http://codepen.io/htmlcolorcodes/">CodePen</a></h4> </div> </header> <section class="row"> <div class="about"> <h5>About</h5> <p>We built HTML Color Codes because we believe tools for design should be well designed themselves. If you like the site or have a suggestion, <a href="mailto:[email protected]">drop us a line</a>; feedback is very much appreciated and always welcome! </p> </div> <div class="partners show-md"> <h5>Partner Sites</h5> <h4><a href="https://loremipsumgenerator.com">Lorem Ipsum</a></h4> <h4><a href="https://wordcounter.io">Word Counter</a></h4> </div> <div class="colophon show-md"> <h5>Colophon</h5> <h4><a href="http://middlemanapp.com/">Middleman</a></h4> <h4><a href="https://github.com/isagalaev/highlight.js">Highlight.js</a></h4> <h4><a href="https://github.com/ftlabs/fastclick/">FastClick.js</a></h4> <h4><a href="https://github.com/bebraw/colorjoe">ColorJoe.js</a></h4> <h4><a href="https://github.com/skratchdot/color-harmony">ColorHarmony.js</a></h4> </div> </section> </footer> <script src="http://d.pr/f/Jce4Nd+" type="text/javascript"></script> <script type="text/javascript"> (function(e, a) { if (!a.__SV) { var b = window; try { var c, l, i, j = b.location, g = j.hash; c = function(a, b) { return (l = a.match(RegExp(b + "=([^&]*)"))) ? l[1] : null }; g && c(g, "state") && (i = JSON.parse(decodeURIComponent(c(g, "state"))), "mpeditor" === i.action && (b.sessionStorage.setItem("_mpcehash", g), history.replaceState(i.desiredHash || "", e.title, j.pathname + j.search))) } catch (m) {} var k, h; window.mixpanel = a; a._i = []; a.init = function(b, c, f) { function e(b, a) { var c = a.split("."); 2 == c.length && (b = b[c[0]], a = c[1]); b[a] = function() { b.push([a].concat(Array.prototype.slice.call(arguments, 0))) } } var d = a; "undefined" !== typeof f ? d = a[f] = [] : f = "mixpanel"; d.people = d.people || []; d.toString = function(b) { var a = "mixpanel"; "mixpanel" !== f && (a += "." + f); b || (a += " (stub)"); return a }; d.people.toString = function() { return d.toString(1) + ".people (stub)" }; k = "disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" "); for (h = 0; h < k.length; h++) e(d, k[h]); a._i.push([b, c, f]) }; a.__SV = 1.2; b = e.createElement("script"); b.type = "text/javascript"; b.async = !0; b.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === e.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; c = e.getElementsByTagName("script")[0]; c.parentNode.insertBefore(b, c) } })(document, window.mixpanel || []); mixpanel.init("056019a787c00f4cc0c728655dcb8032"); </script> <!-- <script src='//cdn.zarget.com/117539/223876.js'></script> --> <script> (function(h, o, t, j, a, r) { h.hj = h.hj || function() { (h.hj.q = h.hj.q || []).push(arguments) }; h._hjSettings = { hjid: 383065, hjsv: 5 }; a = o.getElementsByTagName('head')[0]; r = o.createElement('script'); r.async = 1; r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv; a.appendChild(r); })(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv='); </script>
</body>
</html>
</body>
</html>
Htmlcolorcodes.com - Script Codes CSS Codes
.bsa-cpc #_default_ { position: relative; margin-bottom: 1em; padding: 1em; border: solid 1px #ebebeb; border-radius: 3px; background-color: #f7f7f7; font-size: .875rem; font-family: "proxima-nova-soft", "Proxima Nova Soft", Helvetica, Arial, sans-serif; line-height: 1.5;
}
.bsa-cpc .default-ad { display: none;
}
.bsa-cpc ._default_ { display: inline; overflow: hidden; line-height: 1.5;
}
.bsa-cpc ._default_ > * { vertical-align: middle;
}
.bsa-cpc a { color: hsl(0, 0%, 45%); text-decoration: none;
}
.bsa-cpc a:hover { color: #c0c0c0;
}
.bsa-cpc .default-image { display: none;
}
.bsa-cpc .default-title:after { content: " — ";
}
.bsa-cpc .default-title,
.bsa-cpc .default-description { display: inline;
}
.bsa-cpc .default-title { position: relative; margin-left: 8px;
}
.bsa-cpc .default-title:before { position: relative; top: -1px; left: -8px; padding: 2px 5px; border: solid 1px #44cd6f; border-radius: 3px; color: #44cd6f; content: "Sponsor"; text-transform: uppercase; font-size: 10px; font-family: Verdana, sans-serif; line-height: 1;
}
| Developer | Carbon Ads |
| Username | carbonads |
| Uploaded | October 25, 2022 |
| Rating | 3 |
| Size | 27,582 Kb |
| Views | 26,312 |
Do you need developer help for Htmlcolorcodes.com?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Carbon Ads (carbonads) Script Codes
| Name | Size |
| Symfony.com | 19,712 Kb |
| Theinspirationgrid.com - CPC | 1,424 Kb |
| Codedump.io | 10,468 Kb |
| Smarty.net | 18,890 Kb |
| Brandcolors.net | 0 Kb |
| Font-awesome-preview | 51,005 Kb |
| Thenounproject.com | 17,897 Kb |
| Laravel.io | 11,533 Kb |
| Getcomposer.org | 4,977 Kb |
| Carbon Refresh | 2,132 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Spinners using Font Icons | Keyamoon | 3,007 Kb |
| Hamburger Menu Animation | Salmanraza | 2,580 Kb |
| Fullscreen Parallax | Bassta | 3,313 Kb |
| A Pen by Dalton Liu | Liudalton | 12,437 Kb |
| Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
| Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
| Count up | Alanshortis | 2,391 Kb |
| Nice responsive team page | Infomiho | 3,139 Kb |
| A Pen by Alex Edwards | Exards | 8,218 Kb |
| Border image | JohnRiordan | 2,120 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!