{"id":18787,"date":"2025-05-13T12:06:33","date_gmt":"2025-05-13T12:06:33","guid":{"rendered":"https:\/\/www.andacademy.com\/resources\/?p=18787"},"modified":"2026-04-28T09:14:53","modified_gmt":"2026-04-28T09:14:53","slug":"hex-color-codes-guide","status":"publish","type":"post","link":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/","title":{"rendered":"Hex Codes for Colors: A Complete Guide for Designers (with Chart and free tool)"},"content":{"rendered":"\r\n<p>A hex color code is a systematic way of representing colors in a format that computers can read, understand, and display. It is typically used in website design, graphic design, and other related fields. With over 16 million possible color combinations, it offers designers a versatile tool for creating precise color choices.<\/p>\r\n\r\n\r\n\r\n<p>Hex color codes allow designers to define exact colors for website elements, graphics, and user interfaces. Even free website builders rely on these codes. The precision these codes bring becomes fundamental to maintaining brand identity, creating visually desirable designs, and improving user experience. Learn everything that you need to know about hex color codes in this comprehensive guide and discover how to use them in your designs.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Here\u2019s what we\u2019ll cover!<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li><a href=\"#What\">What is a hex color code?<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#History\">History of hex codes<\/a><\/li>\r\n\r\n\r\n<li><a href=\"#Hex-Code-Finder\">Free Hex Color Picker &#038; Code Generator (Hex \/ RGB \/ HSL)<\/a><\/li>\r\n\r\n\r\n<li><a href=\"#is\">What is the difference between hex codes and RGB?<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#How\">How do hex color codes work?<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#Benefits\">Benefits of using hex color codes in graphic design<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#to\">How to read hex color codes?<\/a><\/li>\r\n\r\n\r\n\r\n<li><a href=\"#use\">How to use hex colors effectively?<\/a><\/li>\r\n\r\n\r\n<li><a href=\"#2026\">2026 Hex Color Trends Designers Are Using <\/a><\/li>\r\n\r\n<li><a href=\"#WCAG\">Hex Codes &#038; WCAG Accessibility: Picking Colors That Anyone Can Read <\/a><\/li>\r\n\r\n<li><a href=\"#CSS\">CSS Named Colors: Full Hex Chart <\/a><\/li>\r\n\r\n<li><a href=\"#10\">10 Hex Color Palettes for Common Design Briefs<\/a><\/li>\r\n\r\n<li><a href=\"#Things\">Things to keep in mind when working with hex codes<\/a><\/li>\r\n\r\n<li><a href=\"#Frequently\">Frequently Asked Questions<\/a><\/li>\r\n\r\n\r\n<li><a href=\"#Conclusion\">Conclusion<\/a><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"What\">What is a hex color code?<\/h2>\r\n\r\n\r\n\r\n<p>A hex color code is typically a six-digit code that combines numbers and letters and begins with a hash symbol (#), where each pair of digits represents the intensity of red, green, and blue. The term &#8220;hex&#8221; in hex code comes from &#8220;hexadecimal,&#8221; a numbering system that uses 16 symbols: 0-9 and A-F.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Hex colors are derived from the <a href=\"http:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/what-is-rgb\/\" target=\"_blank\" rel=\"noopener\">RGB color<\/a> model, which blends varying intensities of red, green, and blue to produce a wide range of colors. To create a hex code, the RGB (which stands for red, green, and blue) color values are converted into this number system. For example, the RGB color (224, 105, 16) becomes the hex code E06910.<\/p>\r\n\r\n\r\n\r\n<p>Hex color codes offer a standardized method for representing colors across different platforms and devices. They use hexadecimal values to represent primary colors from the color wheel. Hex codes are universal and can be easily interpreted by designers and developers, ensuring consistent color representation in designs.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"History\">History of hex codes<\/h2>\r\n\r\n\r\n\r\n<p>The hex color code system originated during the early development of computer graphics. As computers transitioned from basic black-and-white screens to more advanced color displays, there was a growing need to standardize and define colors. The <a href=\"https:\/\/en.wikipedia.org\/wiki\/Hexadecimal\" target=\"_blank\" rel=\"noopener\">hexadecimal system<\/a>, which was already used in computing for tasks like memory addressing, emerged as an effective solution. Its compactness and efficiency made it ideal for the purpose. The system was eventually adopted in HTML and CSS, making it a core element of web design and paving the way for the rich and color-filled user experiences we see today.<\/p>\r\n\r\n\r\n\r\n<p>This shift to hex codes also allowed for greater consistency across various digital platforms, ensuring that colors appeared the same regardless of the device or software used. As a result, it allowed designers to lay the foundation for more dynamic and visually appealing websites.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"Hex-Code-Finder\">Free Hex Color Picker &#038; Code Generator (Hex \/ RGB \/ HSL)<\/h2>\r\n\r\n\r\n<p>There are various ways you can find a Hex Color Code. While you can manually calculate the codes, the most convenient way is to use a tool. <\/p>\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/inner_4a-2.webp\" alt=\"Picture of hex color codes.\r\n\" class=\"wp-image-18792\" title=\"Picture of hex color codes.\r\n\"\/><\/figure>\r\n\r\n\r\n<p>To easily generate and find Hex Codes, explore our interactive Hex color code finder. You can choose from a wide variety of colors available or use our color finder to pick your own. This tool will provide you with the option to copy the exact color code for your chosen color, along with the RGB and HSL codes.<\/p>\r\n\r\n<p style=\"padding-bottom:0px;\"><strong>Interactive Hex Color Code Generator: <\/strong><p>\r\n\r\n\n    <div id=\"and-hex-tool-wrapper\">\n        <style>\n  #and-hex-tool-wrapper {\n    \/* Use 'vw' for the width to ensure it perfectly matches the viewport *\/\n    width: 100vw !important;\n    max-width: 780px !important;\n    margin: 0 auto !important;\n    padding: 0 !important;\n    overflow-x: hidden !important;\n    \/* Prevents the horizontal 'jiggle' on iOS *\/\n    box-sizing: border-box !important;\n  }\n\n  #and-hex-tool-wrapper .hx {\n    width: 100% !important;\n    max-width: 100% !important;\n    box-sizing: border-box !important;\n  }\n\n  #and-hex-tool-wrapper .hx-spec-wrap,\n  #and-hex-tool-wrapper .hx-pick-result,\n  #and-hex-tool-wrapper .hx-area,\n  #and-hex-tool-wrapper .hx-grid {\n    width: 100% !important;\n    min-width: 0 !important;\n    max-width: 100% !important;\n  }\n\n  #and-hex-tool-wrapper .hx-fils {\n    display: flex !important;\n    flex-wrap: wrap !important;\n    \/* This makes buttons drop to a new line *\/\n    gap: 0 !important;\n    \/* Controls spacing between wrapped rows *\/\n    width: 100% !important;\n    max-width: 100% !important;\n    border-bottom: 1px solid #E5E5E5;\n    background: #fff;\n    overflow-x: visible !important;\n    \/* Disable the horizontal scroll *\/\n  }\n\n  #and-hex-tool-wrapper .hx-fil {\n    flex: 1 1 auto !important;\n    \/* Allows buttons to grow\/shrink to fill the row *\/\n    min-width: 80px;\n    \/* Prevents them from getting TOO small *\/\n    justify-content: center;\n    \/* Centers text if they grow *\/\n    padding: 12px 8px !important;\n    border-right: 1px solid #E5E5E5;\n    border-bottom: 1px solid #E5E5E5;\n    \/* Adds border between wrapped rows *\/\n    white-space: normal !important;\n    \/* Allows text to wrap inside the button if needed *\/\n    text-align: center;\n    font-family: 'Antarctica-CondensedRegular';\n  }\n\n  #and-hex-tool-wrapper #specBox,\n  #and-hex-tool-wrapper #hueBox {\n    touch-action: none !important;\n    \/* Stops the page-scroll conflict on iOS *\/\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0\n  }\n\n  .hx {\n    font-family: 'Antarctica';\n    background: #fff;\n    color: #000;\n    -webkit-font-smoothing: antialiased;\n    border: 1.5px solid #000;\n    position: relative\n  }\n\n  \/* \u2500\u2500 TOP \u2500\u2500 *\/\n  .hx-top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 14px 20px;\n    border-bottom: 1.5px solid #000\n  }\n\n  .hx-top-left {\n    display: flex;\n    align-items: baseline;\n    gap: 10px\n  }\n\n  .hx-top-t {\n    font-family: 'Antarctica-CondensedLight';\n  }\n\n  .hx-top-b {\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 9px;\n    font-weight: 600;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: #58338E;\n    border: 1px solid #58338E;\n    padding: 2px 8px\n  }\n\n  .hx-top-cnt {\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 11px;\n    color: #999\n  }\n\n  \/* \u2500\u2500 TABS: Named \/ Pick Any \u2500\u2500 *\/\n  .hx-tabs {\n    display: flex;\n    border-bottom: 1.5px solid #000\n  }\n\n  .hx-tab {\n    flex: 1;\n    padding: 11px 16px;\n    text-align: center;\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 13px;\n    font-weight: 700;\n    color: #999;\n    background: #fff;\n    border: none;\n    cursor: pointer;\n    transition: all .12s;\n  }\n\n  .hx-tab+.hx-tab {\n    border-left: 1.5px solid #000\n  }\n\n  .hx-tab:hover {\n    color: #000;\n    background: #F7F6F4\n  }\n\n  .hx-tab.on {\n    color: #fff;\n    background: #000\n  }\n\n  \/* \u2500\u2500 PANEL: Named Colors \u2500\u2500 *\/\n  .hx-panel {\n    display: none\n  }\n\n  .hx-panel.show {\n    display: block\n  }\n\n  \/* Controls row *\/\n  .hx-ctrl {\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid #E5E5E5\n  }\n\n  .hx-search-box {\n    flex: 1;\n    position: relative;\n    border-right: 1px solid #E5E5E5\n  }\n\n  .hx-search {\n    width: 100%;\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 13px;\n    border: none;\n    padding: 11px 16px 11px 34px;\n    outline: none;\n    background: #fff\n  }\n\n  \/* Target the placeholder across all modern browsers *\/\n  .hx-search::placeholder {\n    font-size: 13px !important;\n    \/* Adjust this value as needed *\/\n    font-family: 'JetBrains Mono', monospace !important;\n    color: #ccc;\n    opacity: 1;\n    \/* Ensures color is solid in Firefox *\/\n  }\n\n  \/* For older WebKit browsers (iOS Safari) *\/\n  .hx-search::-webkit-input-placeholder {\n    font-size: 13px !important;\n    font-family: 'JetBrains Mono', monospace !important;\n  }\n\n  \/* For Mozilla Firefox *\/\n  .hx-search::-moz-placeholder {\n    font-size: 13px !important;\n    font-family: 'JetBrains Mono', monospace !important;\n  }\n\n  .hx-search-ic {\n    position: absolute;\n    left: 14px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 14px;\n    color: #ccc;\n    pointer-events: none\n  }\n\n  .hx-vbtns {\n    display: flex\n  }\n\n  .hx-vb {\n    flex: 1;\n    padding: 11px 16px;\n    text-align: center;\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 13px;\n    font-weight: 700;\n    color: #999;\n    background: #fff;\n    border: none;\n    cursor: pointer;\n    transition: all .12s;\n  }\n\n  .hx-vb:hover {\n    color: #000\n  }\n\n  .hx-vb.on {\n    color: #fff;\n    background: #000\n  }\n\n  .hx-vb+.hx-vb {\n    border-left: 1px solid #E5E5E5\n  }\n\n  \/* Filters *\/\n  .hx-fils {\n    display: flex;\n    gap: 0;\n    overflow-x: auto;\n    scrollbar-width: none;\n    border-bottom: 1px solid #E5E5E5\n  }\n\n  .hx-fils::-webkit-scrollbar {\n    display: none\n  }\n\n  .hx-fil {\n    flex-shrink: 0;\n    padding: 9px 12px;\n    font-size: 11px;\n    font-weight: 700;\n    color: #999;\n    background: #fff;\n    border: none;\n    cursor: pointer;\n    transition: all .1s;\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    border-right: 1px solid #E5E5E5;\n    white-space: nowrap;\n  }\n\n  .hx-fil:hover {\n    color: #000;\n    background: #F7F6F4\n  }\n\n  .hx-fil.on {\n    color: #fff;\n    background: #000\n  }\n\n  .hx-fild {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    flex-shrink: 0\n  }\n\n\n  \/* Detail strip *\/\n  .hx-det {\n    display: none;\n    border-bottom: 1px solid #E5E5E5\n  }\n\n  .hx-det.show {\n    display: flex !important;\n    align-items: stretch\n  }\n\n  .hx-det-sw {\n    width: 72px;\n    flex-shrink: 0\n  }\n\n  .hx-det-body {\n    flex: 1;\n    padding: 12px 16px;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    flex-wrap: wrap;\n    min-width: 0\n  }\n\n  .hx-det-name {\n    font-size: 16px;\n    font-weight: 700;\n    white-space: nowrap\n  }\n\n  .hx-det-grp {\n    font-size: 10px;\n    font-weight: 600;\n    color: #999;\n    padding: 2px 8px;\n    border: 1px solid #E5E5E5\n  }\n\n  .hx-det-codes {\n    display: flex;\n    gap: 5px;\n    flex-wrap: wrap\n  }\n\n  .hx-det-c {\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 11px;\n    font-weight: 600;\n    padding: 5px 12px;\n    background: #F7F6F4;\n    border: 1px solid #E5E5E5;\n    cursor: pointer;\n    transition: all .1s;\n    display: flex;\n    align-items: center;\n    gap: 5px;\n  }\n\n  .hx-det-c:hover {\n    background: #E5E5E5;\n    border-color: #000\n  }\n\n  .hx-det-c:active {\n    background: #000;\n    color: #fff\n  }\n\n  .hx-det-cl {\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: .5px;\n    text-transform: uppercase;\n    color: #999\n  }\n\n  .hx-det-x {\n    margin-left: auto;\n    padding: 12px 16px;\n    font-size: 20px;\n    color: #999;\n    cursor: pointer;\n    border: none;\n    background: none;\n    border-left: 1px solid #E5E5E5;\n    transition: color .1s;\n    line-height: 1;\n    flex-shrink: 0\n  }\n\n  .hx-det-x:hover {\n    color: #000\n  }\n\n\n  \/* Scroll area *\/\n  .hx-area {\n    max-height: 480px;\n    overflow-y: auto;\n    scrollbar-width: thin;\n    scrollbar-color: #ddd #f7f6f4\n  }\n\n  .hx-area::-webkit-scrollbar {\n    width: 8px\n  }\n\n  .hx-area::-webkit-scrollbar-track {\n    background: #f7f6f4\n  }\n\n  .hx-area::-webkit-scrollbar-thumb {\n    background: #ddd\n  }\n\n  \/* Group headers *\/\n  .hx-gh {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 9px 20px;\n    background: #F7F6F4;\n    border-bottom: 1px solid #E5E5E5;\n    position: sticky;\n    top: 0;\n    z-index: 4;\n    font-family: 'Antarctica-CondensedLight';\n  }\n\n  .hx-ghd {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n  }\n\n  .hx-ghn {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: .5px;\n    text-transform: uppercase;\n    font-family: 'Antarctica-CondensedLight';\n  }\n\n  .hx-ghc {\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 10px;\n    color: #999\n  }\n\n  \/* Grid *\/\n  .hx-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));\n    gap: 0\n  }\n\n  .hx-card {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid #E5E5E5;\n    border-bottom: 1px solid #E5E5E5;\n    transition: transform .12s\n  }\n\n  .hx-card:hover {\n    transform: scale(1.05);\n    z-index: 3;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, .15)\n  }\n\n  .hx-card.sel {\n    outline: 2.5px solid #E13111;\n    outline-offset: -2.5px;\n    z-index: 5\n  }\n\n  .hx-card-color {\n    height: 56px\n  }\n\n  .hx-card-info {\n    padding: 6px 8px;\n    background: #fff\n  }\n\n  .hx-card-hex {\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 10px;\n    font-weight: 600;\n    color: #000\n  }\n\n  .hx-card-name {\n    font-size: 9px;\n    color: #999;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-top: 1px;\n    font-family: 'Antarctica-CondensedMedium';\n  }\n\n  \/* List *\/\n  .hx-list {\n    display: flex;\n    flex-direction: column\n  }\n\n  .hx-lr {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 7px 20px;\n    border-bottom: 1px solid #E5E5E5;\n    cursor: pointer;\n    transition: background .1s\n  }\n\n  .hx-lr:hover {\n    background: #F7F6F4\n  }\n\n  .hx-lr.sel {\n    background: #E1311108\n  }\n\n  .hx-lsw {\n    width: 28px;\n    height: 28px;\n    flex-shrink: 0;\n    border: 1px solid #E5E5E5\n  }\n\n  .hx-ln {\n    font-size: 13px;\n    font-weight: 600;\n    flex: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .hx-lh {\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 12px;\n    font-weight: 600;\n    color: #3D3D3D;\n    width: 72px;\n    flex-shrink: 0;\n  }\n\n  .hx-lrgb {\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 11px;\n    color: #999;\n    width: 110px;\n    flex-shrink: 0\n  }\n\n\n\n  \/* \u2550\u2550\u2550\u2550 PANEL: COLOR PICKER \u2550\u2550\u2550\u2550 *\/\n  .hx-picker {\n    padding: 20px;\n    display: flex;\n    gap: 20px;\n    flex-wrap: wrap;\n  }\n\n\n\n  \/* Spectrum canvas *\/\n  .hx-spec-wrap {\n    flex: 1;\n    min-width: 240px;\n    display: flex;\n    flex-direction: column;\n    gap: 10px\n  }\n\n  .hx-spec {\n    position: relative;\n    width: 100%;\n    height: 220px;\n    cursor: crosshair;\n    border: 1px solid #E5E5E5\n  }\n\n  .hx-spec canvas {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .hx-spec-cursor {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    border: 2px solid #fff;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);\n    pointer-events: none;\n    transform: translate(-50%, -50%);\n    z-index: 2;\n  }\n\n  .hx-hue-bar {\n    position: relative;\n    width: 100%;\n    height: 20px;\n    cursor: pointer;\n    border: 1px solid #E5E5E5;\n  }\n\n  .hx-hue-bar canvas {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .hx-hue-marker {\n    position: absolute;\n    top: -2px;\n    bottom: -2px;\n    width: 6px;\n    background: #fff;\n    border: 1px solid rgba(0, 0, 0, .4);\n    pointer-events: none;\n    transform: translateX(-50%);\n    z-index: 2\n  }\n\n  \/* Result side *\/\n  .hx-pick-result {\n    width: 220px;\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n\n  .hx-pick-swatch {\n    height: 80px;\n    border: 1px solid #E5E5E5;\n    position: relative;\n  }\n\n  .hx-pick-swatch-text {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 14px;\n    font-weight: 700;\n    text-shadow: 0 1px 2px rgba(0, 0, 0, .15);\n  }\n\n  .hx-pick-name {\n    font-size: 14px;\n    font-weight: 700;\n    text-align: center;\n    min-height: 20px;\n    font-family: 'Antarctica-CondensedLight';\n  }\n\n  .hx-pick-nearest {\n    font-size: 11px;\n    text-align: center;\n    font-family: 'Antarctica-CondensedLight';\n  }\n\n  .hx-pick-field {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n  }\n\n  .hx-pick-label {\n    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    font-family: 'Antarctica-CondensedLight';\n  }\n\n  .hx-pick-input {\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 14px;\n    font-weight: 700;\n    border: 1.5px solid #E5E5E5;\n    padding: 8px 12px;\n    outline: none;\n    background: #fff;\n    text-transform: uppercase;\n    transition: border-color .15s;\n    width: 100%;\n  }\n\n  .hx-pick-input:focus {\n    border-color: #000\n  }\n\n  .hx-pick-vals {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 8px\n  }\n\n  .hx-pick-val {\n    background: #F7F6F4;\n    padding: 8px 10px;\n    cursor: pointer;\n    transition: background .1s\n  }\n\n  .hx-pick-val:hover {\n    background: #E5E5E5\n  }\n\n  .hx-pick-val-lab {\n    font-size: 8px;\n    font-weight: 700;\n    letter-spacing: .5px;\n    text-transform: uppercase;\n    font-family: 'Antarctica-CondensedLight';\n    margin-bottom: 2px\n  }\n\n  .hx-pick-val-v {\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 12px;\n    font-weight: 600\n  }\n\n\n  .hx-pick-copy {\n    width: 100%;\n    padding: 11px;\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: .5px;\n    text-transform: uppercase;\n    border: 1.5px solid #000;\n    background: #000;\n    color: #fff;\n    cursor: pointer;\n    transition: all .15s;\n  }\n\n  .hx-pick-copy:hover {\n    background: #3D3D3D\n  }\n\n  .hx-pick-copy.done {\n    background: #E13111;\n    border-color: #E13111\n  }\n\n\n  \/* \u2500\u2500 Footer \u2500\u2500 *\/\n  .hx-foot {\n    padding: 10px 20px;\n    border-top: 1.5px solid #000;\n    background: #F7F6F4;\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-family: 'Antarctica-CondensedLight';\n  }\n\n  .hx-foot strong {\n    font-family: 'Antarctica-CondensedLight';\n    color: #000\n  }\n\n\n  \/* Toast *\/\n  .hx-toast {\n    position: absolute;\n    bottom: 52px;\n    left: 50%;\n    transform: translateX(-50%) translateY(20px);\n    font-family: 'Antarctica-CondensedLight';\n    font-size: 12px;\n    font-weight: 600;\n    background: #000;\n    color: #fff;\n    padding: 8px 20px;\n    z-index: 50;\n    pointer-events: none;\n    transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .2s;\n    opacity: 0;\n    white-space: nowrap\n  }\n\n  .hx-toast.show {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1\n  }\n\n\n  .hx-empty {\n    padding: 40px 20px;\n    text-align: center;\n    color: #999;\n    font-size: 14px\n  }\n\n  noscript {\n    display: block;\n    padding: 24px;\n    text-align: center;\n    color: #777;\n    font-size: 13px\n  }\n\n\n  \/* 4. MOBILE-SPECIFIC STACKING (iPhone 16 Pro & others) *\/\n  @media (max-width: 767px) {\n    #and-hex-tool-wrapper {\n      width: 92vw !important;\n      max-width: 100% !important;\n      margin: 0 auto !important;\n      padding: 0 !important;\n      overflow-x: hidden !important;\n      \/* Prevents the horizontal 'jiggle' on iOS *\/\n      box-sizing: border-box !important;\n    }\n\n    #and-hex-tool-wrapper .hx-picker {\n      flex-direction: column !important;\n      padding: 10px !important;\n    }\n\n    #and-hex-tool-wrapper .hx-grid {\n      \/* Forces the color blocks to fill the screen width *\/\n      grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;\n    }\n\n    \/* Prevent the color picker canvas from overflowing *\/\n    #and-hex-tool-wrapper .hx-spec {\n      height: 180px !important;\n      \/* Slightly smaller for mobile UX *\/\n    }\n\n    \/* Fix for the Search Box pushing width *\/\n    #and-hex-tool-wrapper .hx-search-box {\n      border-right: none !important;\n    }\n\n    #and-hex-tool-wrapper .hx-grid {\n      \/* Ensure 4 items per row on modern large iPhones *\/\n      grid-template-columns: repeat(auto-fill, minmax(24%, 1fr)) !important;\n    }\n\n    #and-hex-tool-wrapper .hx-tab {\n      padding: 15px 5px !important;\n      \/* Larger touch targets *\/\n    }\n\n    .hx-foot {\n      padding: 10px 6px;\n      gap: 20px;\n    }\n\n    .hx-lrgb {\n      display: none\n    }\n\n    .hx-picker {\n      flex-direction: column;\n    }\n\n    .hx-pick-result {\n      width: 100%;\n    }\n  }\n<\/style>\n\n\n\n\n<section aria-label=\"Interactive hex color codes reference\" class=\"hx\" style=\"min-height:200px\">\n  <noscript>Enable JavaScript to use the interactive hex color reference.<\/noscript>\n\n\n  <div class=\"hx-top\">\n    <div class=\"hx-top-left\"><span class=\"hx-top-t\">Hex Color Codes<\/span><span class=\"hx-top-b\">Interactive<\/span>\n    <\/div>\n    <span class=\"hx-top-cnt\" id=\"hxCnt\"><\/span>\n  <\/div>\n\n\n  <div class=\"hx-tabs\">\n    <button class=\"hx-tab on\" id=\"tabNamed\" data-tab=\"named\">Named Colors (148)<\/button>\n    <button class=\"hx-tab\" id=\"tabPicker\" data-tab=\"picker\">Pick Any Color<\/button>\n  <\/div>\n\n\n  <!-- \u2550\u2550\u2550 NAMED COLORS \u2550\u2550\u2550 -->\n  <div class=\"hx-panel show\" id=\"panelNamed\">\n    <div class=\"hx-ctrl\">\n      <div class=\"hx-search-box\"><span class=\"hx-search-ic\">\u2315<\/span><input class=\"hx-search\" id=\"hxQ\" type=\"text\"\n          placeholder=\"Search name or hex...\"><\/div>\n      <div class=\"hx-vbtns\"><button class=\"hx-vb on\" data-v=\"grid\">Grid<\/button><button class=\"hx-vb\"\n          data-v=\"list\">List<\/button><\/div>\n    <\/div>\n    <div class=\"hx-fils\" id=\"hxFils\"><\/div>\n    <div class=\"hx-det\" id=\"hxDet\"><\/div>\n    <div class=\"hx-area\" id=\"hxArea\"><\/div>\n  <\/div>\n\n\n  <!-- \u2550\u2550\u2550 COLOR PICKER \u2550\u2550\u2550 -->\n  <div class=\"hx-panel\" id=\"panelPicker\">\n    <div class=\"hx-picker\">\n      <div class=\"hx-spec-wrap\">\n        <div class=\"hx-spec\" id=\"specBox\">\n          <canvas id=\"specCanvas\"><\/canvas>\n          <div class=\"hx-spec-cursor\" id=\"specCursor\"><\/div>\n        <\/div>\n        <div class=\"hx-hue-bar\" id=\"hueBox\">\n          <canvas id=\"hueCanvas\"><\/canvas>\n          <div class=\"hx-hue-marker\" id=\"hueMarker\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"hx-pick-result\">\n        <div class=\"hx-pick-swatch\" id=\"pickSwatch\">\n          <div class=\"hx-pick-swatch-text\" id=\"pickSwText\"><\/div>\n        <\/div>\n        <div class=\"hx-pick-name\" id=\"pickName\"><\/div>\n        <div class=\"hx-pick-nearest\" id=\"pickNearest\"><\/div>\n        <div class=\"hx-pick-field\">\n          <span class=\"hx-pick-label\">Hex Code<\/span>\n          <input class=\"hx-pick-input\" id=\"pickHex\" type=\"text\" maxlength=\"7\" value=\"#E13111\">\n        <\/div>\n        <div class=\"hx-pick-vals\">\n          <div class=\"hx-pick-val\" id=\"pvR\">\n            <div class=\"hx-pick-val-lab\">RGB<\/div>\n            <div class=\"hx-pick-val-v\" id=\"pvRv\"><\/div>\n          <\/div>\n          <div class=\"hx-pick-val\" id=\"pvH\">\n            <div class=\"hx-pick-val-lab\">HSL<\/div>\n            <div class=\"hx-pick-val-v\" id=\"pvHv\"><\/div>\n          <\/div>\n        <\/div>\n        <button class=\"hx-pick-copy\" id=\"pickCopy\">Copy Hex Code<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n\n  <div class=\"hx-foot\" id=\"hxFoot\"><\/div>\n  <div class=\"hx-toast\" id=\"hxToast\"><\/div>\n<\/section>\n\n\n<script>\n  (function () {\n    'use strict';\n\n\n    \/\/ \u2550\u2550\u2550\u2550 ALL CSS NAMED COLORS + AND BRAND \u2550\u2550\u2550\u2550\n    var C = [\n      { h: '#FF0000', n: 'Red', g: 'Reds' }, { h: '#DC143C', n: 'Crimson', g: 'Reds' }, { h: '#B22222', n: 'Firebrick', g: 'Reds' },\n      { h: '#8B0000', n: 'Dark Red', g: 'Reds' }, { h: '#800000', n: 'Maroon', g: 'Reds' }, { h: '#CD5C5C', n: 'Indian Red', g: 'Reds' },\n      { h: '#F08080', n: 'Light Coral', g: 'Reds' }, { h: '#FA8072', n: 'Salmon', g: 'Reds' }, { h: '#E9967A', n: 'Dark Salmon', g: 'Reds' },\n      { h: '#FFA07A', n: 'Light Salmon', g: 'Reds' }, { h: '#FF6347', n: 'Tomato', g: 'Reds' }, { h: '#FF4500', n: 'Orange Red', g: 'Reds' },\n      { h: '#E13111', n: 'AND Academy Red', g: 'Reds' },\n      { h: '#FFA500', n: 'Orange', g: 'Oranges' }, { h: '#FF8C00', n: 'Dark Orange', g: 'Oranges' }, { h: '#FF7F50', n: 'Coral', g: 'Oranges' },\n      { h: '#D2691E', n: 'Chocolate', g: 'Oranges' }, { h: '#F4A460', n: 'Sandy Brown', g: 'Oranges' }, { h: '#ED9121', n: 'Carrot', g: 'Oranges' },\n      { h: '#CC7722', n: 'Ochre', g: 'Oranges' }, { h: '#FF9966', n: 'Atomic Tangerine', g: 'Oranges' }, { h: '#FFDAB9', n: 'Peach Puff', g: 'Oranges' },\n      { h: '#FFFF00', n: 'Yellow', g: 'Yellows' }, { h: '#FFD700', n: 'Gold', g: 'Yellows' }, { h: '#FFC300', n: 'Saffron', g: 'Yellows' },\n      { h: '#FFDB58', n: 'Mustard', g: 'Yellows' }, { h: '#F0E68C', n: 'Khaki', g: 'Yellows' }, { h: '#BDB76B', n: 'Dark Khaki', g: 'Yellows' },\n      { h: '#DAA520', n: 'Goldenrod', g: 'Yellows' }, { h: '#B8860B', n: 'Dark Goldenrod', g: 'Yellows' }, { h: '#FFDEAD', n: 'Navajo White', g: 'Yellows' },\n      { h: '#FFE4B5', n: 'Moccasin', g: 'Yellows' }, { h: '#FAFAD2', n: 'Light Goldenrod', g: 'Yellows' }, { h: '#EEE8AA', n: 'Pale Goldenrod', g: 'Yellows' },\n      { h: '#FFE4C4', n: 'Bisque', g: 'Yellows' }, { h: '#FFF8DC', n: 'Cornsilk', g: 'Yellows' },\n      { h: '#008000', n: 'Green', g: 'Greens' }, { h: '#00FF00', n: 'Lime', g: 'Greens' }, { h: '#32CD32', n: 'Lime Green', g: 'Greens' },\n      { h: '#228B22', n: 'Forest Green', g: 'Greens' }, { h: '#006400', n: 'Dark Green', g: 'Greens' }, { h: '#90EE90', n: 'Light Green', g: 'Greens' },\n      { h: '#98FB98', n: 'Pale Green', g: 'Greens' }, { h: '#3CB371', n: 'Medium Sea Green', g: 'Greens' }, { h: '#2E8B57', n: 'Sea Green', g: 'Greens' },\n      { h: '#00FA9A', n: 'Medium Spring Green', g: 'Greens' }, { h: '#00FF7F', n: 'Spring Green', g: 'Greens' }, { h: '#6B8E23', n: 'Olive Drab', g: 'Greens' },\n      { h: '#808000', n: 'Olive', g: 'Greens' }, { h: '#556B2F', n: 'Dark Olive Green', g: 'Greens' }, { h: '#66CDAA', n: 'Medium Aquamarine', g: 'Greens' },\n      { h: '#8FBC8F', n: 'Dark Sea Green', g: 'Greens' }, { h: '#ADFF2F', n: 'Green Yellow', g: 'Greens' }, { h: '#7CFC00', n: 'Lawn Green', g: 'Greens' },\n      { h: '#7FFF00', n: 'Chartreuse', g: 'Greens' }, { h: '#0D9373', n: 'AND Teal', g: 'Greens' },\n      { h: '#00FFFF', n: 'Cyan \/ Aqua', g: 'Cyans' }, { h: '#00CED1', n: 'Dark Turquoise', g: 'Cyans' }, { h: '#40E0D0', n: 'Turquoise', g: 'Cyans' },\n      { h: '#48D1CC', n: 'Medium Turquoise', g: 'Cyans' }, { h: '#7FFFD4', n: 'Aquamarine', g: 'Cyans' }, { h: '#20B2AA', n: 'Light Sea Green', g: 'Cyans' },\n      { h: '#008B8B', n: 'Dark Cyan', g: 'Cyans' }, { h: '#008080', n: 'Teal', g: 'Cyans' }, { h: '#5F9EA0', n: 'Cadet Blue', g: 'Cyans' },\n      { h: '#AFEEEE', n: 'Pale Turquoise', g: 'Cyans' }, { h: '#E0FFFF', n: 'Light Cyan', g: 'Cyans' }, { h: '#B0E0E6', n: 'Powder Blue', g: 'Cyans' },\n      { h: '#0000FF', n: 'Blue', g: 'Blues' }, { h: '#0000CD', n: 'Medium Blue', g: 'Blues' }, { h: '#00008B', n: 'Dark Blue', g: 'Blues' },\n      { h: '#000080', n: 'Navy', g: 'Blues' }, { h: '#191970', n: 'Midnight Blue', g: 'Blues' }, { h: '#4169E1', n: 'Royal Blue', g: 'Blues' },\n      { h: '#4682B4', n: 'Steel Blue', g: 'Blues' }, { h: '#6495ED', n: 'Cornflower Blue', g: 'Blues' }, { h: '#1E90FF', n: 'Dodger Blue', g: 'Blues' },\n      { h: '#00BFFF', n: 'Deep Sky Blue', g: 'Blues' }, { h: '#87CEEB', n: 'Sky Blue', g: 'Blues' }, { h: '#87CEFA', n: 'Light Sky Blue', g: 'Blues' },\n      { h: '#ADD8E6', n: 'Light Blue', g: 'Blues' }, { h: '#B0C4DE', n: 'Light Steel Blue', g: 'Blues' }, { h: '#6A5ACD', n: 'Slate Blue', g: 'Blues' },\n      { h: '#7B68EE', n: 'Medium Slate Blue', g: 'Blues' },\n      { h: '#800080', n: 'Purple', g: 'Purples' }, { h: '#8B008B', n: 'Dark Magenta', g: 'Purples' }, { h: '#9400D3', n: 'Dark Violet', g: 'Purples' },\n      { h: '#9932CC', n: 'Dark Orchid', g: 'Purples' }, { h: '#BA55D3', n: 'Medium Orchid', g: 'Purples' }, { h: '#DA70D6', n: 'Orchid', g: 'Purples' },\n      { h: '#EE82EE', n: 'Violet', g: 'Purples' }, { h: '#DDA0DD', n: 'Plum', g: 'Purples' }, { h: '#D8BFD8', n: 'Thistle', g: 'Purples' },\n      { h: '#E6E6FA', n: 'Lavender', g: 'Purples' }, { h: '#4B0082', n: 'Indigo', g: 'Purples' }, { h: '#8A2BE2', n: 'Blue Violet', g: 'Purples' },\n      { h: '#9370DB', n: 'Medium Purple', g: 'Purples' }, { h: '#663399', n: 'Rebecca Purple', g: 'Purples' },\n      { h: '#58338E', n: 'AND Academy Purple', g: 'Purples' }, { h: '#AC8ADE', n: 'AND Lavender', g: 'Purples' },\n      { h: '#FF1493', n: 'Deep Pink', g: 'Pinks' }, { h: '#FF69B4', n: 'Hot Pink', g: 'Pinks' }, { h: '#FFB6C1', n: 'Light Pink', g: 'Pinks' },\n      { h: '#FFC0CB', n: 'Pink', g: 'Pinks' }, { h: '#DB7093', n: 'Pale Violet Red', g: 'Pinks' }, { h: '#C71585', n: 'Medium Violet Red', g: 'Pinks' },\n      { h: '#FF00FF', n: 'Magenta \/ Fuchsia', g: 'Pinks' }, { h: '#FFE4E1', n: 'Misty Rose', g: 'Pinks' }, { h: '#FFF0F5', n: 'Lavender Blush', g: 'Pinks' },\n      { h: '#A52A2A', n: 'Brown', g: 'Browns' }, { h: '#8B4513', n: 'Saddle Brown', g: 'Browns' }, { h: '#A0522D', n: 'Sienna', g: 'Browns' },\n      { h: '#CD853F', n: 'Peru', g: 'Browns' }, { h: '#DEB887', n: 'Burlywood', g: 'Browns' }, { h: '#D2B48C', n: 'Tan', g: 'Browns' },\n      { h: '#BC8F8F', n: 'Rosy Brown', g: 'Browns' }, { h: '#F5DEB3', n: 'Wheat', g: 'Browns' }, { h: '#4A2C2A', n: 'Dark Brown', g: 'Browns' },\n      { h: '#704214', n: 'Sepia', g: 'Browns' }, { h: '#C19A6B', n: 'Camel', g: 'Browns' },\n      { h: '#FFFFFF', n: 'White', g: 'Whites' }, { h: '#FFFAFA', n: 'Snow', g: 'Whites' }, { h: '#F0FFF0', n: 'Honeydew', g: 'Whites' },\n      { h: '#F5FFFA', n: 'Mint Cream', g: 'Whites' }, { h: '#F0FFFF', n: 'Azure', g: 'Whites' }, { h: '#FAF0E6', n: 'Linen', g: 'Whites' },\n      { h: '#FDF5E6', n: 'Old Lace', g: 'Whites' }, { h: '#FFFFF0', n: 'Ivory', g: 'Whites' }, { h: '#FFFAF0', n: 'Floral White', g: 'Whites' },\n      { h: '#FFF5EE', n: 'Seashell', g: 'Whites' }, { h: '#F5F5F5', n: 'White Smoke', g: 'Whites' }, { h: '#F8F8FF', n: 'Ghost White', g: 'Whites' },\n      { h: '#FAEBD7', n: 'Antique White', g: 'Whites' }, { h: '#FFFDD0', n: 'Cream', g: 'Whites' },\n      { h: '#808080', n: 'Gray', g: 'Grays' }, { h: '#A9A9A9', n: 'Dark Gray', g: 'Grays' }, { h: '#C0C0C0', n: 'Silver', g: 'Grays' },\n      { h: '#D3D3D3', n: 'Light Gray', g: 'Grays' }, { h: '#DCDCDC', n: 'Gainsboro', g: 'Grays' }, { h: '#696969', n: 'Dim Gray', g: 'Grays' },\n      { h: '#778899', n: 'Light Slate Gray', g: 'Grays' }, { h: '#708090', n: 'Slate Gray', g: 'Grays' }, { h: '#2F4F4F', n: 'Dark Slate Gray', g: 'Grays' },\n      { h: '#36454F', n: 'Charcoal', g: 'Grays' },\n      { h: '#000000', n: 'Black', g: 'Blacks' }, { h: '#1A1A1A', n: 'Near Black', g: 'Blacks' }, { h: '#2C2C2C', n: 'Jet', g: 'Blacks' },\n      { h: '#353535', n: 'Onyx', g: 'Blacks' }, { h: '#28282B', n: 'Raisin Black', g: 'Blacks' }, { h: '#0C0C0C', n: 'Rich Black', g: 'Blacks' },\n    ];\n\n\n    var GR = ['Reds', 'Oranges', 'Yellows', 'Greens', 'Cyans', 'Blues', 'Purples', 'Pinks', 'Browns', 'Whites', 'Grays', 'Blacks'];\n    var GC = { Reds: '#E13111', Oranges: '#FF8C00', Yellows: '#FFD700', Greens: '#228B22', Cyans: '#008080', Blues: '#4169E1', Purples: '#663399', Pinks: '#FF69B4', Browns: '#8B4513', Whites: '#E5E5E5', Grays: '#808080', Blacks: '#1A1A1A' };\n\n\n    var S = { fil: 'All', q: '', sel: null, view: 'grid', tab: 'named', pickerHue: 0, pickerSat: 100, pickerVal: 100, pickerHex: '#FF0000' };\n\n\n    \/\/ \u2500\u2500 Helpers \u2500\u2500\n    function h2r(h) { h = h.replace('#', ''); return { r: parseInt(h.substr(0, 2), 16), g: parseInt(h.substr(2, 2), 16), b: parseInt(h.substr(4, 2), 16) } }\n    function r2h(r, g, b) { return '#' + [r, g, b].map(function (c) { return Math.max(0, Math.min(255, Math.round(c))).toString(16).padStart(2, '0') }).join('').toUpperCase() }\n    function h2hsl(h) { var c = h2r(h), r = c.r \/ 255, g = c.g \/ 255, b = c.b \/ 255, mx = Math.max(r, g, b), mn = Math.min(r, g, b), hh, s, l = (mx + mn) \/ 2; if (mx === mn) hh = s = 0; else { var d = mx - mn; s = l > .5 ? d \/ (2 - mx - mn) : d \/ (mx + mn); if (mx === r) hh = ((g - b) \/ d + (g < b ? 6 : 0)) \/ 6; else if (mx === g) hh = ((b - r) \/ d + 2) \/ 6; else hh = ((r - g) \/ d + 4) \/ 6 } return { h: Math.round(hh * 360), s: Math.round(s * 100), l: Math.round(l * 100) } }\n    function lum(h) { var c = h2r(h); return [c.r, c.g, c.b].map(function (x) { x \/= 255; return x <= .03928 ? x \/ 12.92 : Math.pow((x + .055) \/ 1.055, 2.4) }).reduce(function (a, v, i) { return a + [.2126, .7152, .0722][i] * v }, 0) }\n    function tc(h) { return lum(h) > .4 ? '#000' : '#fff' }\n    function validH(h) { return \/^#[0-9A-Fa-f]{6}$\/.test(h) }\n    function hsv2rgb(h, s, v) { h \/= 360; s \/= 100; v \/= 100; var i = Math.floor(h * 6), f = h * 6 - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s); var r, g, b; switch (i % 6) { case 0: r = v; g = t; b = p; break; case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break }return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) } }\n    function rgb2hsv(r, g, b) { r \/= 255; g \/= 255; b \/= 255; var mx = Math.max(r, g, b), mn = Math.min(r, g, b), d = mx - mn, h, s = mx === 0 ? 0 : d \/ mx, v = mx; if (mx === mn) h = 0; else { switch (mx) { case r: h = (g - b) \/ d + (g < b ? 6 : 0); break; case g: h = (b - r) \/ d + 2; break; case b: h = (r - g) \/ d + 4; break }h \/= 6 } return { h: Math.round(h * 360), s: Math.round(s * 100), v: Math.round(v * 100) } }\n    function nearestNamed(hex) { var best = null, bestD = Infinity; var t = h2r(hex); C.forEach(function (c) { var r = h2r(c.h); var d = Math.abs(t.r - r.r) + Math.abs(t.g - r.g) + Math.abs(t.b - r.b); if (d < bestD) { bestD = d; best = c } }); return best }\n\n\n    \/\/ Sort each group: darkest \u2192 lightest by HSL lightness for a smoother visual gradient\n    C.sort(function (a, b) {\n      if (a.g !== b.g) return GR.indexOf(a.g) - GR.indexOf(b.g);\n      return h2hsl(a.h).l - h2hsl(b.h).l;\n    });\n\n\n    var _tt;\n    function toast(m) { var t = document.getElementById('hxToast'); t.textContent = m; t.classList.add('show'); clearTimeout(_tt); _tt = setTimeout(function () { t.classList.remove('show') }, 1500) }\n    function cp(v) {\n      function ok() { toast('Copied ' + v) }\n      function fb() { var e = document.createElement('textarea'); e.value = v; e.style.cssText = 'position:fixed;left:-9999px;opacity:0'; document.body.appendChild(e); e.select(); try { document.execCommand('copy'); ok() } catch (x) { } document.body.removeChild(e) }\n      if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(v).then(ok).catch(fb); else fb();\n    }\n\n\n    \/\/ \u2550\u2550\u2550\u2550 NAMED COLORS PANEL \u2550\u2550\u2550\u2550\n    function renderNamed() {\n      var list = getList();\n      document.getElementById('hxCnt').textContent = list.length + ' \/ ' + C.length;\n\n\n      \/\/ Filters\n      var fH = '<button class=\"hx-fil' + (S.fil === 'All' ? ' on' : '') + '\" data-f=\"All\">All<\/button>';\n      GR.forEach(function (g) { var cnt = C.filter(function (c) { return c.g === g }).length; fH += '<button class=\"hx-fil' + (S.fil === g ? ' on' : '') + '\" data-f=\"' + g + '\"><span class=\"hx-fild\" style=\"background:' + GC[g] + '\"><\/span>' + g + ' (' + cnt + ')<\/button>' });\n      document.getElementById('hxFils').innerHTML = fH;\n      document.querySelectorAll('.hx-fil').forEach(function (el) { el.addEventListener('click', function () { S.fil = this.dataset.f; renderNamed() }) });\n\n\n      document.querySelectorAll('.hx-vb').forEach(function (b) { b.classList.toggle('on', b.dataset.v === S.view) });\n\n\n      renderDet();\n\n\n      var area = document.getElementById('hxArea');\n      if (!list.length) { area.innerHTML = '<div class=\"hx-empty\">No colors match your search.<\/div>'; return }\n      var grouped = (S.fil === 'All' && !S.q);\n      var html = '';\n\n\n      if (S.view === 'grid') {\n        if (grouped) { GR.forEach(function (g) { var gr = list.filter(function (c) { return c.g === g }); if (!gr.length) return; html += '<div class=\"hx-gh\"><span class=\"hx-ghd\" style=\"background:' + GC[g] + '\"><\/span><span class=\"hx-ghn\">' + g + '<\/span><span class=\"hx-ghc\">' + gr.length + '<\/span><\/div><div class=\"hx-grid\">' + gr.map(cardH).join('') + '<\/div>' }) }\n        else html = '<div class=\"hx-grid\">' + list.map(cardH).join('') + '<\/div>';\n      } else {\n        if (grouped) { GR.forEach(function (g) { var gr = list.filter(function (c) { return c.g === g }); if (!gr.length) return; html += '<div class=\"hx-gh\"><span class=\"hx-ghd\" style=\"background:' + GC[g] + '\"><\/span><span class=\"hx-ghn\">' + g + '<\/span><span class=\"hx-ghc\">' + gr.length + '<\/span><\/div><div class=\"hx-list\">' + gr.map(rowH).join('') + '<\/div>' }) }\n        else html = '<div class=\"hx-list\">' + list.map(rowH).join('') + '<\/div>';\n      }\n      area.innerHTML = html;\n      area.querySelectorAll('[data-hex]').forEach(function (el) { el.addEventListener('click', function () { cp(this.dataset.hex); S.sel = this.dataset.hex; renderDet(); area.querySelectorAll('.sel').forEach(function (s) { s.classList.remove('sel') }); this.classList.add('sel') }) });\n\n\n      document.getElementById('hxFoot').innerHTML = 'Click any color to copy \u00b7 <strong>' + C.length + '<\/strong> named colors \u00b7 Switch to \"Pick Any Color\" for the full 16M spectrum';\n    }\n\n\n    function getList() { var l = C; if (S.fil !== 'All') l = l.filter(function (c) { return c.g === S.fil }); if (S.q) { var q = S.q.toLowerCase().trim(); l = l.filter(function (c) { return c.n.toLowerCase().indexOf(q) > -1 || c.h.toLowerCase().indexOf(q.replace('#', '')) > -1 }) } return l }\n    function cardH(c) { return '<div class=\"hx-card' + (S.sel === c.h ? ' sel' : '') + '\" data-hex=\"' + c.h + '\" title=\"' + c.n + '\"><div class=\"hx-card-color\" style=\"background:' + c.h + '\"><\/div><div class=\"hx-card-info\"><div class=\"hx-card-hex\">' + c.h + '<\/div><div class=\"hx-card-name\">' + c.n + '<\/div><\/div><\/div>' }\n    function rowH(c) { var rgb = h2r(c.h); return '<div class=\"hx-lr' + (S.sel === c.h ? ' sel' : '') + '\" data-hex=\"' + c.h + '\"><div class=\"hx-lsw\" style=\"background:' + c.h + '\"><\/div><span class=\"hx-ln\">' + c.n + '<\/span><span class=\"hx-lh\">' + c.h + '<\/span><span class=\"hx-lrgb\">' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + '<\/span><\/div>' }\n\n\n    function renderDet() {\n      var el = document.getElementById('hxDet');\n      if (!S.sel) { el.classList.remove('show'); return }\n      var c = C.find(function (x) { return x.h === S.sel });\n      if (!c) { el.classList.remove('show'); return }\n      el.classList.add('show');\n      var rgb = h2r(c.h), hsl = h2hsl(c.h);\n      el.innerHTML = '<div class=\"hx-det-sw\" style=\"background:' + c.h + '\"><\/div><div class=\"hx-det-body\"><span class=\"hx-det-name\">' + c.n + '<\/span><span class=\"hx-det-grp\">' + c.g + '<\/span><div class=\"hx-det-codes\"><div class=\"hx-det-c\" data-cp=\"' + c.h + '\"><span class=\"hx-det-cl\">HEX<\/span>' + c.h + '<\/div><div class=\"hx-det-c\" data-cp=\"rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')\"><span class=\"hx-det-cl\">RGB<\/span>' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + '<\/div><div class=\"hx-det-c\" data-cp=\"hsl(' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '%)\"><span class=\"hx-det-cl\">HSL<\/span>' + hsl.h + '\u00b0, ' + hsl.s + '%, ' + hsl.l + '%<\/div><\/div><\/div><button class=\"hx-det-x\" id=\"hxDetX\">\u00d7<\/button>';\n      document.getElementById('hxDetX').addEventListener('click', function () { S.sel = null; renderNamed() });\n      el.querySelectorAll('.hx-det-c').forEach(function (e) { e.addEventListener('click', function (ev) { ev.stopPropagation(); cp(this.dataset.cp) }) });\n    }\n\n\n    \/\/ \u2550\u2550\u2550\u2550 COLOR PICKER PANEL \u2550\u2550\u2550\u2550\n    var specCanvas, specCtx, hueCanvas, hueCtx, specW, specH, hueW;\n    var pickerReady = false;\n\n\n    function initPicker() {\n      if (pickerReady) return;\n      specCanvas = document.getElementById('specCanvas');\n      hueCanvas = document.getElementById('hueCanvas');\n      specCtx = specCanvas.getContext('2d');\n      hueCtx = hueCanvas.getContext('2d');\n\n\n      function resize() {\n        var sb = document.getElementById('specBox'), hb = document.getElementById('hueBox');\n        specW = sb.clientWidth; specH = sb.clientHeight;\n        specCanvas.width = specW; specCanvas.height = specH;\n        hueW = hb.clientWidth;\n        hueCanvas.width = hueW; hueCanvas.height = 20;\n        drawHueBar(); drawSpec(); updatePickerUI();\n      }\n\n\n      \/\/ Hue bar\n      function drawHueBar() {\n        var grad = hueCtx.createLinearGradient(0, 0, hueW, 0);\n        for (var i = 0; i <= 360; i += 30)grad.addColorStop(i \/ 360, 'hsl(' + i + ',100%,50%)');\n        hueCtx.fillStyle = grad; hueCtx.fillRect(0, 0, hueW, 20);\n      }\n\n\n      \/\/ Spectrum\n      function drawSpec() {\n        var rgb = hsv2rgb(S.pickerHue, 100, 100);\n        var base = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';\n        \/\/ White gradient left to right\n        var g1 = specCtx.createLinearGradient(0, 0, specW, 0);\n        g1.addColorStop(0, '#fff'); g1.addColorStop(1, base);\n        specCtx.fillStyle = g1; specCtx.fillRect(0, 0, specW, specH);\n        \/\/ Black gradient top to bottom\n        var g2 = specCtx.createLinearGradient(0, 0, 0, specH);\n        g2.addColorStop(0, 'rgba(0,0,0,0)'); g2.addColorStop(1, '#000');\n        specCtx.fillStyle = g2; specCtx.fillRect(0, 0, specW, specH);\n      }\n\n\n      function updatePickerUI() {\n        var rgb = hsv2rgb(S.pickerHue, S.pickerSat, S.pickerVal);\n        S.pickerHex = r2h(rgb.r, rgb.g, rgb.b);\n        var t = tc(S.pickerHex);\n        var hsl = h2hsl(S.pickerHex);\n        document.getElementById('pickSwatch').style.background = S.pickerHex;\n        document.getElementById('pickSwText').style.color = t;\n        document.getElementById('pickSwText').textContent = S.pickerHex;\n        document.getElementById('pickHex').value = S.pickerHex;\n        document.getElementById('pvRv').textContent = rgb.r + ', ' + rgb.g + ', ' + rgb.b;\n        document.getElementById('pvHv').textContent = hsl.h + '\u00b0, ' + hsl.s + '%, ' + hsl.l + '%';\n\n\n        \/\/ Nearest named\n        var near = nearestNamed(S.pickerHex);\n        if (near && near.h.toUpperCase() === S.pickerHex.toUpperCase()) {\n          document.getElementById('pickName').textContent = near.n;\n          document.getElementById('pickNearest').textContent = 'Exact CSS named color';\n        } else if (near) {\n          document.getElementById('pickName').textContent = 'Custom Color';\n          document.getElementById('pickNearest').textContent = 'Nearest named: ' + near.n + ' (' + near.h + ')';\n        }\n\n\n        \/\/ Cursors\n        var cx = S.pickerSat \/ 100 * specW;\n        var cy = (1 - S.pickerVal \/ 100) * specH;\n        document.getElementById('specCursor').style.left = cx + 'px';\n        document.getElementById('specCursor').style.top = cy + 'px';\n        document.getElementById('hueMarker').style.left = (S.pickerHue \/ 360 * hueW) + 'px';\n      }\n\n\n      \/\/ Spec interaction\n      var specDrag = false;\n      function specPick(e) {\n        var rect = specCanvas.getBoundingClientRect();\n        var x = Math.max(0, Math.min(specW, (e.clientX || e.touches[0].clientX) - rect.left));\n        var y = Math.max(0, Math.min(specH, (e.clientY || e.touches[0].clientY) - rect.top));\n        S.pickerSat = Math.round(x \/ specW * 100);\n        S.pickerVal = Math.round((1 - y \/ specH) * 100);\n        updatePickerUI();\n      }\n      document.getElementById('specBox').addEventListener('mousedown', function (e) { specDrag = true; specPick(e) });\n      document.getElementById('specBox').addEventListener('touchstart', function (e) { specDrag = true; specPick(e); e.preventDefault() }, { passive: false });\n      document.addEventListener('mousemove', function (e) { if (specDrag) specPick(e) });\n      document.addEventListener('touchmove', function (e) { if (specDrag) specPick(e) }, { passive: false });\n      document.addEventListener('mouseup', function () { specDrag = false });\n      document.addEventListener('touchend', function () { specDrag = false });\n\n\n      \/\/ Hue interaction\n      var hueDrag = false;\n      function huePick(e) {\n        var rect = hueCanvas.getBoundingClientRect();\n        var x = Math.max(0, Math.min(hueW, (e.clientX || e.touches[0].clientX) - rect.left));\n        S.pickerHue = Math.round(x \/ hueW * 360);\n        drawSpec(); updatePickerUI();\n      }\n      document.getElementById('hueBox').addEventListener('mousedown', function (e) { hueDrag = true; huePick(e) });\n      document.getElementById('hueBox').addEventListener('touchstart', function (e) { hueDrag = true; huePick(e); e.preventDefault() }, { passive: false });\n      document.addEventListener('mousemove', function (e) { if (hueDrag) huePick(e) });\n      document.addEventListener('touchmove', function (e) { if (hueDrag) huePick(e) }, { passive: false });\n      document.addEventListener('mouseup', function () { hueDrag = false });\n      document.addEventListener('touchend', function () { hueDrag = false });\n\n\n      \/\/ Hex input\n      document.getElementById('pickHex').addEventListener('input', function () {\n        var v = this.value;\n        if (v.length >= 6 && !v.startsWith('#')) v = '#' + v;\n        if (validH(v)) {\n          S.pickerHex = v.toUpperCase();\n          var rgb = h2r(v);\n          var hsv = rgb2hsv(rgb.r, rgb.g, rgb.b);\n          S.pickerHue = hsv.h; S.pickerSat = hsv.s; S.pickerVal = hsv.v;\n          drawSpec(); updatePickerUI();\n        }\n      });\n\n\n      \/\/ Copy button\n      document.getElementById('pickCopy').addEventListener('click', function () {\n        cp(S.pickerHex);\n        this.textContent = 'Copied!'; this.classList.add('done');\n        var btn = this; setTimeout(function () { btn.textContent = 'Copy Hex Code'; btn.classList.remove('done') }, 1500);\n      });\n\n\n      \/\/ Value copy\n      document.getElementById('pvR').addEventListener('click', function () { var rgb = h2r(S.pickerHex); cp('rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')') });\n      document.getElementById('pvH').addEventListener('click', function () { var hsl = h2hsl(S.pickerHex); cp('hsl(' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '%)') });\n\n\n      setTimeout(resize, 50);\n      window.addEventListener('resize', resize);\n      pickerReady = true;\n    }\n\n\n    \/\/ \u2550\u2550\u2550\u2550 TAB SWITCHING \u2550\u2550\u2550\u2550\n    function switchTab(tab) {\n      S.tab = tab;\n      document.getElementById('tabNamed').classList.toggle('on', tab === 'named');\n      document.getElementById('tabPicker').classList.toggle('on', tab === 'picker');\n      document.getElementById('panelNamed').classList.toggle('show', tab === 'named');\n      document.getElementById('panelPicker').classList.toggle('show', tab === 'picker');\n      if (tab === 'named') {\n        renderNamed();\n        document.getElementById('hxFoot').innerHTML = 'Click any color to copy \u00b7 <strong>' + C.length + '<\/strong> named colors';\n      } else {\n        initPicker();\n        document.getElementById('hxFoot').innerHTML = 'Pick any color from the full 16 million color spectrum \u00b7 Click to copy hex, RGB, or HSL';\n      }\n    }\n\n\n    \/\/ \u2500\u2500 Events \u2500\u2500\n    document.getElementById('tabNamed').addEventListener('click', function () { switchTab('named') });\n    document.getElementById('tabPicker').addEventListener('click', function () { switchTab('picker') });\n    document.getElementById('hxQ').addEventListener('input', function () { S.q = this.value; S.fil = 'All'; renderNamed() });\n    document.querySelectorAll('.hx-vb').forEach(function (b) { b.addEventListener('click', function () { S.view = this.dataset.v; renderNamed() }) });\n\n\n    \/\/ Init\n    switchTab('named');\n  })();\n<\/script>\n    <\/div>\r\n<br>\r\n<div class=\"new-course-promo-blk-banner\">\r\n  <div class=\"l-wrap\">\r\n    <a href=\"https:\/\/www.andacademy.com\/graphic-design-courses\/\" target=\"_blank\">\r\n      <div class=\"newcourse-bootcamp-banner\">\r\n        <div class=\"newcourse-bootcamp-banner-left\">\r\n          <p><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/themes\/andacademyblog\/images\/GDC-Stickers.png\"><\/p>\r\n        <\/div>\r\n        <div class=\"newcourse-bootcamp-banner-right\">\r\n          <p><span class=\"newcourse-bootcamp-banner-text-span1\">Got the hex codes? Now learn how to use them in your designs!<\/span><br><span class=\"gd-bootcamp-banner-text-span2\">Explore our design courses.<\/span><\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/a>\r\n   <\/div>\r\n<\/div>\r\n\r\n<br>\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"is\">What is the difference between hex codes and RGB?<\/h2>\r\n\r\n\r\n\r\n\r\n\r\n<p>The main difference between hex codes and RGB lies in their format. Hex color codes are always six digits long, making them predictable and consistent, which is why programmers often favor them. On the other hand, RGB values can range from three to nine digits, offering more flexibility but also requiring more attention to detail.<\/p>\r\n\r\n\r\n\r\n<p>While hex codes are commonly used in web design, they are not mandatory. When coding in HTML, you can opt for RGB values or even color names instead. However, it\u2019s important to note that just because you can use RGB values or names doesn\u2019t mean you should. To avoid potential errors in your project, using a color hex wheel picker or converter is recommended to generate the desired hex code. This reduces the risk of future coders misinterpreting or manually converting the colors, ensuring your web page retains its intended look.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"How\">How do hex color codes work?<\/h2>\r\n\r\n\r\n\r\n<p>Hex colors are derived from the RGB color model, and a hexadecimal notation is used to indicate the blend of red, green, and blue (RGB) in a color. They are represented as #RRGGBB, where each RR, GG, and BB can contain 255 different values. This range specifies the intensity of each color.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>The concept behind the model is that you can create almost any color by combining varying amounts of red, green, and blue color values. This model is used in digital screens as well as in devices like digital cameras and video projectors. With over 16.7 million possible combinations of these values, there is a wide range of colors to choose from. In fact, this number exceeds the human eye&#8217;s ability to differentiate between each unique shade.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-structure-of-hex-color-codes\">Structure of hex color codes<\/h3>\r\n\r\n\r\n\r\n<p>A hex color code follows a structure:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li>The first two digits represent the red component<\/li>\r\n\r\n\r\n\r\n<li>The next two digits represent the green component<\/li>\r\n\r\n\r\n\r\n<li>The last two digits represent the blue component<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p><em>For example<\/em>, in the hex code #78C8FF:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li>78 indicates the red intensity<\/li>\r\n\r\n\r\n\r\n<li>C8 indicates the green intensity<\/li>\r\n\r\n\r\n\r\n<li>FF indicates the blue intensity<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-conversion-from-rgb-to-hex\">Conversion from RGB to Hex<\/h3>\r\n\r\n\r\n\r\n<p>RGB values, which range from 0 to 255 for each color, can be converted to hex by following these steps:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li>Take the decimal value of the red, green, and blue components.<\/li>\r\n\r\n\r\n\r\n<li>Convert each value to its hexadecimal equivalent.<\/li>\r\n\r\n\r\n\r\n<li>Combine the hex values into a single hex code.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p><em>For example<\/em>, to convert the RGB value (120, 200, 255) to a hex code:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li>The red value 120 converts to 78<\/li>\r\n\r\n\r\n\r\n<li>The green value 200 converts to C8&nbsp;<\/li>\r\n\r\n\r\n\r\n<li>The blue value 255 converts to FF<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>So, the RGB value (120, 200, 255) is represented as the hex code #78C8FF.<\/p>\r\n\r\n\r\n\r\n<a class=\"downlaod_courses_anch mob_wd_an my_pop_show1\" href=\"#brochure\"><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/banner_1ban.webp\" alt=\"\" class=\"wp-image-18794\"\/><\/figure><\/a>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"Benefits\">Benefits of using hex color codes in graphic design<\/h2>\r\n\r\n\r\n\r\n<p>Before using hex color codes for your designs, it is important to understand their significance. Here are some compelling benefits:<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-1-consistency\">1. Consistency<\/h3>\r\n\r\n\r\n\r\n<p>Hex colors provide a universal language of defining colors, making sure the exact same color appears on different devices, browsers, and operating systems. This consistency is essential for maintaining the integrity of designs across diverse platforms, whether it\u2019s on a computer, smartphone, or tablet. By using hex codes, designers can be confident that the right color will be displayed consistently, regardless of where it&#8217;s viewed.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-2-ease-of-use\">2. Ease of use<\/h3>\r\n\r\n\r\n\r\n<p>Working with hex codes is simple because they consist of a hash symbol (#) followed by a combination of six letters and digits. This makes them compact and easy to write or copy-paste. Unlike other color systems, such as RGB, which requires multiple numbers (three values between 0 and 255), hex codes offer a more concise way to specify a color, which speeds up the design process.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-3-variety-of-colors\">3. Variety of colors<\/h3>\r\n\r\n\r\n\r\n<p>With millions of color combinations available, hex codes provide designers with a vast palette to work with. This allows them to materialise creative ideas and select the ideal shade or hue for their design projects.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-4-precision-and-accuracy\">4. Precision and accuracy<\/h3>\r\n\r\n\r\n\r\n<p>Hex codes allow designers to specify colors with a high degree of precision. Since each component of the color (red, green, and blue) is represented by two digits in the hex code, designers can achieve the exact shade or tone they want. This level of accuracy is significant for branding and when replicating specific color palettes across different media.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-5-wide-compatibility\">5. Wide compatibility<\/h3>\r\n\r\n\r\n\r\n<p>Nearly all digital platforms, from web browsers to design software, including graphic design tools, content management systems, and web development tools like HTML and CSS, support hex codes. This makes hex colors the go-to option for designers and developers, as they can be easily integrated into any project without worrying about compatibility issues.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-6-flexibility\">6. Flexibility<\/h3>\r\n\r\n\r\n\r\n<p>Hex codes offer an enormous range of color possibilities. This flexibility allows designers to choose from an extensive <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/complete-guide-to-colour-palettes\/\" target=\"_blank\" rel=\"noopener\">palette of colors<\/a> to match their creative vision, making it easy to find the perfect hue for any project. Whether working with vibrant tones or muted shades, hex codes provide versatility in designing with virtually any color imaginable.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-7-no-conversion-needed\">7. No conversion needed<\/h3>\r\n\r\n\r\n\r\n<p>One of the major advantages of hex codes is that they don\u2019t require conversion from one format to another. While RGB values (representing colors in terms of red, green, and blue intensity) sometimes need to be converted to hexadecimal or vice versa, hex codes are direct and ready to use. This simplifies the design process and eliminates the possibility of errors or inconsistencies caused by incorrect conversions.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"to\">How to read hex color codes<\/h2>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/inner_3a-2.webp\" alt=\"Combination of hex color codes\" class=\"wp-image-18791\" title=\"Combination of hex color codes\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>Image Courtesy: Techopedia.com<\/em><\/p>\r\n\r\n\r\n\r\n<p>While hex codes may appear complex with their alphanumeric combinations, understanding them can help you become an expert in color precision and allow you to customize colors for your designs effectively. Here\u2019s how they work:<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-1-hexadecimal-system\">1. Hexadecimal system<\/h3>\r\n\r\n\r\n\r\n<p>Hex color codes use the base-16 numbering system, which includes numbers (0-9) and letters (A-F). Each character represents four bits of information, known as a &#8220;nibble.&#8221; For example, #FF5733 is a hex code for a shade of orange.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-2-structure-of-hex-codes\">2. Structure of hex codes<\/h3>\r\n\r\n\r\n\r\n<p>A hex color code consists of six characters, typically grouped in pairs. These pairs represent the intensity of the three primary colors, red (R), green (G), and blue (B):<\/p>\r\n\r\n\r\n\r\n<p>For example, in #FF5733:<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li>FF represents the highest intensity of red<\/li>\r\n\r\n\r\n\r\n<li>57 stands for a moderate amount of green<\/li>\r\n\r\n\r\n\r\n<li>33 indicates a small amount of blue<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-3-understanding-the-scale\">3. Understanding the scale<\/h3>\r\n\r\n\r\n\r\n<p>Since hex codes derive from the RGB model, understanding the intensity of each is critical to creating the right code.&nbsp;<\/p>\r\n\r\n\r\n\r\n<ul class=\"disc wp-block-list\">\r\n<li>A code like <strong>#FF0000 <\/strong>represents full red (FF), no green (00), and no blue (00), creating a pure red color.<\/li>\r\n\r\n\r\n\r\n<li>A code like <strong>#00FF00<\/strong> represents full green, no red, and no blue, resulting in a pure green color.<\/li>\r\n\r\n\r\n\r\n<li>A code like <strong>#0000FF<\/strong> represents full blue, with no red or green, giving a pure blue color.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"use\">How to use hex colors effectively?<\/h2>\r\n\r\n\r\n\r\n<p>Colors have the power to evoke a wide range of emotions and influence how viewers perceive a design. Before choosing hex colors for your project, it\u2019s essential to consider the mood and message you want to communicate and select colors that align with those intentions.<\/p>\r\n\r\n\r\n\r\n<p>The possibilities for colors are vast. Many resources are available to help you understand the meanings behind different colors. Be sure to consult experts in color psychology and conduct thorough research to make informed choices.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-1-experiment-with-color-combinations\">1. Experiment with color combinations<\/h3>\r\n\r\n\r\n\r\n<p>Test different hex <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/complete-guide-to-colour-combinations\/\" target=\"_blank\" rel=\"noopener\">color combinations<\/a> to ensure they complement each other. Tools like <a href=\"https:\/\/www.shutterstock.com\/colors\/color-palette-generator\" target=\"_blank\" rel=\"noopener\">color palette generators<\/a> can help you identify appealing color schemes and create a list of colors that suit your design.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-2-pay-attention-to-the-contrast\">2. Pay attention to the contrast<\/h3>\r\n\r\n\r\n\r\n<p>Make sure there is enough contrast between the background color and text or other elements to ensure readability. The <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/#contrast-minimum\" target=\"_blank\" rel=\"noopener\">Web Content Accessibility Guidelines (WCAG 2.2)<\/a> require a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text. See the new WCAG section below for a worked example, or test your own combinations with the <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">WebAIM Contrast Checker<a\/>.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-3-optimize-for-the-web\">3. Optimize for the web<\/h3>\r\n\r\n\r\n\r\n<p>When using hex colors in web design, remember that some colors may look different across various screens and browsers. To maintain consistency, it&#8217;s important to test the colors on different devices and browsers to ensure they produce the desired effect.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-4-use-web-safe-colors\">4. Use web-safe colors<\/h3>\r\n\r\n\r\n\r\n<p>Web-safe colors are limited to a palette of 216 colors, made up of six shades each of red, green, and blue. While the importance of web-safe colors has diminished with technological advancements and improved color management systems, the concept still provides a useful guideline for designers to select colors more likely to display consistently across various platforms.<\/p>\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title\" id=\"2026\">2026 Hex Color Trends Designers Are Using<\/h2>\r\n<p>Color forecasting bodies such as <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/pantone-color-guide\/\" target=\"_blank\" rel=\"noopener\">Pantone<\/a>, WGSN, Coloro &#8211; converge on a similar story for 2026: warmth, earth, and quiet confidence. The trending hex codes below appear repeatedly across brand refreshes, editorial design, and web design systems published in late 2025 and early 2026.<\/p>\r\n\r\n<table border=\"1\" width=\"100%\" cellpadding=\"5\">\r\n  <tbody>\r\n    <tr>\r\n      <td><p><strong>Trend Name<\/strong><\/p><\/td>\r\n      <td><p><strong>Hex Code<\/strong><\/p><\/td>\r\n      <td><p><strong>Why It&#8217;s Trending<\/strong><\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>Mocha Mousse<\/p><\/td>\r\n      <td><p>#A47864<\/p><\/td>\r\n      <td><p>Pantone Color of the Year 2025; still dominating editorial and brand refreshes.<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>Cloud Dancer<\/p><\/td>\r\n      <td><p>#F0EEE9<\/p><\/td>\r\n      <td><p>Replacing pure white as the default neutral for web backgrounds.<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>Olive Grove<\/p><\/td>\r\n      <td><p>#6B7B3F<\/p><\/td>\r\n      <td><p>Earthy green pulling brands away from saturated tech blues.<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>Sandstone Beige<\/p><\/td>\r\n      <td><p>#C9B79C<\/p><\/td>\r\n      <td><p>Warm neutral pairing with darker accents.<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>Cinnamon Stick<\/p><\/td>\r\n      <td><p>#8C5A3C<\/p><\/td>\r\n      <td><p>Replacing warm browns and burgundies for editorial accents.<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>Soft Sage<\/p><\/td>\r\n      <td><p>#BFC9B4<\/p><\/td>\r\n      <td><p>Quiet, accessible green for wellness and SaaS.<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>Charcoal Plum<\/p><\/td>\r\n      <td><p>#3D2C40<\/p><\/td>\r\n      <td><p>Replacing pure black for dark mode UIs.<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>Ochre Yellow<\/p><\/td>\r\n      <td><p>#CC8A2C<\/p><\/td>\r\n      <td><p>High-contrast accent for editorial design.<\/p><\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table><br>\r\n\r\n<p>These codes are designed to work together \u2014 the warm neutrals (Mocha Mousse, Sandstone, Cinnamon) pair with the muted greens (Olive Grove, Soft Sage), and Charcoal Plum gives both groups a flexible dark anchor. Try the picker above to explore variants.<\/p>\r\n\r\n<h2 class=\"intext-cta__blog-title\" id=\"WCAG\">Hex Codes &#038; WCAG Accessibility: Picking Colors That Anyone Can Read<\/h2>\r\n<p>Choosing a beautiful hex code is half the work. The other half is making sure people can actually read text in that color. The <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/#contrast-minimum\" target=\"_blank\" rel=\"noopener\">Web Content Accessibility Guidelines (WCAG 2.2)<\/a> define minimum contrast ratios that every designer should treat as non-negotiable.<\/p>\r\n\r\n<p><strong>The thresholds that matter:<\/strong><\/p>\r\n\r\n<ul class=\"disc\">\r\n<li><strong>WCAG AA &#8211; normal text<\/strong>: contrast ratio of at least 4.5:1 between text and background<\/li>\r\n<li><strong>WCAG AA &#8211; large text (18pt+ or 14pt+ bold)<\/strong>: at least 3:1<\/li>\r\n<li><strong>WCAG AAA &#8212; normal text: at least 7<\/strong>:1 (the gold standard for editorial and content sites)<\/li>\r\n<li><strong>Non-text UI elements (buttons, form borders, icons)<\/strong>: at least 3:1<\/li>\r\n<\/ul>\r\n\r\n<p><strong>Quick examples:<\/strong><\/p>\r\n\r\n<table border=\"1\" width=\"100%\" cellpadding=\"5\">\r\n  <tbody>\r\n    <tr>\r\n      <td><p><strong>Foreground<\/strong><\/p><\/td>\r\n      <td><p><strong>Background<\/strong><\/p><\/td>\r\n      <td><p><strong>Ratio<\/strong><\/p><\/td>\r\n      <td><p><strong>Verdict<\/strong><\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>#000000 (black)<\/p><\/td>\r\n      <td><p>#FFFFFF (white)<\/p><\/td>\r\n      <td><p>21:1<\/p><\/td>\r\n      <td><p>Maximum possible \u2014 always passes<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>#333333 (dark gray)<\/p><\/td>\r\n      <td><p>#FFFFFF<\/p><\/td>\r\n      <td><p>12.6:1<\/p><\/td>\r\n      <td><p>Passes AA + AAA<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>#4A90E2 (brand blue)<\/p><\/td>\r\n      <td><p>#FFFFFF<\/p><\/td>\r\n      <td><p>3.5:1<\/p><\/td>\r\n      <td><p>Passes AA for large text only<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>#CCCCCC (light gray)<\/p><\/td>\r\n      <td><p>#FFFFFF<\/p><\/td>\r\n      <td><p>1.6:1<\/p><\/td>\r\n      <td><p>Fails \u2014 avoid<\/p><\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table><br>\r\n\r\n<p><strong>How to check your hex codes:<\/strong><\/p>\r\n\r\n<ol class=\"disc\">\r\n<li>Open the WebAIM Contrast Checker (webaim.org\/resources\/contrastchecker\/).<\/li>\r\n<li>Paste the foreground and background hex codes.<\/li>\r\n<li>Read the AA \/ AAA pass\/fail indicators for normal and large text.<\/li>\r\n<\/ol>\r\n\r\n<p>For an internal team workflow, add a contrast check to your design system documentation \u2014 every color token should ship with a list of the backgrounds it can be used on. This single habit eliminates roughly 80% of accessibility regressions in product design.<\/p>\r\n\r\n<h2 class=\"intext-cta__blog-title\" id=\"CSS\">CSS Named Colors: Full Hex Chart<\/h2>\r\n<p>The CSS specification defines a set of named colors you can use anywhere a hex code works. Names like &#8220;crimson&#8221; (#DC143C) or &#8220;cornflowerblue&#8221; (#6495ED) are easier to remember than hex codes and render identically across all modern browsers.<\/p>\r\n\r\n<p>Below is a quick reference of the 24 most-used CSS named colors. For the full sortable, searchable, copy-on-click chart of all 141 named colors, use the interactive widget above.<\/p>\r\n\r\n<table border=\"1\" width=\"100%\" cellpadding=\"5\">\r\n  <tbody>\r\n    <tr>\r\n      <td><p><strong>Name<\/strong><\/p><\/td>\r\n      <td><p><strong>Hex<\/strong><\/p><\/td>\r\n      <td><p><strong>Name<\/strong><\/p><\/td>\r\n      <td><p><strong>Hex<\/strong><\/p><\/td>\r\n      <td><p><strong>Name<\/strong><\/p><\/td>\r\n      <td><p><strong>Hex<\/strong><\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>white<\/p><\/td>\r\n      <td><p>#FFFFFF<\/p><\/td>\r\n      <td><p>black<\/p><\/td>\r\n      <td><p>#000000<\/p><\/td>\r\n      <td><p>red<\/p><\/td>\r\n      <td><p>#FF0000<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>green<\/p><\/td>\r\n      <td><p>#008000<\/p><\/td>\r\n      <td><p>blue<\/p><\/td>\r\n      <td><p>#0000FF<\/p><\/td>\r\n      <td><p>yellow<\/p><\/td>\r\n      <td><p>#FFFF00<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>orange<\/p><\/td>\r\n      <td><p>#FFA500<\/p><\/td>\r\n      <td><p>purple<\/p><\/td>\r\n      <td><p>#800080<\/p><\/td>\r\n      <td><p>pink<\/p><\/td>\r\n      <td><p>#FFC0CB<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>brown<\/p><\/td>\r\n      <td><p>#A52A2A<\/p><\/td>\r\n      <td><p>gray<\/p><\/td>\r\n      <td><p>#808080<\/p><\/td>\r\n      <td><p>silver<\/p><\/td>\r\n      <td><p>#C0C0C0<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>gold<\/p><\/td>\r\n      <td><p>#FFD700<\/p><\/td>\r\n      <td><p>navy<\/p><\/td>\r\n      <td><p>#000080<\/p><\/td>\r\n      <td><p>teal<\/p><\/td>\r\n      <td><p>#008080<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>coral<\/p><\/td>\r\n      <td><p>#FF7F50<\/p><\/td>\r\n      <td><p>crimson<\/p><\/td>\r\n      <td><p>#DC143C<\/p><\/td>\r\n      <td><p>indigo<\/p><\/td>\r\n      <td><p>#4B0082<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>khaki<\/p><\/td>\r\n      <td><p>#F0E68C<\/p><\/td>\r\n      <td><p>salmon<\/p><\/td>\r\n      <td><p>#FA8072<\/p><\/td>\r\n      <td><p>tomato<\/p><\/td>\r\n      <td><p>#FF6347<\/p><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><p>turquoise<\/p><\/td>\r\n      <td><p>#40E0D0<\/p><\/td>\r\n      <td><p>violet<\/p><\/td>\r\n      <td><p>#EE82EE<\/p><\/td>\r\n      <td><p>cornflowerblue<\/p><\/td>\r\n      <td><p>#6495ED<\/p><\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table><br>\r\n\r\n<p>All 141 CSS named colors are defined in the <a href=\"https:\/\/www.w3.org\/TR\/css-color-4\/#named-colors\" target=\"_blank\" rel=\"noopener\">W3C CSS Color Module Level 4 specification<\/a> and render consistently in every modern browser.<\/p>\r\n\r\n<h2 class=\"intext-cta__blog-title\" id=\"10\">10 Hex Color Palettes for Common Design Briefs<\/h2>\r\n\r\n<p>Each palette below uses three to five hex codes balanced for contrast and harmony. Click any swatch in the picker at the top to copy a code, or use them as starting points and adjust to your brand voice.<\/p>\r\n\r\n<p><strong>Editorial &#8211; Warm Neutral<\/strong>: #FAF7F2 paper \u00b7 #2B2A28 text \u00b7 #B86A3D accent \u00b7 #5C5751 secondary<\/p>\r\n\r\n<p><strong>Fintech &#8211; Trust + Modern<\/strong>: #0B1F3A primary \u00b7 #2563EB interactive \u00b7 #F8FAFC surface \u00b7 #94A3B8 muted \u00b7 #10B981 success\r\n<\/p>\r\n\r\n<p><strong>Wellness &#8211; Soft Sage<\/strong>: #F4F1EC base \u00b7 #6F8A6E primary \u00b7 #2D3B2D text \u00b7 #D9C7A7 warm accent<\/p>\r\n\r\n<p><strong>Minimalist Portfolio<\/strong>: #FFFFFF surface \u00b7 #111111 text \u00b7 #FF3B30 accent \u00b7 #6E6E6E secondary<\/p>\r\n\r\n<p><strong>SaaS &#8211; Dark Mode<\/strong>: #0E1117 surface \u00b7 #21262D elevated \u00b7 #C9D1D9 text \u00b7 #58A6FF link \u00b7 #3FB950 success<\/p>\r\n\r\n<p><strong>Editorial &#8211; High Contrast<\/strong>: #FFFFFF surface \u00b7 #000000 text \u00b7 #E63946 accent \u00b7 #F1FAEE section bg<\/p>\r\n\r\n<p><strong>E-commerce &#8211; Beauty \/ Luxury<\/strong>: #FBF7F4 surface \u00b7 #2A1F1A text \u00b7 #B08D69 gold \u00b7 #8B5E34 dark accent<\/p>\r\n\r\n<p><strong>Children&#8217;s \/ Education<\/strong>: #FFE066 yellow \u00b7 #2EC4B6 teal \u00b7 #E71D36 red \u00b7 #011627 dark text<\/p>\r\n\r\n<p><strong>Sustainability \/ Green Brand<\/strong>: #2D5016 forest \u00b7 #87BC45 secondary \u00b7 #F2EFE9 surface \u00b7 #1A1A1A text<\/p>\r\n\r\n<p><strong>Editorial &#8211; Dark + Warm<\/strong>: #1F1B16 base \u00b7 #F4E9D8 body \u00b7 #C97B4B accent \u00b7 #847468 muted<\/p>\r\n\r\n<p>These palettes pass WCAG AA for body copy contrast where the background and text colors are paired as listed.<\/p>\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"Things\">Things to keep in mind when working with hex codes<\/h2>\r\n\r\n\r\n\r\n<p>If you&#8217;re accustomed to working with colors in Adobe Illustrator or for print, transitioning to hex colors for web design may require some adjustment. Here are a few things that can ensure your project runs smoothly:<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-1-use-hex-color-palette-resources\">1. Use hex color palette resources<\/h3>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/image6.webp.gif\" alt=\"Hex color palette\" class=\"wp-image-18793\" title=\"Hex color palette\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>Image Courtesy: Coda Community<\/em><\/p>\r\n\r\n\r\n\r\n<p>When you want to create a unique design, selecting complementary colors from the 16 million hex options can feel overwhelming. Fortunately, other designers have made this easier by developing hex color palette databases and interactive selectors.<\/p>\r\n\r\n\r\n\r\n<p><strong>Color\u2011Hex Color Palettes <\/strong>&#8211; This platform allows you to explore thousands of community-created hex color combinations. You can browse through palettes by name, each with a descriptive title that gives you an idea of its style and includes all six hex colors. Clicking on a designer\u2019s name reveals other palettes they&#8217;ve created. Color\u2011Hex Color Palettes is an excellent resource for finding color inspiration.<\/p>\r\n\r\n\r\n\r\n<p><strong>Coolors <\/strong>&#8211;<strong> <\/strong>Coolors combines inspiration with functionality to accelerate the design process. You can explore trending color palettes to see what other designers are using and save your favorites if you create an account. Another helpful feature is the palette generator, which lets you lock in specific colors and generate complementary ones by tapping the spacebar. This fast-paced tool makes creating new color combinations a breeze. Coolors is also available as an iOS app or Adobe extension.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-2-align-hex-colors-with-your-design-elements\">2. Align hex colors with your design elements\u00a0<\/h3>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/inner_1a-2.webp\" alt=\"Picture of hex color codes.\r\n\" class=\"wp-image-18788\" title=\"Picture of hex color codes.\r\n\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>Image Courtesy: Stack Overflow<\/em><\/p>\r\n\r\n\r\n\r\n<p>When designing for an existing website or trying to match other elements, it&#8217;s essential to know the hex colors used on the site. A reliable color picker tool can be incredibly helpful, especially for creating attention-grabbing marketing materials.<\/p>\r\n\r\n\r\n\r\n<p><strong>ImageColorPicker<\/strong> allows you to upload any image and identify the hex colors it contains.<\/p>\r\n\r\n\r\n\r\n<p>Another useful tool is the <strong>ColorPick Eyedropper<\/strong>, a Google Chrome extension that lets you easily find the hex color of any element on a webpage. If you spot a color you like on a site, simply use the Eyedropper to identify it.<\/p>\r\n\r\n\r\n\r\n<p>If you&#8217;re selecting imagery and other elements for the site, finding assets matching your chosen hex color palette works best. On <strong>iStock<\/strong>, you can filter search results by hex color. Enter the hex code or select a color using their picker, then add your search keywords. The site will return images that closely match the color you&#8217;ve chosen.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"h-3-be-careful-with-color-banding\">3. Be careful with color banding<\/h3>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/inner_2a-2.webp\" alt=\"Variation of different hex color codes\r\n\" class=\"wp-image-18790\" title=\"Variation of different hex color codes\r\n\"\/><\/figure>\r\n\r\n\r\n\r\n<p><em>Image Courtesy: SVGator<\/em><\/p>\r\n\r\n\r\n\r\n<p>With 16 million possible colors, hex color codes offer a wide range of options for creating contrasts. However, since each pixel must display a unique color, hex codes don&#8217;t allow smooth transitions between shades.<\/p>\r\n\r\n\r\n\r\n<p>When web designers use hex colors to create gradients, the result can often be unexpected, leading to distinct color bands instead of a smooth blend. This phenomenon, known as <strong>color banding<\/strong>, is more likely to occur on older devices that can&#8217;t display millions of colors.<\/p>\r\n\r\n\r\n\r\n<p>In modern CSS, it&#8217;s possible to program gradients in a way that minimizes color banding. On newer screens, color banding is most noticeable in natural gradients, such as skies or rainbows, where the many subtle color variations visible to the naked eye are compressed to save file space.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title wp-block-heading\" id=\"Conclusion\">Conclusion\u00a0<\/h2>\r\n\r\n\r\n\r\n<p>We hope you\u2019ve found our holistic guide to hex color codes insightful and understood its importance for graphic designers. These codes are commonly used in web development and graphic design software, making them a fundamental tool for creating visually appealing and precise digital content. Their main advantage lies in their compact format, which makes them easy to use and understand in CSS and other design applications.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>To learn more about hex color codes, a significant part of <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/12-graphic-design-ideas\/\" target=\"_blank\" rel=\"noopener\">graphic design<\/a>, check out the <a href=\"https:\/\/www.andacademy.com\/graphic-design-courses\/\" target=\"_blank\" rel=\"noopener\">Graphic Design Course<\/a> offered by AND. It has a comprehensive curriculum covering hands-on learning opportunities, unparalleled mentorship, and dedicated placement support. You can check out this <a href=\"https:\/\/www.behance.net\/gallery\/163958643\/Visual-Narrative-Project\" target=\"_blank\" rel=\"noopener\">project by AND Learner, Sanniddhi Goyal<\/a>, to get an idea of all you can learn here!&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>If you\u2019d like to know more about graphic design or related topics, head over to the <a href=\"https:\/\/www.andacademy.com\/resources\/\" target=\"_blank\" rel=\"noopener\">AND Academy blog<\/a> for more articles. As a starting point, you can consider going through the following resources:<\/p>\r\n\r\n\r\n\r\n<p>1. <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/rgb-vs-cmyk-differences\/\" target=\"_blank\" rel=\"noopener\">RGB vs. CMYK \u2013 Which is the Better Color System for Web Designs?<\/a><\/p>\r\n\r\n\r\n\r\n<p>2. <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/what-is-rgb\/\" target=\"_blank\" rel=\"noopener\">What is RGB: A Complete Guide to the Color Model and Its Uses<\/a><\/p>\r\n\r\n\r\n\r\n<p>3. <a href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/product-packaging-design\/\" target=\"_blank\" rel=\"noopener\">What Is Product Packaging Design? A Holistic Guide With Tips and Examples for 2025<\/a><\/p>\r\n\r\n\r\n<h2 class=\"intext-cta__blog-title\" id=\"Frequently\">Frequently Asked Questions<\/h2>\r\n\r\n<h3>1. What is a hex color code?<\/h3>\r\n<p>A hex color code is a six-digit combination of numbers and letters that represents a color in digital design. It starts with a hash (#) and follows the format #RRGGBB, where each pair defines the intensity of red, green, and blue.<\/p>\r\n\r\n<h3> 2. How do hex color codes work?<\/h3>\r\n<p>Hex color codes work by combining red, green, and blue values in hexadecimal format. Each pair ranges from 00 to FF, indicating intensity from 0 to 255. The combination of these three values produces a specific color.<\/p>\r\n\r\n<h3>3. What is the difference between hex codes and RGB?<\/h3>\r\n<p>Hex codes and RGB represent the same colors but use different formats. RGB uses decimal values like rgb(255, 0, 0), while hex uses hexadecimal notation like #FF0000. Hex is more compact and commonly used in CSS.<\/p>\r\n\r\n<h3> 4. What does #FFFFFF mean?<\/h3>\r\n<p>#FFFFFF represents white. It means red, green, and blue are all set to their maximum values, producing white light.<\/p>\r\n\r\n<h3>5. How do you read hex color codes?<\/h3>\r\n<p>To read a hex color code, remove the hash symbol and split the six characters into three pairs. Each pair corresponds to red, green, and blue values in hexadecimal format.<\/p>\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-next-steps\">Next Steps<\/h2>\r\n\r\n\r\n\r\n<p>If you still have unanswered questions about pursuing graphic design, consider these additional resources for further information:<\/p>\r\n\r\n\r\n\r\n<ol class=\"disc wp-block-list\">\r\n<li>Watch this <a href=\"https:\/\/www.youtube.com\/watch?v=-7Al38joVkk\" target=\"_blank\" rel=\"noopener\">session<\/a> by graphic design industry leaders Soumya Tiwari and Sakshi Jain.<\/li>\r\n\r\n\r\n\r\n<li>Talk to a <a class=\"circle_anch pop_show my_pop_show1\" href=\"#consultcourseadvisors\">course advisor<\/a> to discuss how you can transform your career with one of AND Academy\u2019s courses.<\/li>\r\n\r\n\r\n\r\n<li>Explore our <a class=\"my_course_entity\" href=\"https:\/\/www.andacademy.com\/graphic-design-courses\/\" target=\"_blank\" rel=\"noopener\">Graphic Design Course<\/a>, which is taught through live, interactive classes by industry experts, and comes with a job guarantee.<\/li>\r\n\r\n\r\n\r\n<li>Take advantage of the <a class=\"my_course_entity\" href=\"https:\/\/www.andacademy.com\/graphic-design-courses\/#:~:text=graphic%20design%20course%20fee%20&amp;%20funding\" target=\"_blank\" rel=\"noopener\">scholarship and funding options that come with our courses<\/a> to overcome any financial hurdle on the path of your career transformation.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<p><em>Note: All information and\/or data from external sources is believed to be accurate as of the date of publication.<\/em><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>A hex color code is a systematic way of representing colors in a format that computers can read, understand, and display. It is typically used in website design, graphic design, and other related fields. With over 16 million possible color combinations, it offers designers a versatile tool for creating precise color choices. Hex color codes [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":18809,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[36],"class_list":["post-18787","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphic-design","tag-sukanya-bhattacharjee"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Complete Guide to Hex Color Codes: Free Tool &amp; Chart (2026) | AND Academy<\/title>\n<meta name=\"description\" content=\"Read to learn about hex color codes in graphic design. Know their origin, structure, and how to use them. Also, use our interactive tool to pick any hex color and copy its code for free.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Complete Guide to Hex Color Codes: Free Tool &amp; Chart (2026) | AND Academy\" \/>\n<meta property=\"og:description\" content=\"Learn about hex color codes and pick any color with our free, interactive hex code finder and copy it in one click.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"AND Academy\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-13T12:06:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-28T09:14:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/image2-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"612\" \/>\n\t<meta property=\"og:image:height\" content=\"408\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sukanya Bhattacharjee\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Complete Guide to Hex Color Codes: Free Tool &amp; Chart (2026) | AND Academy\" \/>\n<meta name=\"twitter:description\" content=\"Learn about hex color codes and pick any color with our free, interactive hex code finder and copy it in one click.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/image2-4.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sukanya Bhattacharjee\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/\"},\"author\":{\"name\":\"Sukanya Bhattacharjee\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/person\\\/4ebbb3461b732d63d10d1fcda9b1de3f\"},\"headline\":\"Hex Codes for Colors: A Complete Guide for Designers (with Chart and free tool)\",\"datePublished\":\"2025-05-13T12:06:33+00:00\",\"dateModified\":\"2026-04-28T09:14:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/\"},\"wordCount\":3891,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/feature_1-2.webp\",\"keywords\":[\"Sukanya Bhattacharjee\"],\"articleSection\":[\"Graphic Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/\",\"name\":\"Complete Guide to Hex Color Codes: Free Tool & Chart (2026) | AND Academy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/feature_1-2.webp\",\"datePublished\":\"2025-05-13T12:06:33+00:00\",\"dateModified\":\"2026-04-28T09:14:53+00:00\",\"description\":\"Read to learn about hex color codes in graphic design. Know their origin, structure, and how to use them. Also, use our interactive tool to pick any hex color and copy its code for free.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/feature_1-2.webp\",\"contentUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/feature_1-2.webp\",\"width\":780,\"height\":410,\"caption\":\"Color pallets with different hex colors.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/blog\\\/graphic-design\\\/hex-color-codes-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hex Codes for Colors: A Complete Guide for Designers (with Chart and free tool)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#website\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/\",\"name\":\"AND Academy\",\"description\":\"Design Courses with Placement Guarantee | AND Academy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#organization\"},\"alternateName\":\"AND Academy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#organization\",\"name\":\"AND Academy\",\"alternateName\":\"AND Academy\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/AND-Logo-Hi-res-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/AND-Logo-Hi-res-scaled.jpg\",\"width\":2560,\"height\":2560,\"caption\":\"AND Academy\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/#\\\/schema\\\/person\\\/4ebbb3461b732d63d10d1fcda9b1de3f\",\"name\":\"Sukanya Bhattacharjee\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d23ec49addfc9b6085accbca53d82ca167e29f89bacd6c4abb65a7956175263d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d23ec49addfc9b6085accbca53d82ca167e29f89bacd6c4abb65a7956175263d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d23ec49addfc9b6085accbca53d82ca167e29f89bacd6c4abb65a7956175263d?s=96&d=mm&r=g\",\"caption\":\"Sukanya Bhattacharjee\"},\"sameAs\":[\"http:\\\/\\\/andacademy.com\"],\"url\":\"https:\\\/\\\/www.andacademy.com\\\/resources\\\/author\\\/sukanya-bhattacharjee\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Complete Guide to Hex Color Codes: Free Tool & Chart (2026) | AND Academy","description":"Read to learn about hex color codes in graphic design. Know their origin, structure, and how to use them. Also, use our interactive tool to pick any hex color and copy its code for free.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/","og_locale":"en_US","og_type":"article","og_title":"Complete Guide to Hex Color Codes: Free Tool & Chart (2026) | AND Academy","og_description":"Learn about hex color codes and pick any color with our free, interactive hex code finder and copy it in one click.","og_url":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/","og_site_name":"AND Academy","article_published_time":"2025-05-13T12:06:33+00:00","article_modified_time":"2026-04-28T09:14:53+00:00","og_image":[{"width":612,"height":408,"url":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/image2-4.png","type":"image\/png"}],"author":"Sukanya Bhattacharjee","twitter_card":"summary_large_image","twitter_title":"Complete Guide to Hex Color Codes: Free Tool & Chart (2026) | AND Academy","twitter_description":"Learn about hex color codes and pick any color with our free, interactive hex code finder and copy it in one click.","twitter_image":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/image2-4.png","twitter_misc":{"Written by":"Sukanya Bhattacharjee","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/#article","isPartOf":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/"},"author":{"name":"Sukanya Bhattacharjee","@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/person\/4ebbb3461b732d63d10d1fcda9b1de3f"},"headline":"Hex Codes for Colors: A Complete Guide for Designers (with Chart and free tool)","datePublished":"2025-05-13T12:06:33+00:00","dateModified":"2026-04-28T09:14:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/"},"wordCount":3891,"commentCount":0,"publisher":{"@id":"https:\/\/www.andacademy.com\/resources\/#organization"},"image":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/feature_1-2.webp","keywords":["Sukanya Bhattacharjee"],"articleSection":["Graphic Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/","url":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/","name":"Complete Guide to Hex Color Codes: Free Tool & Chart (2026) | AND Academy","isPartOf":{"@id":"https:\/\/www.andacademy.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/feature_1-2.webp","datePublished":"2025-05-13T12:06:33+00:00","dateModified":"2026-04-28T09:14:53+00:00","description":"Read to learn about hex color codes in graphic design. Know their origin, structure, and how to use them. Also, use our interactive tool to pick any hex color and copy its code for free.","breadcrumb":{"@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/#primaryimage","url":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/feature_1-2.webp","contentUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2025\/05\/feature_1-2.webp","width":780,"height":410,"caption":"Color pallets with different hex colors."},{"@type":"BreadcrumbList","@id":"https:\/\/www.andacademy.com\/resources\/blog\/graphic-design\/hex-color-codes-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andacademy.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Hex Codes for Colors: A Complete Guide for Designers (with Chart and free tool)"}]},{"@type":"WebSite","@id":"https:\/\/www.andacademy.com\/resources\/#website","url":"https:\/\/www.andacademy.com\/resources\/","name":"AND Academy","description":"Design Courses with Placement Guarantee | AND Academy","publisher":{"@id":"https:\/\/www.andacademy.com\/resources\/#organization"},"alternateName":"AND Academy","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andacademy.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.andacademy.com\/resources\/#organization","name":"AND Academy","alternateName":"AND Academy","url":"https:\/\/www.andacademy.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2022\/10\/AND-Logo-Hi-res-scaled.jpg","contentUrl":"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2022\/10\/AND-Logo-Hi-res-scaled.jpg","width":2560,"height":2560,"caption":"AND Academy"},"image":{"@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.andacademy.com\/resources\/#\/schema\/person\/4ebbb3461b732d63d10d1fcda9b1de3f","name":"Sukanya Bhattacharjee","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d23ec49addfc9b6085accbca53d82ca167e29f89bacd6c4abb65a7956175263d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d23ec49addfc9b6085accbca53d82ca167e29f89bacd6c4abb65a7956175263d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d23ec49addfc9b6085accbca53d82ca167e29f89bacd6c4abb65a7956175263d?s=96&d=mm&r=g","caption":"Sukanya Bhattacharjee"},"sameAs":["http:\/\/andacademy.com"],"url":"https:\/\/www.andacademy.com\/resources\/author\/sukanya-bhattacharjee\/"}]}},"_links":{"self":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts\/18787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/comments?post=18787"}],"version-history":[{"count":28,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts\/18787\/revisions"}],"predecessor-version":[{"id":22749,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/posts\/18787\/revisions\/22749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/media\/18809"}],"wp:attachment":[{"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/media?parent=18787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/categories?post=18787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andacademy.com\/resources\/wp-json\/wp\/v2\/tags?post=18787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}