{"id":361293,"date":"2021-11-01T19:00:00","date_gmt":"2021-11-01T16:00:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-a-hex-code-for-colors\/"},"modified":"2021-11-01T19:00:00","modified_gmt":"2021-11-01T16:00:00","slug":"what-is-a-hex-code-for-colors","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-a-hex-code-for-colors\/","title":{"rendered":"#What Is a Hex Code for Colors?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a26704ebae23\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a26704ebae23\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-hex-code-for-colors\/#Red_Green_Blue\" >Red, Green, Blue<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-hex-code-for-colors\/#Number_and_Letters\" >Number and Letters<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-hex-code-for-colors\/#What_Are_Hex_Codes_For\" >What Are Hex Codes For?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-hex-code-for-colors\/#How_to_Find_the_Hex_Code_for_a_Color\" >How to Find the Hex Code for a Color<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Is a Hex Code for Colors?&#8221;<\/strong><\/p>\n<div>\n<!-- UNCACHED CONTENT --><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone size-full wp-image-761371\" srcset=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/hex-code-hero.png?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/hex-code-hero.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/hex-code-hero.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Hex code.\" width=\"1200\" height=\"675\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>In the digital world, colors are not only represented by their, well, <em>color<\/em>, but also six-digit codes. These \u201chex codes\u201d or \u201chexadecimal colors\u201d play a very important role in design. We\u2019ll explain how it all works.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Red_Green_Blue\"><\/span>Red, Green, Blue<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A hex code is made up of six digits\u2014usually preceded by the pound (#) symbol. For example, here is the hex code for pure black: #000000. The numbers in this code correspond to the amount of red, green, and blue in the color.<\/p>\n<p>The first two digits tell us how much red is in the color, the next two digits are for green, and the last two are for blue. Black is the absence of color, which is why it\u2019s \u201c000000.\u201d There\u2019s no red, green, or blue present.<\/p>\n<p>The amount of red, green, or blue can be in the range of 0-255. But wait, if each color only has two digits, and the scale goes all the way up to 255, how does that work? That does indeed present a problem. You might think pure red would be #2550000, but that\u2019s more than six digits. Buckle up.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Number_and_Letters\"><\/span>Number <em>and<\/em> Letters<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-761553\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/hex-colors.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"hex color codes\" width=\"650\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Hex color codes do not contain only numbers. The actual code for pure red is #ff0000. So how do those letters translate to colors? It\u2019s a little complicated.<\/p>\n<p>The hexadecimal system is based on the number 16. Once you figure out how much of a color you need\u2014on that 0-255 scale\u2014you divide that by 16. The number you get at the top of the equation is the first digit, then the remainder is the second digit.<\/p>\n<p>Now, if those two numbers are single digits, you just plug them into their spots in the hex code. However, if you end up with a double-digit number, it needs to be converted into a letter. For that, there\u2019s a simple conversation to make:<\/p>\n<ul>\n<li>10 becomes A<\/li>\n<li>11 becomes B<\/li>\n<li>12 becomes C<\/li>\n<li>13 becomes D<\/li>\n<li>14 becomes E<\/li>\n<li>15 becomes F<\/li>\n<\/ul>\n<p>To go back to pure red\u2014which is #ff0000\u2014we can now see that it was #<strong>1515<\/strong>0000 before being converted to letters. A more complex color\u2014such as this shade of purple (#5f1e85)\u2014has more going on, but you know that any letter is simply a number greater than 9.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Are_Hex_Codes_For\"><\/span>What Are Hex Codes For?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We now know what a hex code <em>is<\/em>, but what does it <em>do<\/em>? A hex color code tells the display what color to show. The display reads all the information about how to make that color from the code\u2014and it does exactly that\u2014it makes the color.<\/p>\n<p>The combination of red, green, and blue can make virtually any color the eye can see. You can think of a hex code like a cooking recipe. It tells the TV, camera, computer monitor, phone display, or projector how much of each color it needs. Then it mixes them together to create the desired final color.<\/p>\n<p>That\u2019s all there is to hex color codes. They may look like a foreign language, but there\u2019s a very specific formula that explains the meaning behind each digit. Now you know a little more about those codes you see in Photoshop and Illustrator.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>What&#8217;s the Difference between Illustrator and Photoshop?<\/em><\/strong><\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_to_Find_the_Hex_Code_for_a_Color\"><\/span>How to Find the Hex Code for a Color<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You know how a hex code is made and how they\u2019re used, but how can you find the hex code for a color? Thankfully, there are a bunch of free online tools to find the hex codes for any color in an image.<\/p>\n<p>If you\u2019re looking for a good one, we recommend a website called <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/image-color.com\/\">image-color.com<\/a>. You can upload an image from your device or a URL and use the eye-dropper tool to select a color from it. Click \u201cBrowse\u201d to upload your own or paste a URL in the text box and click \u201cUpload.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-761697\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/2021-10-14_17-14-40.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Upload an image to scan.\" width=\"650\" height=\"223\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Once the image is uploaded, you can click or tap anywhere to select a color from the image. The color will be displayed at the top along with the hex code in the \u201cHEX\u201d box.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-761696\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/2021-10-14_17-16-20.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Select a color to see the hex code.\" width=\"649\" height=\"417\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Now you can take that hex code and use it in Photoshop, Illustrator, or wherever you need it.\u00a0That\u2019s all there is to hex color codes. They may look like a foreign language, but there\u2019s a very specific formula that explains the meaning behind each digit. Now you know.<\/p>\n<\/div>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.howtogeek.com\/761277\/what-is-a-hex-code-for-colors\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Is a Hex Code for Colors?&#8221; In the digital world, colors are not only represented by their, well, color, but also six-digit codes. These \u201chex codes\u201d or \u201chexadecimal colors\u201d play a very important role in design. We\u2019ll explain how it all works. Red, Green, Blue A hex code is made up of six digits\u2014usually&#8230;<\/p>\n","protected":false},"author":1,"featured_media":361294,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/10\/hex-code-hero.png?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-361293","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/361293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=361293"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/361293\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/361294"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=361293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=361293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=361293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}