HTML Color Codes

<!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="https://htmlcolorcodes.com/"> <link rel="publisher" href="https://plus.google.com/+htmlcolorcodez"> <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' /> <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="https://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="https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.jpg"> <meta name="twitter:domain" content="htmlcolorcodes.com"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:url" content="https://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="https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.jpg"> <link rel="alternate" hreflang="en" href="https://htmlcolorcodes.com/" /> <link rel="alternate" hreflang="es" href="https://htmlcolorcodes.com/es/" /> <link rel="alternate" hreflang="fr" href="https://htmlcolorcodes.com/fr/" /> <link rel="alternate" hreflang="zh" href="https://htmlcolorcodes.com/zh/" /> <link rel="alternate" hreflang="x-default" href="https://htmlcolorcodes.com/" /> <link href="/assets/stylesheets/application-4a0e4baa.css" rel="stylesheet" /> <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> <link rel="stylesheet" href="https://use.typekit.net/igy8ywi.css"> <link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon.png" /> <link rel="icon" sizes="192x192" href="/assets/images/icons/icon-192x192.png"> <link rel="apple-touch-icon-precomposed" sizes="512x512" href="/assets/images/icons/icon-512x512.png"> <link rel="apple-touch-icon-precomposed" sizes="384x384" href="/assets/images/icons/icon-384x384.png"> <link rel="apple-touch-icon-precomposed" sizes="256x256" href="/assets/images/icons/icon-256x256.png"> <link rel="apple-touch-icon-precomposed" sizes="192x192" href="/assets/images/icons/icon-192x192.png"> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/assets/images/icons/icon-180x180.png"> <link rel="apple-touch-icon-precomposed" sizes="167x167" href="/assets/images/icons/icon-167x167.png"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/assets/images/icons/icon-152x152.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/images/icons/icon-144x144.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/assets/images/icons/icon-120x120.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/images/icons/icon-114x114.png"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/assets/images/icons/icon-76x76.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/images/icons/icon-72x72.png"> <link rel="apple-touch-icon-precomposed" href="/assets/images/icons/icon-57x57.png"> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "WebSite", "url" : "https://htmlcolorcodes.com/", "name" : "HTML Color Codes", "image" : "https://htmlcolorcodes.com/assets/images/logo-html-color-codes.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" : "https://htmlcolorcodes.com/assets/images/logo-dixon-and-moe.png", "contactPoint" : [ { "@type" : "ContactPoint", "url" : "https://dixonandmoe.com/", "email" : "alex@htmlcolorcodes.com", "contactType" : "customer service" } ] } ] } </script> <script data-cfasync="false" type="text/javascript"> var freestar = freestar || {}; freestar.hitTime = Date.now(); freestar.queue = freestar.queue || []; freestar.config = freestar.config || {}; freestar.debug = window.location.search.indexOf('fsdebug') === -1 ? false : true; freestar.config.enabled_slots = []; !function(a,b){var c=b.getElementsByTagName("script")[0],d=b.createElement("script"),e="https://a.pub.network/htmlcolorcodes";e+=freestar.debug?"/qa/pubfig.min.js":"/pubfig.min.js",d.async=!0,d.src=e,c.parentNode.insertBefore(d,c)}(window,document); freestar.initCallback = function () { (freestar.config.enabled_slots.length === 0) ? freestar.initCallbackCalled = false : freestar.newAdSlots(freestar.config.enabled_slots) } </script> </head> <body class="index" vocab="https://schema.org/" typeof="WebPage"> <meta property="url" content="https://htmlcolorcodes.com/"> <div id="modal"></div> <div id="overlay"></div> <header class="body-header"> <nav class="menu" vocab="https://schema.org/" typeof="SiteNavigationElement" role="navigation" data-tracker-category="Navigation" data-tracker-action="Primary Menu"> <div class="menu__logo"> <a href="./" class="menu__icon" property="url"> <div class="logo"> <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> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.993c6.627 0 12-5.371 12-11.997C24 5.371 18.627 0 12 0S0 5.37 0 11.996s5.373 11.997 12 11.997zm0-6.998a5 5 0 10-5-4.999 5 5 0 005 4.999z" fill="#FF5733"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17 12.004h7c0-3.324-1.352-6.332-3.537-8.505l-4.946 4.945A4.983 4.983 0 0117 11.996v.008zM12.015 24h-.03.03z" fill="#C70039"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 11.996c0 3.317-1.346 6.319-3.522 8.49l-4.95-4.948A4.982 4.982 0 0017 11.996m0 0h7z" fill="#900C3F"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.493 20.471A11.964 11.964 0 0112 23.992v-6.997a4.985 4.985 0 003.543-1.472l4.95 4.948z" fill="#581845"/> </svg> </a><a href="./" class="menu__title" property="url"> <span property="name">HTML Color Codes</span> </a> <button class="menu__button js-menu-button"> <span class="menu__button-line"></span> </button> </div> <ul class="menu__list"> <li class="menu__item"> <a href="/color-picker/" class="menu__link" property="url"> <span class="menu__link-title" property="name">Picker</span> </a> </li> <li class="menu__item"> <a href="/rgb-to-hex/" class="menu__link" property="url"> <span class="menu__link-title" property="name">Convert</span> <span class="menu__link-caret"> <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M.293.293a1 1 0 011.414 0L5 3.586 8.293.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/> </svg> </span> </a> <div class="menu-dropdown"> <ul class="menu-dropdown__list"> <li class="menu-dropdown__item"> <a href="/rgb-to-hex/" class="menu-dropdown__link" property="url"> <span property="name">RGB to Hex</span> </a> </li> <li class="menu-dropdown__item"> <a href="/hex-to-rgb/" class="menu-dropdown__link" property="url"> <span property="name">Hex to RGB</span> </a> </li> </ul> </div> </li> <li class="menu__item"> <a href="color-chart/" class="menu__link" property="url"> <span class="menu__link-title" property="name">Chart</span> </a> </li> <li class="menu__item"> <a href="/color-names/" class="menu__link" property="url"> <span class="menu__link-title" property="name">Names</span> <span class="menu__link-caret"> <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M.293.293a1 1 0 011.414 0L5 3.586 8.293.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/> </svg> </span> </a> <div class="menu-dropdown"> <ul class="menu-dropdown__list"> <li class="menu-dropdown__item"> <a href="/color-names/" class="menu-dropdown__link" property="url"> <span property="name">HTML Color Names</span> </a> </li> <li class="menu-dropdown__item"> <a href="/minecraft-color-codes/" class="menu-dropdown__link" property="url"> <span property="name">Minecraft Color Codes</span> </a> </li> <li class="menu-dropdown__item"> <a href="/bukkit-color-codes/" class="menu-dropdown__link" property="url"> <span property="name">Bukkit Color Codes</span> </a> </li> <li class="menu-dropdown__item"> <a href="/roblox-color-codes/" class="menu-dropdown__link" property="url"> <span property="name">Roblox Color Codes</span> </a> </li> </ul> </div> </li> <li class="menu__item"> <a href="colors/" class="menu__link" property="url"> <span class="menu__link-title" property="name">Library</span> </a> </li> <li class="menu__item"> <a href="tutorials/" class="menu__link" property="url"> <span class="menu__link-title" property="name">Tutorials</span> </a> </li> <li class="menu__item"> <a href="resources/" class="menu__link" property="url"> <span class="menu__link-title" property="name">Resources</span> </a> </li> </ul> <a href="https://loremipsum.io/font-generator/" class="menu__credit">Font Generator</a> </nav> <nav class="menu-mobile js-menu-mobile" data-tracker-category="Navigation" data-tracker-action="Mobile Menu"> <ul class="menu-mobile__list"> <li class="menu-mobile__item"> <a href="/color-picker/" class="menu-mobile__link" property="url"> <span class="menu-mobile__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2a3 3 0 00-3 3v10a3 3 0 003 3h6a3 3 0 003-3V5a3 3 0 00-3-3H5zM4 5a1 1 0 011-1h6a1 1 0 011 1v10a1 1 0 01-1 1H5a1 1 0 01-1-1V5z"/> <path d="M3 20a1 1 0 100 2h6a1 1 0 100-2H3zM12 21a1 1 0 112 0 1 1 0 01-2 0z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M19 2a1 1 0 00-1 1v3.17a3.001 3.001 0 000 5.66V21a1 1 0 102 0v-9.17a3.001 3.001 0 000-5.66V3a1 1 0 00-1-1zm1 7a1 1 0 11-2 0 1 1 0 012 0z"/> </svg></span> <span property="name">Picker</span> </a> </li> <li class="menu-mobile__item"> <a href="/rgb-to-hex/" class="menu-mobile__link" property="url"> <span class="menu-mobile__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 5a3 3 0 013-3h4a3 3 0 013 3v4a3 3 0 01-3 3H5a3 3 0 01-3-3V5zm3-1a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V5a1 1 0 00-1-1H5zm7 11a3 3 0 013-3h4a3 3 0 013 3v4a3 3 0 01-3 3h-4a3 3 0 01-3-3v-4zm3-1a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4zM13 3a1 1 0 011-1h1a5 5 0 015 5v.586l.293-.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414l.293.293V7a3 3 0 00-3-3h-1a1 1 0 01-1-1zm-3 19a1 1 0 100-2H9a3 3 0 01-3-3v-.586l.293.293a1 1 0 001.414-1.414l-2-2a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L4 16.414V17a5 5 0 005 5h1z"/> </svg></span> <span property="name">Convert</span> </a> <ul class="menu-mobile__grid"> <li class="menu-mobile__cell"> <a href="/rgb-to-hex/" class="menu-mobile__link menu-mobile__link--secondary" property="url"> <span property="name">RGB to Hex</span> </a> </li> <li class="menu-mobile__cell"> <a href="/hex-to-rgb/" class="menu-mobile__link menu-mobile__link--secondary" property="url"> <span property="name">Hex to RGB</span> </a> </li> </ul> </li> <li class="menu-mobile__item"> <a href="color-chart/" class="menu-mobile__link" property="url"> <span class="menu-mobile__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 2A2.5 2.5 0 0014 4.5v3a2.5 2.5 0 002.5 2.5h3A2.5 2.5 0 0022 7.5v-3A2.5 2.5 0 0019.5 2h-3zM16 4.5a.5.5 0 01.5-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5v-3zM4.5 14A2.5 2.5 0 002 16.5v3A2.5 2.5 0 004.5 22h3a2.5 2.5 0 002.5-2.5v-3A2.5 2.5 0 007.5 14h-3zM4 16.5a.5.5 0 01.5-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5v-3zM12 15a3 3 0 013-3h4a3 3 0 013 3v4a3 3 0 01-3 3h-4a3 3 0 01-3-3v-4zm3-1a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4zM5 2a3 3 0 00-3 3v4a3 3 0 003 3h4a3 3 0 003-3V5a3 3 0 00-3-3H5zM4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5z"/> </svg></span> <span property="name">Chart</span> </a> </li> <li class="menu-mobile__item"> <a href="/color-names/" class="menu-mobile__link" property="url"> <span class="menu-mobile__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 2a1 1 0 100 2h8a1 1 0 100-2h-8zM13 13a1 1 0 100 2h8a1 1 0 100-2h-8zM12 6a1 1 0 011-1h8a1 1 0 110 2h-8a1 1 0 01-1-1zM13 16a1 1 0 100 2h8a1 1 0 100-2h-8zM12 9a1 1 0 011-1h4a1 1 0 110 2h-4a1 1 0 01-1-1zM13 19a1 1 0 100 2h4a1 1 0 100-2h-4z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 16a3 3 0 013-3h3a3 3 0 013 3v3a3 3 0 01-3 3H5a3 3 0 01-3-3v-3zm3-1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-3a1 1 0 00-1-1H5zM5 2a3 3 0 00-3 3v3a3 3 0 003 3h3a3 3 0 003-3V5a3 3 0 00-3-3H5zM4 5a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1V5z"/> </svg></span> <span property="name">Names</span> </a> <ul class="menu-mobile__grid menu-mobile__grid--names"> <li class="menu-mobile__cell"> <a href="/color-names/" class="menu-mobile__link menu-mobile__link--secondary" property="url"> <span property="name">HTML</span> </a> </li> <li class="menu-mobile__cell"> <a href="/minecraft-color-codes/" class="menu-mobile__link menu-mobile__link--secondary" property="url"> <span property="name">Minecraft</span> </a> </li> <li class="menu-mobile__cell"> <a href="/bukkit-color-codes/" class="menu-mobile__link menu-mobile__link--secondary" property="url"> <span property="name">Bukkit</span> </a> </li> <li class="menu-mobile__cell"> <a href="/roblox-color-codes/" class="menu-mobile__link menu-mobile__link--secondary" property="url"> <span property="name">Roblox</span> </a> </li> </ul> </li> <li class="menu-mobile__item"> <a href="colors/" class="menu-mobile__link" property="url"> <span class="menu-mobile__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 4a1 1 0 00-1 1v14a1 1 0 001 1h3a1 1 0 001-1V5a1 1 0 00-1-1H5zm0 18h14a3 3 0 003-3v-3a3 3 0 00-3-3h-1l1.97-1.97a3 3 0 000-4.243l-2.12-2.122a3 3 0 00-4.243 0L11 7.272V5a3 3 0 00-3-3H5a3 3 0 00-3 3v14c0 .621.189 1.198.512 1.677A2.986 2.986 0 005 22zm6-4.828V10.1l4.02-4.02a1 1 0 011.415 0L18.556 8.2a1 1 0 010 1.414L11 17.172zM16 15l-5 5h8a1 1 0 001-1v-3a1 1 0 00-1-1h-3zM6 5a1 1 0 000 2h1a1 1 0 000-2H6zM5 9a1 1 0 011-1h1a1 1 0 110 2H6a1 1 0 01-1-1zm1 2a1 1 0 100 2h1a1 1 0 100-2H6z"/> </svg></span> <span property="name">Library</span> </a> </li> <li class="menu-mobile__item"> <a href="tutorials/" class="menu-mobile__link" property="url"> <span class="menu-mobile__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2a3 3 0 00-3 3v12a3 3 0 003 3h3.17A3.001 3.001 0 0011 22h8a3 3 0 003-3V7a3 3 0 00-3-3h-3.17A3.001 3.001 0 0013 2H5zm9 15a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1h8a1 1 0 011 1v12zm6 2a1 1 0 01-1 1h-6a3 3 0 003-3V6h3a1 1 0 011 1v12zM6 5a1 1 0 100 2 1 1 0 000-2zm2 1a1 1 0 011-1h3a1 1 0 110 2H9a1 1 0 01-1-1zM6 8a1 1 0 100 2 1 1 0 000-2zm2 1a1 1 0 011-1h3a1 1 0 110 2H9a1 1 0 01-1-1zm1 2a1 1 0 100 2h3a1 1 0 100-2H9z"/> </svg></span> <span property="name">Tutorials</span> </a> </li> <li class="menu-mobile__item"> <a href="resources/" class="menu-mobile__link" property="url"> <span class="menu-mobile__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2a3 3 0 00-3 3v14a3 3 0 003 3h14a3 3 0 003-3V5a3 3 0 00-3-3H5zM4 5a1 1 0 011-1h14a1 1 0 011 1v3H4V5zm0 14v-9h16v9a1 1 0 01-1 1H5a1 1 0 01-1-1zM6 5a1 1 0 100 2 1 1 0 000-2zm3 0a1 1 0 100 2 1 1 0 000-2zm2 1a1 1 0 112 0 1 1 0 01-2 0zm-5 5a1 1 0 100 2h12a1 1 0 100-2H6zm-1 4a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"/> </svg></span> <span property="name">Resources</span> </a> </li> </ul> <div class="menu-mobile__footer"> <a href="https://dixonandmoe.com" class="menu-mobile__credit">Dixon & Moe</a> <a href="mailto:alex@htmlcolorcodes.com" class="menu-mobile__contact">Email</a> </div> </nav> </header> <header id="header" class="page-header magenta js-header"> <div class="home-group row show-sm"> <div class="home-group__social show-md"> <a href="https://twitter.com/share?url=https://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful" id="Twitter" class="gray popup" target="_blank"> <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 href="https://www.facebook.com/sharer/sharer.php?u=https://htmlcolorcodes.com/" id="Facebook" class="gray popup" target="_blank"> <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 href="https://plus.google.com/share?url=https://htmlcolorcodes.com/" id="Google+" class="gray popup" target="_blank"> <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 href="https://pinterest.com/pin/create/button/?url=https://htmlcolorcodes.com/&media=https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.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. " id="Pinterest" class="gray popup" target="_blank"> <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" style="height: 250px">  <div align="center" data-freestar-ad="__300x250 __320x50" id="htmlcolorcodes_300x250_320x50_ATF"> <script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "htmlcolorcodes_300x250_320x50_ATF", slotId: "htmlcolorcodes_300x250_320x50_ATF" }); </script> </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 href="/export/?type=palette" target="_blank"><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 href="/export/?type=palette" target="_blank"> <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 href="https://twitter.com/share?url=https://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful" id="Twitter" class="gray popup" target="_blank"> <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 href="https://www.facebook.com/sharer/sharer.php?u=https://htmlcolorcodes.com/" id="Facebook" class="gray popup" target="_blank"> <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 href="https://plus.google.com/share?url=https://htmlcolorcodes.com/" id="Google+" class="gray popup" target="_blank"> <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 href="https://pinterest.com/pin/create/button/?url=https://htmlcolorcodes.com/&media=https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.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. " id="Pinterest" class="gray popup" target="_blank"> <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="https://schema.org/" typeof="Article"> <meta property="image" content="https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.jpg"> <meta property="datePublished" content="2015-09-03"> <header class="row"> <div id="js-picker"></div>  <h2 property="headline"> <a href="/color-picker/" property="url"> 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"> <div class="show-md" style="margin-bottom:24px;">  <div align="center" data-freestar-ad="__300x250 __320x50" id="htmlcolorcodes_300x250_320x50_300x600_160x600_1"> <script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "htmlcolorcodes_300x250_320x50_300x600_160x600_1", slotId: "htmlcolorcodes_300x250_320x50_300x600_160x600_1" }); </script> </div>  <div align="center" data-freestar-ad="__300x250 __0x0" id="htmlcolorcodes_300x250"> <script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "htmlcolorcodes_300x250", slotId: "htmlcolorcodes_300x250" }); </script> </div> </div> </aside> </article> <article class="home color-charts show-sm" vocab="https://schema.org/" typeof="Article"> <meta property="image" content="https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.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 href="color-chart/" property="url"> 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;">  <div align="center" data-freestar-ad="__300x600 __320x50" id="htmlcolorcodes_300x250_320x50_300x600_160x600_2"> <script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "htmlcolorcodes_300x250_320x50_300x600_160x600_2", slotId: "htmlcolorcodes_300x250_320x50_300x600_160x600_2" }); </script> </div> </div> </aside> </article> <article id="home_color_names" class="home color-names show-sm" vocab="https://schema.org/" typeof="Article"> <meta property="image" content="https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.jpg"> <meta property="datePublished" content="2015-09-03"> <header class="chart row"> <div class="color-group"> <table class="color-table"> <tbody class="color-table__body"> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #CD5C5C;" data-hex="#CD5C5C" data-rgb="rgb(205, 92, 92)" data-hsl="hsl(0, 53%, 58%)"></div> </td> <td class="color-table__cell color-table__cell--name">IndianRed</td> <td class="color-table__cell color-table__cell--hex">#CD5C5C</td> <td class="color-table__cell color-table__cell--rgb">rgb(205, 92, 92)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #F08080;" data-hex="#F08080" data-rgb="rgb(240, 128, 128)" data-hsl="hsl(0, 79%, 72%)"></div> </td> <td class="color-table__cell color-table__cell--name">LightCoral</td> <td class="color-table__cell color-table__cell--hex">#F08080</td> <td class="color-table__cell color-table__cell--rgb">rgb(240, 128, 128)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #FA8072;" data-hex="#FA8072" data-rgb="rgb(250, 128, 114)" data-hsl="hsl(6, 93%, 71%)"></div> </td> <td class="color-table__cell color-table__cell--name">Salmon</td> <td class="color-table__cell color-table__cell--hex">#FA8072</td> <td class="color-table__cell color-table__cell--rgb">rgb(250, 128, 114)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #E9967A;" data-hex="#E9967A" data-rgb="rgb(233, 150, 122)" data-hsl="hsl(15, 72%, 70%)"></div> </td> <td class="color-table__cell color-table__cell--name">DarkSalmon</td> <td class="color-table__cell color-table__cell--hex">#E9967A</td> <td class="color-table__cell color-table__cell--rgb">rgb(233, 150, 122)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #FFA07A;" data-hex="#FFA07A" data-rgb="rgb(255, 160, 122)" data-hsl="hsl(17, 100%, 74%)"></div> </td> <td class="color-table__cell color-table__cell--name">LightSalmon</td> <td class="color-table__cell color-table__cell--hex">#FFA07A</td> <td class="color-table__cell color-table__cell--rgb">rgb(255, 160, 122)</td> </tr> </table> </div> <h2 property="headline"> <a href="/color-names/" property="url"> 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"> <div class="show-md" style="margin-bottom:24px;">  <div align="center" data-freestar-ad="__300x600 __320x50" id="htmlcolorcodes_300x250_320x50_300x600_160x600_3"> <script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "htmlcolorcodes_300x250_320x50_300x600_160x600_3", slotId: "htmlcolorcodes_300x250_320x50_300x600_160x600_3" }); </script> </div> </div> </aside> </article> <article id="home_color_library" class="home color-names color-library show-sm" vocab="https://schema.org/" typeof="Article"> <meta property="image" content="https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.jpg"> <meta property="datePublished" content="2015-09-03"> <header class="chart row"> <div class="color-library__swatches"> <div class="color-card"> <div class="color-swatch"> <div class="js-color" style="background-color: #DFFF00;" data-hex="#DFFF00" data-rgb="223, 255, 0" data-hsl="68°, 100%, 50%"></div> </div> <div class="color-data"> <h4 class="selectable">#DFFF00</h4> <h4 class="selectable">223, 255, 0</h4> </div> </div> <div class="color-card"> <div class="color-swatch"> <div class="js-color" style="background-color: #FFBF00;" data-hex="#FFBF00" data-rgb="255, 191, 0" data-hsl="45°, 100%, 50%"></div> </div> <div class="color-data"> <h4 class="selectable">#FFBF00</h4> <h4 class="selectable">255, 191, 0</h4> </div> </div> <div class="color-card"> <div class="color-swatch"> <div class="js-color" style="background-color: #FF7F50;" data-hex="#FF7F50" data-rgb="255, 127, 80" data-hsl="16°, 100%, 66%"></div> </div> <div class="color-data"> <h4 class="selectable">#FF7F50</h4> <h4 class="selectable">255, 127, 80</h4> </div> </div> <div class="color-card"> <div class="color-swatch"> <div class="js-color" style="background-color: #DE3163;" data-hex="#DE3163" data-rgb="222, 49, 99" data-hsl="343°, 72%, 53%"></div> </div> <div class="color-data"> <h4 class="selectable">#DE3163</h4> <h4 class="selectable">222, 49, 99</h4> </div> </div> <div class="color-card"> <div class="color-swatch"> <div class="js-color" style="background-color: #9FE2BF;" data-hex="#9FE2BF" data-rgb="159, 226, 191" data-hsl="149°, 54%, 75%"></div> </div> <div class="color-data"> <h4 class="selectable">#9FE2BF</h4> <h4 class="selectable">159, 226, 191</h4> </div> </div> <div class="color-card"> <div class="color-swatch"> <div class="js-color" style="background-color: #40E0D0;" data-hex="#40E0D0" data-rgb="64, 224, 208" data-hsl="174°, 72%, 56%"></div> </div> <div class="color-data"> <h4 class="selectable">#40E0D0</h4> <h4 class="selectable">64, 224, 208</h4> </div> </div> <div class="color-card"> <div class="color-swatch"> <div class="js-color" style="background-color: #6495ED;" data-hex="#6495ED" data-rgb="100, 149, 237" data-hsl="219°, 79%, 66%"></div> </div> <div class="color-data"> <h4 class="selectable">#6495ED</h4> <h4 class="selectable">100, 149, 237</h4> </div> </div> <div class="color-card"> <div class="color-swatch"> <div class="js-color" style="background-color: #CCCCFF;" data-hex="#CCCCFF" data-rgb="204, 204, 255" data-hsl="240°, 100%, 90%"></div> </div> <div class="color-data"> <h4 class="selectable">#CCCCFF</h4> <h4 class="selectable">204, 204, 255</h4> </div> </div> </div> <h2 property="headline"> <a href="colors/" property="url"> Color Library </a> </h2> <p property="description">Sourcing colors for a new project? Just for fun? Get inspired by our <a href="http://htmlcolorcodes.com/colors/">color library</a> containing over 100+ shades from peach to periwinkle, turquoise to taupe, and just about everything in-between. </p> <div class="buttons row"> <a href="colors/"> <div class="button border gray"> <h5 class="arrow gray">Explore the Library!<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"> <div class="show-md">  <div align="center" data-freestar-ad="__300x600 __320x50" id="htmlcolorcodes_300x250_320x50_300x600_160x600_4"> <script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "htmlcolorcodes_300x250_320x50_300x600_160x600_4", slotId: "htmlcolorcodes_300x250_320x50_300x600_160x600_4" }); </script> </div> </div> </aside> </article> <article class="home color-tutorials show-sm" vocab="https://schema.org/" typeof="Article"> <meta property="image" content="https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.jpg"> <meta property="datePublished" content="2015-09-03"> <figure property="image" vocab="https://schema.org/" typeof="ImageObject"> <meta property ="name" content="HTML ≈ CSS HTML & CSS Tutorials"> <div class="image top portrait ratio-16x86"> <a href="tutorials/" property="url"> <meta property="thumbnail" content="/assets/images/html-color-codes-color-tutorials-thumb.jpg"> <img src="/assets/images/html-color-codes-color-tutorials.jpg" alt="HTML & CSS Tutorials" property="contentUrl" /> </a> </div> </figure> <header class="row"> <h2 property="headline"> <a href="tutorials/" property="url"> HTML & CSS Tutorials </a> </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"> <div class="show-md">  <div align="center" data-freestar-ad="__300x600 __320x50" id="htmlcolorcodes_300x250_320x50_300x600_160x600_5"> <script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "htmlcolorcodes_300x250_320x50_300x600_160x600_5", slotId: "htmlcolorcodes_300x250_320x50_300x600_160x600_5" }); </script> </div> </div> </aside> </article> <article class="home color-resources show-sm" vocab="https://schema.org/" typeof="Article"> <meta property="image" content="https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.jpg"> <meta property="datePublished" content="2015-09-03"> <figure property="image" vocab="https://schema.org/" typeof="ImageObject"> <meta property ="name" content="translation missing: en.header.color Resources"> <div class="image top portrait ratio-16x86"> <a href="resources/" property="url"> <meta property="thumbnail" content="/assets/images/html-color-codes-color-palette-generators-thumb.jpg"> <img src="/assets/images/html-color-codes-color-palette-generators.jpg" alt="Web Resources" property="contentUrl" /> </a> </div> </figure> <header class="row"> <h2 property="headline"> <a href="resources/" property="url"> Resources </a> </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="https://schema.org/" typeof="Article"> <meta property="image" content="https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.jpg"> <meta property="datePublished" content="2015-09-03"> <header class="row"> <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> <div class="color-group"> <h2 class="color-group__title" property="headline">List of common HTML color codes</h2> <table class="color-table"> <thead class="color-table__head"> <tr class="color-table__row"> <th class="color-table__cell color-table__cell--color">Color</th> <th class="color-table__cell color-table__cell--name">Name</th> <th class="color-table__cell color-table__cell--hex">Hex Code</th> <th class="color-table__cell color-table__cell--rgb">RGB Code</th> </tr> </thead> <tbody class="color-table__body"> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #FFFFFF;" data-hex="#FFFFFF" data-rgb="rgb(255, 255, 255)" data-hsl="hsl(0, 0%, 100%)"></div> </td> <td class="color-table__cell color-table__cell--name">White</td> <td class="color-table__cell color-table__cell--hex">#FFFFFF</td> <td class="color-table__cell color-table__cell--rgb">rgb(255, 255, 255)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #C0C0C0;" data-hex="#C0C0C0" data-rgb="rgb(192, 192, 192)" data-hsl="hsl(0, 0%, 75%)"></div> </td> <td class="color-table__cell color-table__cell--name">Silver</td> <td class="color-table__cell color-table__cell--hex">#C0C0C0</td> <td class="color-table__cell color-table__cell--rgb">rgb(192, 192, 192)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #808080;" data-hex="#808080" data-rgb="rgb(128, 128, 128)" data-hsl="hsl(0, 0%, 50%)"></div> </td> <td class="color-table__cell color-table__cell--name">Gray</td> <td class="color-table__cell color-table__cell--hex">#808080</td> <td class="color-table__cell color-table__cell--rgb">rgb(128, 128, 128)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #000000;" data-hex="#000000" data-rgb="rgb(0, 0, 0)" data-hsl="hsl(0, 0%, 0%)"></div> </td> <td class="color-table__cell color-table__cell--name">Black</td> <td class="color-table__cell color-table__cell--hex">#000000</td> <td class="color-table__cell color-table__cell--rgb">rgb(0, 0, 0)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #FF0000;" data-hex="#FF0000" data-rgb="rgb(255, 0, 0)" data-hsl="hsl(0, 100%, 50%)"></div> </td> <td class="color-table__cell color-table__cell--name">Red</td> <td class="color-table__cell color-table__cell--hex">#FF0000</td> <td class="color-table__cell color-table__cell--rgb">rgb(255, 0, 0)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #800000;" data-hex="#800000" data-rgb="rgb(128, 0, 0)" data-hsl="hsl(0, 100%, 25%)"></div> </td> <td class="color-table__cell color-table__cell--name">Maroon</td> <td class="color-table__cell color-table__cell--hex">#800000</td> <td class="color-table__cell color-table__cell--rgb">rgb(128, 0, 0)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #FFFF00;" data-hex="#FFFF00" data-rgb="rgb(255, 255, 0)" data-hsl="hsl(60, 100%, 50%)"></div> </td> <td class="color-table__cell color-table__cell--name">Yellow</td> <td class="color-table__cell color-table__cell--hex">#FFFF00</td> <td class="color-table__cell color-table__cell--rgb">rgb(255, 255, 0)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #808000;" data-hex="#808000" data-rgb="rgb(128, 128, 0)" data-hsl="hsl(60, 100%, 25%)"></div> </td> <td class="color-table__cell color-table__cell--name">Olive</td> <td class="color-table__cell color-table__cell--hex">#808000</td> <td class="color-table__cell color-table__cell--rgb">rgb(128, 128, 0)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #00FF00;" data-hex="#00FF00" data-rgb="rgb(0, 255, 0)" data-hsl="hsl(120, 100%, 50%)"></div> </td> <td class="color-table__cell color-table__cell--name">Lime</td> <td class="color-table__cell color-table__cell--hex">#00FF00</td> <td class="color-table__cell color-table__cell--rgb">rgb(0, 255, 0)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #008000;" data-hex="#008000" data-rgb="rgb(0, 128, 0)" data-hsl="hsl(120, 100%, 25%)"></div> </td> <td class="color-table__cell color-table__cell--name">Green</td> <td class="color-table__cell color-table__cell--hex">#008000</td> <td class="color-table__cell color-table__cell--rgb">rgb(0, 128, 0)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #00FFFF;" data-hex="#00FFFF" data-rgb="rgb(0, 255, 255)" data-hsl="hsl(180, 100%, 50%)"></div> </td> <td class="color-table__cell color-table__cell--name">Aqua</td> <td class="color-table__cell color-table__cell--hex">#00FFFF</td> <td class="color-table__cell color-table__cell--rgb">rgb(0, 255, 255)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #008080;" data-hex="#008080" data-rgb="rgb(0, 128, 128)" data-hsl="hsl(180, 100%, 25%)"></div> </td> <td class="color-table__cell color-table__cell--name">Teal</td> <td class="color-table__cell color-table__cell--hex">#008080</td> <td class="color-table__cell color-table__cell--rgb">rgb(0, 128, 128)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #0000FF;" data-hex="#0000FF" data-rgb="rgb(0, 0, 255)" data-hsl="hsl(240, 100%, 50%)"></div> </td> <td class="color-table__cell color-table__cell--name">Blue</td> <td class="color-table__cell color-table__cell--hex">#0000FF</td> <td class="color-table__cell color-table__cell--rgb">rgb(0, 0, 255)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #000080;" data-hex="#000080" data-rgb="rgb(0, 0, 128)" data-hsl="hsl(240, 100%, 25%)"></div> </td> <td class="color-table__cell color-table__cell--name">Navy</td> <td class="color-table__cell color-table__cell--hex">#000080</td> <td class="color-table__cell color-table__cell--rgb">rgb(0, 0, 128)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #FF00FF;" data-hex="#FF00FF" data-rgb="rgb(255, 0, 255)" data-hsl="hsl(300, 100%, 50%)"></div> </td> <td class="color-table__cell color-table__cell--name">Fuchsia</td> <td class="color-table__cell color-table__cell--hex">#FF00FF</td> <td class="color-table__cell color-table__cell--rgb">rgb(255, 0, 255)</td> </tr> <tr class="color-table__row"> <td class="color-table__cell color-table__cell--color"> <div class="color-table__color js-color" style="background-color: #800080;" data-hex="#800080" data-rgb="rgb(128, 0, 128)" data-hsl="hsl(300, 100%, 25%)"></div> </td> <td class="color-table__cell color-table__cell--name">Purple</td> <td class="color-table__cell color-table__cell--hex">#800080</td> <td class="color-table__cell color-table__cell--rgb">rgb(128, 0, 128)</td> </tr> </tbody> </table> </div> </section> <footer class="row show-md"> <h5>Share HTML Color Codes with your friends!</h5> <div class="button-group"> <ul> <a href="https://twitter.com/share?url=https://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful" id="Twitter" class="gray popup" target="_blank"> <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 href="https://www.facebook.com/sharer/sharer.php?u=https://htmlcolorcodes.com/" id="Facebook" class="gray popup" target="_blank"> <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 href="https://plus.google.com/share?url=https://htmlcolorcodes.com/" id="Google+" class="gray popup" target="_blank"> <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 href="https://pinterest.com/pin/create/button/?url=https://htmlcolorcodes.com/&media=https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.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. " id="Pinterest" class="gray popup" target="_blank"> <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 href="/color-picker/" class="color-picker"> <section> <h2>Picker <span class="gray"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2a3 3 0 00-3 3v10a3 3 0 003 3h6a3 3 0 003-3V5a3 3 0 00-3-3H5zM4 5a1 1 0 011-1h6a1 1 0 011 1v10a1 1 0 01-1 1H5a1 1 0 01-1-1V5z"/> <path d="M3 20a1 1 0 100 2h6a1 1 0 100-2H3zM12 21a1 1 0 112 0 1 1 0 01-2 0z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M19 2a1 1 0 00-1 1v3.17a3.001 3.001 0 000 5.66V21a1 1 0 102 0v-9.17a3.001 3.001 0 000-5.66V3a1 1 0 00-1-1zm1 7a1 1 0 11-2 0 1 1 0 012 0z"/> </svg></span></h2> <div></div> <h5>Colors and Harmonies</h5> </section> </a> <a href="color-chart/" class="color-charts"> <section> <h2>Chart <span class="gray"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 2A2.5 2.5 0 0014 4.5v3a2.5 2.5 0 002.5 2.5h3A2.5 2.5 0 0022 7.5v-3A2.5 2.5 0 0019.5 2h-3zM16 4.5a.5.5 0 01.5-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5v-3zM4.5 14A2.5 2.5 0 002 16.5v3A2.5 2.5 0 004.5 22h3a2.5 2.5 0 002.5-2.5v-3A2.5 2.5 0 007.5 14h-3zM4 16.5a.5.5 0 01.5-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5v-3zM12 15a3 3 0 013-3h4a3 3 0 013 3v4a3 3 0 01-3 3h-4a3 3 0 01-3-3v-4zm3-1a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4zM5 2a3 3 0 00-3 3v4a3 3 0 003 3h4a3 3 0 003-3V5a3 3 0 00-3-3H5zM4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5z"/> </svg></span></h2> <div></div> <h5>Flat, Material, Web Safe</h5> </section> </a> <a href="/color-names/" class="color-names"> <section> <h2>Names <span class="gray"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 2a1 1 0 100 2h8a1 1 0 100-2h-8zM13 13a1 1 0 100 2h8a1 1 0 100-2h-8zM12 6a1 1 0 011-1h8a1 1 0 110 2h-8a1 1 0 01-1-1zM13 16a1 1 0 100 2h8a1 1 0 100-2h-8zM12 9a1 1 0 011-1h4a1 1 0 110 2h-4a1 1 0 01-1-1zM13 19a1 1 0 100 2h4a1 1 0 100-2h-4z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 16a3 3 0 013-3h3a3 3 0 013 3v3a3 3 0 01-3 3H5a3 3 0 01-3-3v-3zm3-1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-3a1 1 0 00-1-1H5zM5 2a3 3 0 00-3 3v3a3 3 0 003 3h3a3 3 0 003-3V5a3 3 0 00-3-3H5zM4 5a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1V5z"/> </svg></span></h2> <div></div> <h5>140 named HTML Colors</h5> </section> </a> <a href="colors/" class="color-library"> <section> <h2>Library <span class="gray"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 4a1 1 0 00-1 1v14a1 1 0 001 1h3a1 1 0 001-1V5a1 1 0 00-1-1H5zm0 18h14a3 3 0 003-3v-3a3 3 0 00-3-3h-1l1.97-1.97a3 3 0 000-4.243l-2.12-2.122a3 3 0 00-4.243 0L11 7.272V5a3 3 0 00-3-3H5a3 3 0 00-3 3v14c0 .621.189 1.198.512 1.677A2.986 2.986 0 005 22zm6-4.828V10.1l4.02-4.02a1 1 0 011.415 0L18.556 8.2a1 1 0 010 1.414L11 17.172zM16 15l-5 5h8a1 1 0 001-1v-3a1 1 0 00-1-1h-3zM6 5a1 1 0 000 2h1a1 1 0 000-2H6zM5 9a1 1 0 011-1h1a1 1 0 110 2H6a1 1 0 01-1-1zm1 2a1 1 0 100 2h1a1 1 0 100-2H6z"/> </svg></span></h2> <div></div> <h5>Explore 100+ Colors</h5> </section> </a> <a href="tutorials/" class="color-tutorials"> <section> <h2>Tutorials <span class="gray"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2a3 3 0 00-3 3v12a3 3 0 003 3h3.17A3.001 3.001 0 0011 22h8a3 3 0 003-3V7a3 3 0 00-3-3h-3.17A3.001 3.001 0 0013 2H5zm9 15a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1h8a1 1 0 011 1v12zm6 2a1 1 0 01-1 1h-6a3 3 0 003-3V6h3a1 1 0 011 1v12zM6 5a1 1 0 100 2 1 1 0 000-2zm2 1a1 1 0 011-1h3a1 1 0 110 2H9a1 1 0 01-1-1zM6 8a1 1 0 100 2 1 1 0 000-2zm2 1a1 1 0 011-1h3a1 1 0 110 2H9a1 1 0 01-1-1zm1 2a1 1 0 100 2h3a1 1 0 100-2H9z"/> </svg></span></h2> <div></div> <h5>HTML, CSS and SCSS</h5> </section> </a> <a href="resources/" class="color-resources"> <section> <h2>Resources <span class="gray"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 2a3 3 0 00-3 3v14a3 3 0 003 3h14a3 3 0 003-3V5a3 3 0 00-3-3H5zM4 5a1 1 0 011-1h14a1 1 0 011 1v3H4V5zm0 14v-9h16v9a1 1 0 01-1 1H5a1 1 0 01-1-1zM6 5a1 1 0 100 2 1 1 0 000-2zm3 0a1 1 0 100 2 1 1 0 000-2zm2 1a1 1 0 112 0 1 1 0 01-2 0zm-5 5a1 1 0 100 2h12a1 1 0 100-2H6zm-1 4a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"/> </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 footer-topline"> <li class="color-codes"> <a href="./" property="url"> <div class="logo"> <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="footer-breadcrumbs"> <a href="./" class="breadcrumbs__link">HTML Color Codes</a> </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="https://htmlcolorcodes.com/">English</a> </h4> </li> <li> <h4> <a href="https://htmlcolorcodes.com/es/">Español</a> </h4> </li> <li> <h4> <a href="https://htmlcolorcodes.com/fr/">Français</a> </h4> </li> <li> <h4> <a href="https://htmlcolorcodes.com/zh/">中国</a> </h4> </li> </ul> </li> </ul> </nav> <aside class="social hide-md"> <a href="https://twitter.com/share?url=https://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful" id="Twitter" class="gray popup" target="_blank"> <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 href="https://www.facebook.com/sharer/sharer.php?u=https://htmlcolorcodes.com/" id="Facebook" class="gray popup" target="_blank"> <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 href="https://plus.google.com/share?url=https://htmlcolorcodes.com/" id="Google+" class="gray popup" target="_blank"> <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 href="https://pinterest.com/pin/create/button/?url=https://htmlcolorcodes.com/&media=https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.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. " id="Pinterest" class="gray popup" target="_blank"> <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 href="https://www.reddit.com/submit?url=https://htmlcolorcodes.com/&title=HTML%20Color%20Codes" id="Reddit" class="gray popup" target="_blank"> <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="row footer-header"> <aside class="social show-md"> <a href="https://twitter.com/share?url=https://htmlcolorcodes.com/&text=HTML%20Color%20Codes%20—%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful" id="Twitter" class="gray popup" target="_blank"> <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 href="https://www.facebook.com/sharer/sharer.php?u=https://htmlcolorcodes.com/" id="Facebook" class="gray popup" target="_blank"> <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 href="https://plus.google.com/share?url=https://htmlcolorcodes.com/" id="Google+" class="gray popup" target="_blank"> <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 href="https://pinterest.com/pin/create/button/?url=https://htmlcolorcodes.com/&media=https://htmlcolorcodes.com/assets/images/html-color-codes-picker-charts-names-tutorials-resources.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. " id="Pinterest" class="gray popup" target="_blank"> <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 href="https://www.reddit.com/submit?url=https://htmlcolorcodes.com/&title=HTML%20Color%20Codes" id="Reddit" class="gray popup" target="_blank"> <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="https://dixonandmoe.com">Dixon & Moe</a></h2> <h4>© 2015 – 2024 <span style="margin-left:8px;"> <a href="/privacy-policy/">Privacy Policy</a> </span> <span style="margin-left: 8px"> <button id="pmLink">Privacy Manager</button> </span> </h4> </div> <div class="contact"> <h5>Contact</h5> <h4><a href="mailto:alex@htmlcolorcodes.com">Email</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="https://codepen.io/htmlcolorcodes/">CodePen</a></h4> </div> </div> <div class="row footer-section"> <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:alex@htmlcolorcodes.com">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://loremipsum.io">Lorem Ipsum</a></h4> <h4><a href="https://wordcounter.io">Word Counter</a></h4> <h4><a href="https://glyphy.io/">Glyphy</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/bebraw/colorjoe">ColorJoe.js</a></h4> <h4><a href="https://github.com/skratchdot/color-harmony">ColorHarmony.js</a></h4> </div> </div> </footer> <script src="/assets/javascripts/application-00a7bd28.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-0TQX8EDTM8"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-0TQX8EDTM8'); </script> </body> </html>

CINXE.COM

HTML Color Codes