{"id":3744,"date":"2024-08-29T14:52:03","date_gmt":"2024-08-29T14:52:03","guid":{"rendered":"https:\/\/www.notebookandpenguin.com\/rebuild\/?p=3744"},"modified":"2026-07-24T11:34:17","modified_gmt":"2026-07-24T11:34:17","slug":"orange-color-codes","status":"publish","type":"post","link":"https:\/\/www.notebookandpenguin.com\/rebuild\/orange-color-codes\/","title":{"rendered":"75+ Energetic Shades Of Orange: Meaning, Psychology, Hex Codes &amp; Palettes"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-768afb3 stk-block-background stk--has-background-overlay\" data-block-id=\"768afb3\"><style>.stk-768afb3 {background-color:#faa200 !important;background-image:url(https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/shades-of-orange.jpg) !important;min-height:338px !important;align-items:center !important;display:flex !important;}.stk-768afb3:before{background-color:#faa200 !important;opacity:0.7 !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-768afb3-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-ec9ac92\" data-v=\"4\" data-block-id=\"ec9ac92\"><style>.stk-ec9ac92 {align-self:center !important;}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-ec9ac92-container stk--no-background stk--no-padding\"><div class=\"has-text-align-center stk-block-content stk-inner-blocks stk-ec9ac92-inner-blocks\">\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-e39ec37 stk-block-background\" data-block-id=\"e39ec37\"><style>.stk-e39ec37 {background-color:#0f0e17 !important;border-top-left-radius:20px !important;border-top-right-radius:20px !important;border-bottom-right-radius:20px !important;border-bottom-left-radius:20px !important;overflow:hidden !important;align-items:center !important;max-width:205px !important;min-width:auto !important;padding-top:var(--stk--preset--spacing--20, 0.44rem) !important;padding-right:var(--stk--preset--spacing--20, 0.44rem) !important;padding-bottom:var(--stk--preset--spacing--20, 0.44rem) !important;padding-left:var(--stk--preset--spacing--20, 0.44rem) !important;margin-right:auto !important;margin-left:auto !important;display:flex !important;}.stk-e39ec37:before{background-color:#0f0e17 !important;}.stk-e39ec37 .stk-block-subtitle__text{font-size:14px !important;color:#FFA500 !important;}@media screen and (max-width:999px){.stk-e39ec37 .stk-block-subtitle__text{font-size:14px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle has-text-color has-text-align-center\"><strong>ORANGE COLOR HUB<\/strong><\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-e483374\" id=\"75-shades-of-orange\" data-block-id=\"e483374\"><style>.stk-e483374 {margin-bottom:9px !important;}.stk-e483374 .stk-block-heading__text{font-size:58px !important;color:#000000 !important;}@media screen and (max-width:999px){.stk-e483374 .stk-block-heading__text{font-size:50px !important;}}<\/style><h2 class=\"stk-block-heading__text has-text-color has-text-align-center\">75+ SHADES OF ORANGE<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-460f2fe\" data-block-id=\"460f2fe\"><style>.stk-460f2fe {margin-bottom:3px !important;}.stk-460f2fe .stk-block-subtitle__text{font-size:18px !important;color:#000000 !important;}@media screen and (max-width:999px){.stk-460f2fe .stk-block-subtitle__text{font-size:18px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle has-text-color has-text-align-center\"><strong>Orange is one of the world&#8217;s most energetic and vibrant colors and, although it might not be the first color people think about when choosing colors, once you start playing with all the different shades of orange out there, you will soon see that orange is definitely a color worth considering!<\/strong><\/p><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<style>\n\/* This is the magic - tells the browser to stop 160px BEFORE the heading *\/\n#trueOrangeBlock, #psychology, #palettes, #popular, #library, #generator, #card-deck, #pinterest, #learn, #resources, #swatch-book, #tools {\n  scroll-margin-top: 160px; \/* 90px menu + Journey bar + breathing room *\/\n}\n.hub-nav-sticky{position:sticky;top:90px;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1.5px solid #F1F5F9;border-bottom:1.5px solid #E5E7EB;padding:10px 0;font-family:Inter,sans-serif;margin:0 -16px}\n.hub-nav-inner-sticky{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:900px;margin:0 auto;padding:0 12px}\n.hub-link-s{border:1.5px solid #E5E7EB;background:#fff;border-radius:999px;padding:7px 12px;font-size:11.5px;font-weight:700;color:#334155;text-decoration:none;transition:.15s;white-space:nowrap;display:inline-block}\n.hub-link-s:hover{background:#0F172A;color:#fff;border-color:#0F172A;transform:translateY(-1px)}\n.hub-link-s.active{background:#0F172A;color:#fff;border-color:#0F172A}\n\n\/* MOBILE FIX - now wraps to 2-3 neat rows instead of getting chopped *\/\n@media(max-width:768px){\n  .hub-nav-sticky{top:auto;position:relative;padding:10px 12px}\n  .hub-nav-inner-sticky{flex-wrap:wrap;overflow:visible;justify-content:center}\n  .hub-link-s{font-size:11px;padding:6px 10px}\n  \/* lower the offset on mobile since menu isn't sticky *\/\n  #trueOrangeBlock, #psychology, #palettes, #popular, #library, #generator, #card-deck, #pinterest, #learn, #resources, #swatch-book, #tools {scroll-margin-top: 20px}\n}\n<\/style>\n\n<div class=\"hub-nav-sticky\" id=\"mainJump\">\n  <div class=\"hub-nav-inner-sticky\">\n    <a class=\"hub-link-s\" href=\"#trueOrangeBlock\">True Orange<\/a>\n    <a class=\"hub-link-s\" href=\"#psychology\">Psychology Of Orange<\/a>\n    <a class=\"hub-link-s\" href=\"#palettes\">Color Palettes<\/a>\n    <a class=\"hub-link-s\" href=\"#popular\">Popular Shades of Orange<\/a>\n    <a class=\"hub-link-s\" href=\"#library\">Orange Hex Lists<\/a>\n    <a class=\"hub-link-s\" href=\"#generator\">Color Palette Generator<\/a>\n    <a class=\"hub-link-s\" href=\"#card-deck\">Color Card Deck<\/a>\n    <a class=\"hub-link-s\" href=\"#pinterest\">Save to Pinterest<\/a>\n    <a class=\"hub-link-s\" href=\"#learn\">Learn About Orange<\/a>\n    <a class=\"hub-link-s\" href=\"#resources\">Resources<\/a>\n    <a class=\"hub-link-s\" href=\"#swatch-book\">Color Swatch Book<\/a>\n    <a class=\"hub-link-s\" href=\"#tools\">Tools<\/a>\n<a class=\"hub-link-s\" href=\"#other-colors\">Other Colors<\/a>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  const links=[...document.querySelectorAll('.hub-link-s')];\n  const secs=links.map(a=>document.querySelector(a.getAttribute('href'))).filter(Boolean);\n  \n  \/\/ 1. Active state\n  function setActive(){\n    let cur='';\n    for(let s of secs){ if(window.scrollY >= s.offsetTop - 180) cur='#'+s.id; }\n    links.forEach(a=>a.classList.toggle('active', a.getAttribute('href')===cur));\n  }\n  window.addEventListener('scroll',setActive); setActive();\n\n  \/\/ 2. Middle-of-page landing when clicked\n  links.forEach(link=>{\n    link.addEventListener('click', function(e){\n      e.preventDefault();\n      const target=document.querySelector(this.getAttribute('href'));\n      if(!target) return;\n      \/\/ calculate position so heading lands in middle of screen\n      const offset=90+20; \/\/ your 90px top + 20px gap\n      const targetTop=target.getBoundingClientRect().top + window.pageYOffset;\n      const middlePos=targetTop - offset - (window.innerHeight\/3); \/\/ lands at 1\/3 down the page\n      window.scrollTo({top:middlePos, behavior:'smooth'});\n    });\n  });\n})();\n<\/script>\n\n\n\n<div style=\"height:76px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&amp;family=Inter:wght@500;700&amp;display=swap\" rel=\"stylesheet\">\n<style>\n.true-orange-block{max-width:1200px;margin:0 auto;font-family:Inter,sans-serif;background:#fff;border:1.5px solid #E5E7EB;border-radius:24px;padding:20px;display:grid;grid-template-columns:360px 1fr;gap:28px;position:relative}\n@media(max-width:860px){.true-orange-block{grid-template-columns:1fr}}\n.true-swatch{height:380px;background:#FFA500;border-radius:20px;position:relative;padding:14px;display:flex;align-items:flex-end;box-shadow:0 12px 28px rgba(255,165,0,.22)}\n.true-pill{width:100%;background:#000;border-radius:999px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:#FFA500;letter-spacing:.2px}\n.true-pill button{background:none;border:0;cursor:pointer;font-size:16px;color:#FFA500}\n.true-title h2{font-family:Anton,sans-serif;font-size:45px;line-height:1.05;letter-spacing:-.3px;text-transform:uppercase;color:#0F172A;margin:0 0 10px 0;font-weight:400}\n.true-sub{font-size:18px;line-height:1.6;color:#475569;max-width:560px;margin-bottom:16px}\n.true-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}\n@media(max-width:600px){.true-grid{grid-template-columns:1fr 1fr}}\n.true-card{border:1.5px solid #E5E7EB;border-radius:12px;padding:10px 12px;background:#fff;transition:.15s;cursor:pointer;position:relative}\n.true-card:hover{border-color:#FDBA74;transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,165,0,.08)}\n.true-card:active{transform:translateY(0)}\n.true-label{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6B7280;margin-bottom:3px}\n.true-value{font-size:13px;font-weight:800;color:#0F172A;display:flex;align-items:center;gap:6px}\n.true-dot{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.08)}\n.true-family{margin-top:14px}\n.true-bar{height:28px;border-radius:999px;background:linear-gradient(90deg,#FFF5E6 0%,#FFD199 25%,#FFA500 50%,#CC8400 100%);border:1px solid #E5E7EB}\n.true-bar-labels{display:flex;justify-content:space-between;font-family:monospace;font-size:10px;color:#6B7280;margin-top:6px}\n\/* Copy feedback *\/\n.copy-hint{position:absolute;top:8px;right:8px;background:#0F172A;color:#fff;font-size:10px;font-weight:700;padding:3px 6px;border-radius:6px;opacity:0;transition:.2s;pointer-events:none}\n.true-card.copied .copy-hint{opacity:1}\n#orangeToast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#0F172A;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:.25s;z-index:9999;pointer-events:none}\n#orangeToast.show{opacity:1;transform:translateX(-50%) translateY(0)}\n<\/style>\n\n<div class=\"true-orange-block\" id=\"trueOrangeBlock\">\n  <div>\n    <div class=\"true-swatch\">\n      <div class=\"true-pill\"><span>TRUE ORANGE   #FFA500<\/span><button id=\"mainCopyBtn\" title=\"Copy HEX\">\u2399<\/button><\/div>\n    <\/div>\n    <div class=\"true-family\">\n      <div class=\"true-label\">Light \u2192 Dark Family<\/div>\n      <div class=\"true-bar\"><\/div>\n      <div class=\"true-bar-labels\"><span>#FFF5E6<\/span><span>#FFA500<\/span><span>#CC8400<\/span><\/div>\n    <\/div>\n  <\/div>\n  <div>\n    <div class=\"true-title\"><h2>True Orange<\/h2><\/div>\n    <div class=\"true-sub\">True Orange is a warm and energetic secondary color created by combining red and yellow. Other shades of orange are created when you alter the amounts of red, yellow, black or white that are mixed with the orange.<\/div>\n    <div class=\"true-grid\">\n      <div class=\"true-card\" data-copy=\"#FFA500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">HEX<\/div><div class=\"true-value\">#FFA500<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"255, 165, 0\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">RGB<\/div><div class=\"true-value\">255, 165, 0<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"39\u00b0, 100%, 50%\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">HSL<\/div><div class=\"true-value\">39\u00b0, 100%, 50%<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"0%, 35%, 100%, 0%\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">CMYK<\/div><div class=\"true-value\">0%, 35%, 100%, 0%<\/div><\/div>\n      <div class=\"true-card\"><div class=\"true-label\">Temperature<\/div><div class=\"true-value\">Warm<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"#005AFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Complementary<\/div><div class=\"true-value\"><span class=\"true-dot\" style=\"background:#005AFF\"><\/span>#005AFF<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"0.50\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Luminance<\/div><div class=\"true-value\">0.50<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"Secondary\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Family<\/div><div class=\"true-value\">Secondary<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"#7 Worldwide\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Popularity<\/div><div class=\"true-value\">#7 Worldwide<\/div><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<div id=\"orangeToast\">Copied to clipboard!<\/div>\n\n<script>\n(function(){\n  const toast=document.getElementById('orangeToast');\n  function showToast(text){\n    toast.textContent='Copied '+text+'!';\n    toast.classList.add('show');\n    setTimeout(()=>toast.classList.remove('show'),1600);\n  }\n  function copyText(el,text){\n    navigator.clipboard.writeText(text).then(()=>{\n      el.classList.add('copied');\n      showToast(text);\n      setTimeout(()=>el.classList.remove('copied'),1200);\n    });\n  }\n  document.querySelectorAll('.true-card[data-copy]').forEach(card=>{\n    card.addEventListener('click',()=>copyText(card,card.dataset.copy));\n  });\n  document.getElementById('mainCopyBtn').addEventListener('click',function(){\n    copyText(this.closest('.true-swatch'),'#FFA500');\n    this.textContent='\u2713';\n    setTimeout(()=>this.textContent='\u2399',1200);\n  });\n})();\n<\/script>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-1b527cf\" id=\"psychology\" data-block-id=\"1b527cf\"><style>.stk-1b527cf .stk-block-heading__text{font-size:var(--stk--preset--font-size--x-large, 50px) !important;color:#0f0e17 !important;}@media screen and (max-width:999px){.stk-1b527cf .stk-block-heading__text{font-size:var(--stk--preset--font-size--x-large, 50px) !important;}}<\/style><h2 class=\"stk-block-heading__text has-text-color\">PSYCHOLOGY OF ORANGE<\/h2><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&amp;family=Inter:wght@400;600;700&amp;display=swap\" rel=\"stylesheet\">\n<style>\n.trust-block{max-width:1100px;margin:0 auto;font-family:Inter,sans-serif;display:grid;grid-template-columns:1fr 340px;gap:20px}\n@media(max-width:900px){.trust-block{grid-template-columns:1fr}}\n.trust-title{font-family:Anton,sans-serif;font-size:28px;line-height:1;letter-spacing:-.3px;text-transform:uppercase;color:#0F172A;margin-bottom:10px}\n.trust-p{font-size:18px;line-height:1.6;color:#334155;margin-bottom:14px}\n.trust-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n@media(max-width:600px){.trust-cards{grid-template-columns:1fr}}\n.mini{border:1.5px solid #E5E7EB;background:#fff;border-radius:16px;padding:12px 14px}\n.label{font-size:13px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#6B7280;margin-bottom:8px}\n.pills{display:flex;flex-wrap:wrap;gap:6px}\n.pill {\n    border: 1.5px solid #E5E7EB;\n    background: #ffa500 !important;\n    border-radius: 999px;\n    padding: 5px 12px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #000 !important;\n    display: inline-block;\n    font-family: Inter, sans-serif !important;\n    cursor: default !important;\n}\n.didyou{background:#ffa500;color:#000;border-radius:16px;padding:14px 16px;display:flex;gap:10px;margin-top:12px}\n.brands{border:1.5px solid #E5E7EB;background:#fff;border-radius:16px;padding:14px}\n.brand-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #F3F4F6}\n.brand-row:last-child{border:0}\n.dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.06)}\n.best{background:#111827;color:#fff;border-radius:16px;padding:14px;margin-top:12px}\n.life{border:1.5px solid #E5E7EB;background:#fff;border-radius:16px;padding:14px;margin-top:12px}\n.life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}\n@media(max-width:600px){.life-grid{grid-template-columns:1fr}}\n.life-item{border:1px solid #F3F4F6;background:#F9FAFB;border-radius:10px;padding:8px 10px}\n.life-item b{font-size:14px;display:block;margin-bottom:2px}\n.life-item span{font-size:14px;color:#6B7280;line-height:1.4;display:block}\n.full-width{grid-column:1\/-1}\n<\/style>\n\n<div class=\"trust-block\">\n  <!-- LEFT COLUMN -->\n  <div>\n    <div class=\"trust-title\">Orange Creates Feelings Of Enthusiasm and Energy<\/div>\n    <div class=\"trust-p\">When people see orange they are reminded of sunshine, autumn leaves, and tropical fruits. Studies have found that orange stimulates enthusiasm, signals friendliness, and is the most attention-grabbing warm color. In business, brands use orange to convey playfulness, confidence, and affordability.<\/div>\n    \n    <div class=\"trust-cards\">\n      <div class=\"mini\"><div class=\"label\">Emotions<\/div><div class=\"pills\"><span class=\"pill\">Enthusiasm<\/span><span class=\"pill\">Energy<\/span><span class=\"pill\">Friendliness<\/span><span class=\"pill\">Confidence<\/span><span class=\"pill\">Warmth<\/span><span class=\"pill\">Creativity<\/span><\/div><\/div>\n      <div class=\"mini\"><div class=\"label\">Culture<\/div><div style=\"font-size:14px;color:#334155;line-height:1.5\"><li>In Western Countries: Autumn, Halloween, Energy.<\/li><li>In China: Happiness, Good Luck.<\/li> <li>In India: Sacrifice, Courage.<\/li> <li>In Japan: Courage, Love.<\/li> <li>In Middle East: Desert, Warmth.<\/li><\/div><\/div>\n    <\/div>\n\n    <div class=\"didyou\"><div style=\"font-size:18px\">\ud83d\udca1<\/div><div><b style=\"font-size:15px\">Did you know?<\/b><div style=\"font-size:14px;line-height:1.5;margin-top:4px;opacity:.95\">Fanta, Nickelodeon, and The Home Depot all use orange because it signals fun, creativity, and affordability. Studies show orange increases enthusiasm and impulse buying by up to 12%.<\/div><\/div><\/div>\n  <\/div>\n\n  <!-- RIGHT COLUMN -->\n  <div>\n    <div class=\"brands\"><div class=\"label\">Brands that use orange<\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#FF6600\"><\/div><div><b style=\"font-size:14px\">Fanta<\/b><div style=\"font-size:13px;color:#6B7280\">Fun, refreshment<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#F57D25\"><\/div><div><b style=\"font-size:14px\">The Home Depot<\/b><div style=\"font-size:13px;color:#6B7280\">Reliability, DIY<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#FF6B00\"><\/div><div><b style=\"font-size:14px\">Nickelodeon<\/b><div style=\"font-size:13px;color:#6B7280\">Playfulness, energy<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#EB6F02\"><\/div><div><b style=\"font-size:14px\">Harley-Davidson<\/b><div style=\"font-size:13px;color:#6B7280\">Rebellion, freedom<\/div><\/div><\/div>\n    <\/div>\n    <div class=\"best\"><div class=\"label\" style=\"color:#9CA3AF\">Best for<\/div><div style=\"font-size:14px;line-height:1.6;margin-top:6px\">Food\/Beverage, Children&#8217;s brands, Entertainment, Automotive, Call to Action buttons, Seasonal marketing.<br><br><span style=\"color:#9CA3AF\">Avoid for luxury\/premium (use dark colors instead).<\/span><\/div><\/div>\n  <\/div>\n\n  <!-- LIFESTYLE SECTION - FULL WIDTH -->\n  <div class=\"life full-width\">\n    <div class=\"label\">Lifestyle Ideas \u2014 Where to use orange<\/div>\n    <div class=\"life-grid\">\n      <div class=\"life-item\"><b>\ud83c\udfe0 Home Decor<\/b><span>Terracotta &amp; Rust for warm living spaces. Peach for bedrooms. Pairs with teal, navy, and cream.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udc8d Weddings<\/b><span>Peach &amp; Apricot for autumn weddings. Burnt orange for rustic themes. Tangerine for summer.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udc57 Fashion<\/b><span>Burnt orange is a warm neutral. Tangerine is a pop of color. Terracotta is the ultimate fall staple.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83c\udfa8 Branding<\/b><span>Food, children&#8217;s, creative. Bright orange = energetic. Burnt orange = earthy &amp; premium.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udcf1 UI \/ Web<\/b><span>Best for attention-grabbing CTAs. Use #EA580C for buttons. Ensure high contrast with dark text.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83c\udf83 Events &amp; Seasonal<\/b><span>Orange for Halloween, Thanksgiving, autumn. Peach for spring\/summer. Pumpkin for harvest.<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Famous Brands That Use Orange In Their Logos<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1010\" height=\"519\" src=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-orange-logos.jpg\" alt=\"Businesses and brands With Orange Logos\" class=\"wp-image-3746\" srcset=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-orange-logos.jpg 1010w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-orange-logos-300x154.jpg 300w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-orange-logos-800x411.jpg 800w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-orange-logos-500x257.jpg 500w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-orange-logos-768x395.jpg 768w\" sizes=\"(max-width: 1010px) 100vw, 1010px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-7946c23\" data-block-id=\"7946c23\"><style>.stk-7946c23 {margin-bottom:4px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">COLOR PALETTES THAT WORK WITH TRUE ORANGE<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-43a43eb\" id=\"palettes\" data-block-id=\"43a43eb\"><h2 class=\"stk-block-heading__text\">ORANGE COLOR PALETTES &amp; HARMONIES<\/h2><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&amp;family=Inter:wght@500;700&amp;display=swap\" rel=\"stylesheet\">\n<style>\n.palettes-wrap{max-width:1100px;margin:0 auto;font-family:Inter,sans-serif}\n.pal-kicker{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6B7280;margin-bottom:8px}\n.pal-title{font-family:Anton,sans-serif;font-size:32px;line-height:.95;text-transform:uppercase;letter-spacing:-.3px;color:#0F172A;margin-bottom:20px}\n.pal-section{border:1.5px solid #E5E7EB;background:#fff;border-radius:20px;padding:16px;margin-bottom:12px}\n.pal-label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6B7280;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}\n.pal-row{display:flex;flex-wrap:wrap;gap:10px}\n.pal-chip{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:.15s;position:relative}\n.pal-chip:hover{transform:translateY(-1px)}\n.pal-swatch{width:58px;height:58px;border-radius:12px;border:1.5px solid rgba(0,0,0,.06)}\n.pal-hex{font-family:monospace;font-size:10px;background:#F3F4F6;border:1px solid #E5E7EB;border-radius:6px;padding:3px 7px;color:#374151;font-weight:700;transition:.15s}\n.pal-chip:hover .pal-hex{border-color:#FDBA74}\n.copy-hint{position:absolute;top:-8px;right:-8px;background:#0F172A;color:#fff;font-size:10px;font-weight:700;padding:3px 6px;border-radius:6px;opacity:0;transition:.2s;pointer-events:none}\n.pal-chip.copied .copy-hint{opacity:1}\n.pal-chip.copied .pal-hex{background:#0F172A;color:#fff;border-color:#0F172A}\n.copy-all{border:1.5px solid #E5E7EB;background:#fff;border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s}\n.copy-all:hover{background:#0F172A;color:#fff;border-color:#0F172A}\n#palToast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#0F172A;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:.25s;z-index:9999;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.2)}\n#palToast.show{opacity:1;transform:translateX(-50%) translateY(0)}\n<\/style>\n\n<div class=\"palettes-wrap\">\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Complementary \u2014 High contrast \u2022 Orange + Blue<\/span><button class=\"copy-all\" data-copy=\"#FFA500, #005AFF\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFA500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFA500\"><\/div><div class=\"pal-hex\">#FFA500<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#005AFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#005AFF\"><\/div><div class=\"pal-hex\">#005AFF<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Monochromatic \u2014 Same hue, different lightness<\/span><button class=\"copy-all\" data-copy=\"#FFA500, #CC8400, #996300, #664200, #332100\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFA500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFA500\"><\/div><div class=\"pal-hex\">#FFA500<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#CC8400\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#CC8400\"><\/div><div class=\"pal-hex\">#CC8400<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#996300\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#996300\"><\/div><div class=\"pal-hex\">#996300<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#664200\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#664200\"><\/div><div class=\"pal-hex\">#664200<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#332100\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#332100\"><\/div><div class=\"pal-hex\">#332100<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Triadic \u2014 Orange, Green, Purple<\/span><button class=\"copy-all\" data-copy=\"#FFA500, #00FF00, #800080\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFA500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFA500\"><\/div><div class=\"pal-hex\">#FFA500<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#00FF00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#00FF00\"><\/div><div class=\"pal-hex\">#00FF00<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#800080\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#800080\"><\/div><div class=\"pal-hex\">#800080<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Analogous \u2014 Yellow \u2192 Orange \u2192 Red<\/span><button class=\"copy-all\" data-copy=\"#FFCC00, #FFB800, #FFA500, #FF7F00, #FF5500\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFCC00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFCC00\"><\/div><div class=\"pal-hex\">#FFCC00<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFB800\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFB800\"><\/div><div class=\"pal-hex\">#FFB800<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFA500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFA500\"><\/div><div class=\"pal-hex\">#FFA500<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FF7F00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FF7F00\"><\/div><div class=\"pal-hex\">#FF7F00<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FF5500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FF5500\"><\/div><div class=\"pal-hex\">#FF5500<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Shades \u2014 True Orange + Black<\/span><button class=\"copy-all\" data-copy=\"#FFA500, #CC8400, #996300, #664200, #332100\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFA500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFA500\"><\/div><div class=\"pal-hex\">#FFA500<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#CC8400\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#CC8400\"><\/div><div class=\"pal-hex\">#CC8400<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#996300\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#996300\"><\/div><div class=\"pal-hex\">#996300<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#664200\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#664200\"><\/div><div class=\"pal-hex\">#664200<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#332100\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#332100\"><\/div><div class=\"pal-hex\">#332100<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Tints \u2014 True Orange + White<\/span><button class=\"copy-all\" data-copy=\"#FFA500, #FFB833, #FFCC66, #FFE699, #FFF5CC, #FFF5E6\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFB833\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFB833\"><\/div><div class=\"pal-hex\">#FFB833<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFCC66\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFCC66\"><\/div><div class=\"pal-hex\">#FFCC66<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFE699\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFE699\"><\/div><div class=\"pal-hex\">#FFE699<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFF5CC\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFF5CC\"><\/div><div class=\"pal-hex\">#FFF5CC<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFF5E6\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFF5E6\"><\/div><div class=\"pal-hex\">#FFF5E6<\/div><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div id=\"palToast\">Copied to clipboard!<\/div>\n\n<script>\n(function(){\n  const toast=document.getElementById('palToast');\n  let toastTimeout;\n  \n  function showToast(text){\n    if(toastTimeout) clearTimeout(toastTimeout);\n    toast.textContent='Copied '+text+'!';\n    toast.classList.add('show');\n    toastTimeout = setTimeout(()=>toast.classList.remove('show'),1600);\n  }\n  \n  function doCopy(el,text){\n    navigator.clipboard.writeText(text).then(()=>{\n      el.classList.add('copied');\n      showToast(text);\n      setTimeout(()=>el.classList.remove('copied'),1200);\n    }).catch(err => console.error('Failed to copy:', err));\n  }\n  \n  document.querySelectorAll('.pal-chip').forEach(chip=>{\n    chip.addEventListener('click',()=>doCopy(chip,chip.dataset.copy));\n  });\n  \n  document.querySelectorAll('.copy-all').forEach(btn=>{\n    btn.addEventListener('click',()=>{\n      const txt=btn.dataset.copy;\n      navigator.clipboard.writeText(txt).then(()=>{\n        const orig=btn.textContent;\n        btn.textContent='\u2713 Copied!';\n        showToast('palette');\n        setTimeout(()=>btn.textContent=orig,1500);\n      }).catch(err => console.error('Failed to copy:', err));\n    });\n  });\n})();\n<\/script>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-e328703\" data-block-id=\"e328703\"><style>.stk-e328703 {margin-bottom:4px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">SHADES &amp; VARIATIONS<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-47464ec\" id=\"popular\" data-block-id=\"47464ec\"><style>.stk-47464ec {margin-bottom:14px !important;}<\/style><h2 class=\"stk-block-heading__text\">MOST POPULAR SHADES OF ORANGE<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-930de17\" data-block-id=\"930de17\"><style>.stk-930de17 .stk-block-subtitle__text{font-size:12px !important;}@media screen and (max-width:999px){.stk-930de17 .stk-block-subtitle__text{font-size:12px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">CLICK THE SWATCHES TO BE TAKEN TO FULL COLOR GUIDES <\/p><\/div>\n\n\n\n<style>\n.guides-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:1100px;margin:0 auto;font-family:Inter,sans-serif}\n@media(max-width:1000px){.guides-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.guides-grid{grid-template-columns:repeat(2,1fr)}}\n.g-card{border:1.5px solid #E5E7EB;background:#fff;border-radius:16px;padding:10px;display:block;transition:.15s;position:relative}\n.g-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.07);border-color:#FDBA74}\n.g-swatch{height:68px;border-radius:10px;border:1px solid rgba(0,0,0,.06)}\n.g-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}\n.g-name{font-size:13px;font-weight:700;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.g-arrow{font-size:14px;color:#9CA3AF;transition:.15s;flex-shrink:0;margin-left:6px}\n.g-card:hover .g-arrow{color:#0F172A;transform:translateX(2px)}\n.g-hex{font-family:monospace;font-size:10.5px;background:#F3F4F6;border:1px solid #E5E7EB;border-radius:6px;padding:2px 6px;color:#374151;display:inline-block;margin-top:4px;cursor:pointer;transition:.15s}\n.g-hex:hover{background:#0F172A;color:#fff;border-color:#0F172A}\n.copy-hint{position:absolute;top:14px;right:14px;background:#0F172A;color:#fff;font-size:10px;font-weight:700;padding:3px 6px;border-radius:6px;opacity:0;transition:.2s;pointer-events:none}\n.g-card.copied .copy-hint{opacity:1}\n#orangeToast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#0F172A;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:.25s;z-index:9999;pointer-events:none}\n#orangeToast.show{opacity:1;transform:translateX(-50%) translateY(0)}\n<\/style>\n\n<div class=\"guides-grid\" id=\"guidesGrid\"><\/div>\n\n\n<script>\n(function(){\n  const guides=[\n    {name:'Tangerine',hex:'#F28500',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/tangerine\/'},\n    {name:'Burnt Orange',hex:'#CC5500',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/burnt-orange\/'},\n    {name:'Apricot',hex:'#FBCEB1',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/apricot\/'},\n    {name:'Persimmon',hex:'#EC5800',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/persimmon\/'},\n    {name:'Pumpkin',hex:'#FF7518',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/pumpkin\/'},\n    {name:'Rust',hex:'#B7410E',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/rust\/'},\n    {name:'Terracotta',hex:'#E2725B',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/terracotta\/'},\n    {name:'Melon',hex:'#FDBCB4',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/melon\/'},\n    {name:'Carrot Orange',hex:'#ED9121',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/carrot-orange\/'},\n    {name:'Papaya',hex:'#FF5722',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/papaya\/'},\n    {name:'Sunset Orange',hex:'#FE4C40',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/sunset-orange\/'},\n    {name:'Tiger Orange',hex:'#FC6700',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/tiger-orange\/'},\n    {name:'Nectarine',hex:'#FFB347',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/nectarine\/'},\n    {name:'Cider',hex:'#BFA37A',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/cider\/'},\n    {name:'Ginger',hex:'#B06500',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/ginger\/'},\n    {name:'Light Orange',hex:'#FFD580',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/light-orange\/'},\n    {name:'Hot Orange',hex:'#FF6600',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/hot-orange\/'},\n    {name:'Peach',hex:'#FFE5B4',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/peach\/'},\n  ];\n  const grid=document.getElementById('guidesGrid');\n  const toast=document.getElementById('orangeToast');\n  function showToast(t){toast.textContent='Copied '+t+'!';toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),1600);}\n  guides.forEach(g=>{\n    const card=document.createElement('div');\n    card.className='g-card';\n    card.innerHTML=`<span class=\"copy-hint\">Copied!<\/span>\n      <a href=\"${g.url}\" target=\"_blank\" rel=\"noopener\" style=\"text-decoration:none;color:inherit;display:block\">\n        <div class=\"g-swatch\" style=\"background:${g.hex}\"><\/div>\n        <div class=\"g-row\"><div class=\"g-name\">${g.name}<\/div><div class=\"g-arrow\">\u2192<\/div><\/div>\n      <\/a>\n      <div class=\"g-hex\">${g.hex.toLowerCase()}<\/div>`;\n    const hexEl=card.querySelector('.g-hex');\n    hexEl.addEventListener('click',()=>{\n      navigator.clipboard.writeText(g.hex);\n      card.classList.add('copied');\n      showToast(g.hex);\n      setTimeout(()=>card.classList.remove('copied'),1200);\n    });\n    grid.appendChild(card);\n  });\n})();\n<\/script>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:63px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-86c0a85\" data-block-id=\"86c0a85\"><style>.stk-86c0a85 {margin-bottom:9px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">ORANGE COLOR NAMES, HEX CODES &amp; RGB CODES<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-ee3711d\" id=\"library\" data-block-id=\"ee3711d\"><h2 class=\"stk-block-heading__text\">75+&nbsp;SHADES OF ORANGE: COMPLETE HEX &amp; RGB LIST<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-af134e1\" data-block-id=\"af134e1\"><style>.stk-af134e1 .stk-block-subtitle__text{font-size:12px !important;}@media screen and (max-width:999px){.stk-af134e1 .stk-block-subtitle__text{font-size:12px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">CLICK ANY HEX OR RGB TO COPY<\/p><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&amp;family=Inter:wght@500;700&amp;display=swap\" rel=\"stylesheet\">\n<style>\n.big-table-wrap{max-width:1100px;margin:0 auto;font-family:Inter,sans-serif}\n.big-kicker{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6B7280;margin-bottom:8px}\n.big-title{font-family:Anton,sans-serif;font-size:32px;line-height:.95;text-transform:uppercase;color:#0F172A;margin-bottom:12px}\n.big-sub{font-size:13px;color:#6B7280;margin-bottom:14px}\n.big-controls{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}\n.big-search{flex:1;min-width:240px;padding:12px 14px 12px 40px;border:1.5px solid #E5E7EB;border-radius:12px;outline:none;background:#fff url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%236B7280\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"6\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>') 12px 50% no-repeat}\n.big-count{font-size:12px;color:#6B7280;padding:12px}\n.color-table-modern{width:100%;border-collapse:separate;border-spacing:0 6px}\n.color-table-modern thead th{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#6B7280;padding:0 12px 6px;font-weight:700;text-align:left;background:#fff;border-bottom:2px solid #E5E7EB}\n.color-table-modern tbody tr{background:var(--bg);transition:.15s;border-radius:12px}\n.color-table-modern tbody tr:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15)}\n.color-table-modern td{padding:12px 16px;border:0;background:transparent;color:var(--text-color,#fff)}\n.color-table-modern td:first-child{border-radius:12px 0 0 12px}\n.color-table-modern td:last-child{border-radius:0 12px 12px 0}\n.cell-swatch{display:flex;align-items:center;gap:10px}\n.cell-name{font-weight:700;font-size:17px;color:var(--text-color,#fff)}\n.pill{font-family:monospace;font-size:13px;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:4px 10px;display:inline-block;cursor:pointer;transition:.2s;color:var(--text-color,#fff)}\n.pill:hover{background:rgba(255,255,255,.4);transform:scale(1.02)}\n#orangeToast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#0F172A;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:.25s;z-index:9999;pointer-events:none}\n#orangeToast.show{opacity:1;transform:translateX(-50%) translateY(0)}\n@media(max-width:700px){.color-table-modern thead{display:none}.color-table-modern td{display:block;border:0;padding:8px 12px;border-radius:0!important}.color-table-modern tbody tr{display:block;border-radius:12px;padding:4px 0;margin-bottom:8px}.cell-swatch{margin-bottom:2px}}\n<\/style>\n\n<div class=\"big-table-wrap\">\n  <div class=\"big-controls\">\n    <input class=\"big-search\" id=\"bigSearch\" placeholder=\"Search colors...\" type=\"text\">\n    <span class=\"big-count\" id=\"bigCount\">122 colors<\/span>\n  <\/div>\n\n  <table class=\"color-table-modern\" id=\"colorTable\">\n    <thead>\n      <tr><th style=\"width:36%\">Color<\/th><th>Hex<\/th><th>RGB<\/th><\/tr>\n    <\/thead>\n    <tbody>\n      <tr style=\"--bg:#8A3324;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Burnt Amber<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#8A3324\">#8A3324<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(138,51,36)\">rgb(138,51,36)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#985629;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Red Fox Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#985629\">#985629<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(152,86,41)\">rgb(152,86,41)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#B06500;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Ginger Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#B06500\">#B06500<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(176,101,0)\">rgb(176,101,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#B25A38;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Tawny Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#B25A38\">#B25A38<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(178,90,56)\">rgb(178,90,56)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#B6481C;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Red Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#B6481C\">#B6481C<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(182,72,28)\">rgb(182,72,28)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#B7410E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Rust<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#B7410E\">#B7410E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(183,65,14)\">rgb(183,65,14)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#BD5745;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Mecca Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#BD5745\">#BD5745<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(189,87,69)\">rgb(189,87,69)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#C0362C;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Golden Gate Bridge Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#C0362C\">#C0362C<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(192,54,44)\">rgb(192,54,44)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#C04000;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Mahogany Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#C04000\">#C04000<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(192,64,0)\">rgb(192,64,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#C35214;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Alloy Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#C35214\">#C35214<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(195,82,20)\">rgb(195,82,20)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D78C3D;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Rustic Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D78C3D\">#D78C3D<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(215,140,61)\">rgb(215,140,61)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#CC7711;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Tree Sap Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#CC7711\">#CC7711<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(204,119,17)\">rgb(204,119,17)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#CD7F32;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Bronze Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#CD7F32\">#CD7F32<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(205,127,50)\">rgb(205,127,50)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#BB772E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Copper Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#BB772E\">#BB772E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(187,119,46)\">rgb(187,119,46)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#DAA520;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Goldenrod Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#DAA520\">#DAA520<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(218,165,32)\">rgb(218,165,32)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#C99700;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Ochre Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#C99700\">#C99700<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(201,151,0)\">rgb(201,151,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#C9995D;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Vintage Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#C9995D\">#C9995D<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(201,153,93)\">rgb(201,153,93)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#CD946A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Faded Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#CD946A\">#CD946A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(205,148,106)\">rgb(205,148,106)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D8A175;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cider Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D8A175\">#D8A175<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(216,161,117)\">rgb(216,161,117)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D99058;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Persian Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D99058\">#D99058<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(217,144,88)\">rgb(217,144,88)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D99151;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Butterscotch Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D99151\">#D99151<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(217,145,81)\">rgb(217,145,81)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E89362;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Squash Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E89362\">#E89362<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(232,147,98)\">rgb(232,147,98)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#DF9166;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Melon Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#DF9166\">#DF9166<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(223,145,102)\">rgb(223,145,102)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#DB804E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dull Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#DB804E\">#DB804E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(219,128,78)\">rgb(219,128,78)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E17E45;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Yam Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E17E45\">#E17E45<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(225,126,69)\">rgb(225,126,69)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D76B00;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Orange Spice Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D76B00\">#D76B00<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(215,107,0)\">rgb(215,107,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D16002;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Marmalade<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D16002\">#D16002<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(209,96,2)\">rgb(209,96,2)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E06E04;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Greek Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E06E04\">#E06E04<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(224,110,4)\">rgb(224,110,4)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E77D22;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pepper Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E77D22\">#E77D22<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(231,125,34)\">rgb(231,125,34)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E89149;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Jasper Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E89149\">#E89149<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(232,145,73)\">rgb(232,145,73)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E89611;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Gamboge<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E89611\">#E89611<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(232,150,17)\">rgb(232,150,17)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EAA221;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Marigold Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EAA221\">#EAA221<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(234,162,33)\">rgb(234,162,33)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E8AC41;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Hunyadi Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E8AC41\">#E8AC41<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(232,172,65)\">rgb(232,172,65)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EABD8C;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Topaz Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EABD8C\">#EABD8C<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(234,189,140)\">rgb(234,189,140)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EDC9AF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Desert Sand Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EDC9AF\">#EDC9AF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,201,175)\">rgb(237,201,175)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F6CBA0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Light Copper Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F6CBA0\">#F6CBA0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(246,203,160)\">rgb(246,203,160)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FBCEB1;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Apricot Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FBCEB1\">#FBCEB1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(251,206,177)\">rgb(251,206,177)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FED8B1;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Light Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FED8B1\">#FED8B1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(254,216,177)\">rgb(254,216,177)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F5DEB3;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Wheat Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F5DEB3\">#F5DEB3<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(245,222,179)\">rgb(245,222,179)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FEE8D6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Orange Paper Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FEE8D6\">#FEE8D6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(254,232,214)\">rgb(254,232,214)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FCBE85;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Baby Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FCBE85\">#FCBE85<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(252,190,133)\">rgb(252,190,133)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FAB972;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Calm Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FAB972\">#FAB972<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(250,185,114)\">rgb(250,185,114)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F4AB6A;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Aesthetic Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F4AB6A\">#F4AB6A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(244,171,106)\">rgb(244,171,106)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FABA5F;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Rajah<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FABA5F\">#FABA5F<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(250,186,95)\">rgb(250,186,95)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FEBA4F;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pastel Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FEBA4F\">#FEBA4F<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(254,186,79)\">rgb(254,186,79)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FDAE44;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Safflower Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FDAE44\">#FDAE44<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(253,174,68)\">rgb(253,174,68)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#ED9121;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Carrot Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#ED9121\">#ED9121<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,145,33)\">rgb(237,145,33)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F78702;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Tangerine<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F78702\">#F78702<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(247,135,2)\">rgb(247,135,2)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF8000;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pure Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF8000\">#FF8000<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,128,0)\">rgb(255,128,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF6E00;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Hot Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF6E00\">#FF6E00<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,110,0)\">rgb(255,110,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF8C00;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF8C00\">#FF8C00<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,140,0)\">rgb(255,140,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF9913;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Goldfish Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF9913\">#FF9913<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,153,19)\">rgb(255,153,19)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF9F00;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Orange Peel<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF9F00\">#FF9F00<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,159,0)\">rgb(255,159,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFAD00;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Neon Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFAD00\">#FFAD00<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,173,0)\">rgb(255,173,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFBD31;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Honey Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFBD31\">#FFBD31<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,189,49)\">rgb(255,189,49)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFC82A;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Bumblebee Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFC82A\">#FFC82A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,200,42)\">rgb(255,200,42)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFCA4B;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Mimosa Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFCA4B\">#FFCA4B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,202,75)\">rgb(255,202,75)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFC87C;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Topaz Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFC87C\">#FFC87C<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,200,124)\">rgb(255,200,124)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFCC99;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Peach Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFCC99\">#FFCC99<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,204,153)\">rgb(255,204,153)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFDFBF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pale Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFDFBF\">#FFDFBF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,223,191)\">rgb(255,223,191)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFF1D7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Papaya Whip<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFF1D7\">#FFF1D7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,241,215)\">rgb(255,241,215)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF9966;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Atomic Tangerine<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF9966\">#FF9966<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,153,102)\">rgb(255,153,102)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E27A53;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dusty Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E27A53\">#E27A53<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(226,122,83)\">rgb(226,122,83)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E67451;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Sunrise Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E67451\">#E67451<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(230,116,81)\">rgb(230,116,81)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E2725B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Terracotta<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E2725B\">#E2725B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(226,114,91)\">rgb(226,114,91)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D75341;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Coral<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D75341\">#D75341<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(215,83,65)\">rgb(215,83,65)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E34A27;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Flame<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E34A27\">#E34A27<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(227,74,39)\">rgb(227,74,39)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D44500;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Syracuse Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D44500\">#D44500<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(212,69,0)\">rgb(212,69,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#CC5500;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Burnt Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#CC5500\">#CC5500<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(204,85,0)\">rgb(204,85,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#CF5B2E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Medium Vermilion<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#CF5B2E\">#CF5B2E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(207,91,46)\">rgb(207,91,46)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D15837;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Koi Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D15837\">#D15837<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(209,88,55)\">rgb(209,88,55)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EB6841;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Chinese Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EB6841\">#EB6841<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(235,104,65)\">rgb(235,104,65)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF4500;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Orange-Red<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF4500\">#FF4500<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,69,0)\">rgb(255,69,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FD652D;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dragon Fire Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FD652D\">#FD652D<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(253,101,45)\">rgb(253,101,45)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF6E4A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Outrageous Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF6E4A\">#FF6E4A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,110,74)\">rgb(255,110,74)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF7F50;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Coral<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF7F50\">#FF7F50<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,127,80)\">rgb(255,127,80)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FF8066;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Salmon Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FF8066\">#FF8066<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,128,102)\">rgb(255,128,102)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FD5E53;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Sunset Orange<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FD5E53\">#FD5E53<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(253,94,83)\">rgb(253,94,83)<\/span><\/td><\/tr>\n    <\/tbody>\n  <\/table>\n<\/div>\n\n<script>\n(function(){\n  const toast=document.getElementById('orangeToast');\n  let toastTimeout;\n  \n  function showToast(t){\n    if(toastTimeout) clearTimeout(toastTimeout);\n    toast.textContent='Copied '+t+'!';\n    toast.classList.add('show');\n    toastTimeout = setTimeout(()=>toast.classList.remove('show'),1600);\n  }\n  \n  \/\/ copy functionality\n  document.querySelectorAll('.pill').forEach(p=>{\n    p.addEventListener('click', function(e){\n      e.stopPropagation();\n      const copyText = this.dataset.copy;\n      if(copyText) {\n        navigator.clipboard.writeText(copyText).then(()=>{\n          showToast(copyText);\n          const orig=this.textContent;\n          this.textContent='\u2713 Copied!';\n          setTimeout(()=>this.textContent=orig,1000);\n        }).catch(err => console.error('Failed to copy:', err));\n      }\n    });\n  });\n  \n  \/\/ search filter\n  const input=document.getElementById('bigSearch');\n  const count=document.getElementById('bigCount');\n  if(input && count) {\n    const rows=[...document.querySelectorAll('#colorTable tbody tr')];\n    input.addEventListener('input',()=>{\n      const q=input.value.toLowerCase().trim();\n      let vis=0;\n      rows.forEach(r=>{\n        const show=r.textContent.toLowerCase().includes(q);\n        r.style.display=show?'':'none';\n        if(show) vis++;\n      });\n      count.textContent=vis+' colors';\n    });\n  }\n})();\n<\/script>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-c627862\" data-block-id=\"c627862\"><style>.stk-c627862 {margin-bottom:0px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">INTERACTIVE TOOL<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-e231caf\" id=\"generator\" data-block-id=\"e231caf\"><style>.stk-e231caf {margin-bottom:8px !important;}<\/style><h2 class=\"stk-block-heading__text\">ORANGE COLOR PALETTE GENERATOR<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-e3c9a55\" data-block-id=\"e3c9a55\"><style>.stk-e3c9a55 .stk-block-subtitle__text{font-size:12px !important;}@media screen and (max-width:999px){.stk-e3c9a55 .stk-block-subtitle__text{font-size:12px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">PICK ANY COLOR AND INSTANTLY GENERATE MATCHING COLOR COMBINATIONS<\/p><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&#038;family=Inter:wght@500;700&#038;display=swap\" rel=\"stylesheet\">\n<style>\n.gen-wrap{max-width:900px;margin:2.5rem auto;font-family:Inter,sans-serif;border:1.5px solid #E5E7EB;border-radius:20px;background:#fff;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.05)}\n.gen-input-row{display:flex;gap:12px;align-items:center;background:#F9FAFB;border:1.5px solid #E5E7EB;border-radius:14px;padding:12px;flex-wrap:wrap}\n.gen-color-input{width:64px;height:64px;border:none;border-radius:12px;cursor:pointer;padding:0}\n.gen-hex-pill{font-family:monospace;font-size:14px;font-weight:700;background:#fff;border:1.5px solid #E5E7EB;border-radius:10px;padding:8px 12px}\n.gen-preview{margin-top:14px;border-radius:14px;padding:18px;color:#000;text-align:center;transition:.2s}\n.gen-values{font-family:monospace;font-size:12px;background:rgba(0,0,0,.1);display:inline-block;padding:8px 12px;border-radius:10px;margin-top:10px}\n.gen-row{margin:18px 0}\n.gen-row-title{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6B7280;border-bottom:1.5px solid #F3F4F6;padding-bottom:6px;margin-bottom:10px;text-align:center}\n.gen-swatches{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}\n.g-swatch-card{border:1.5px solid #E5E7EB;border-radius:14px;padding:8px;background:#fff;width:82px;text-align:center;transition:.15s;position:relative}\n.g-swatch-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.08)}\n.g-swatch{height:52px;border-radius:10px;border:1px solid rgba(0,0,0,.06);margin-bottom:6px}\n.g-hex-small{font-family:monospace;font-size:10px;background:#F3F4F6;border-radius:6px;padding:2px 5px;display:inline-block;cursor:pointer;transition:.15s}\n.g-hex-small:hover{background:#0F172A;color:#fff}\n.copy-badge{position:absolute;top:6px;right:6px;background:#0F172A;color:#fff;font-size:9px;font-weight:800;padding:3px 6px;border-radius:6px;opacity:0;transition:.2s;pointer-events:none}\n.g-swatch-card.copied .copy-badge{opacity:1}\n.gen-download{margin-top:18px;text-align:center;background:#F8FAFC;border:2px dashed #CBD5E1;border-radius:14px;padding:14px}\n.gen-btn{background:#0F172A;color:#fff;border:none;padding:10px 18px;border-radius:999px;font-weight:700;cursor:pointer}\n.gen-btn:hover{background:#000}\n#orangeToast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#0F172A;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:.25s;z-index:9999;pointer-events:none}\n#orangeToast.show{opacity:1;transform:translateX(-50%) translateY(0)}\n<\/style>\n\n<div class=\"gen-wrap\">\n  <div class=\"gen-input-row\">\n    <input type=\"color\" id=\"baseColorNew\" value=\"#FFA500\" class=\"gen-color-input\">\n    <div class=\"gen-hex-pill\" id=\"baseHexNew\">#FFA500<\/div>\n    <div style=\"font-size:12px;color:#6B7280\">Click the square to pick any orange \u2014 palettes update live. Click any hex to copy.<\/div>\n  <\/div>\n\n  <div class=\"gen-preview\" id=\"previewBoxNew\">\n    <div style=\"font-weight:700\">This Is What Your Chosen Color Looks Like As A Background<\/div>\n    <div class=\"gen-values\"><span id=\"hexValNew\">#FFA500<\/span> \u2022 <span id=\"rgbValNew\"><\/span> \u2022 <span id=\"hslValNew\"><\/span><\/div>\n  <\/div>\n\n  <div id=\"paletteResultsNew\"><\/div>\n\n  <div class=\"gen-download\">\n    <button class=\"gen-btn\" id=\"downloadBtnNew\">\u2b07 Download Palette as PNG<\/button>\n  <\/div>\n<\/div>\n\n<div id=\"orangeToast\">Copied!<\/div>\n\n<script>\n(function(){\nconst $=s=>document.getElementById(s);\nconst toast=$('orangeToast');\nlet toastTimeout;\n\nfunction showToast(t){\n  if(toastTimeout) clearTimeout(toastTimeout);\n  toast.textContent='Copied '+t+'!';\n  toast.classList.add('show');\n  toastTimeout = setTimeout(()=>toast.classList.remove('show'),1600);\n}\n\nfunction hexToHSL(hex){let r=parseInt(hex.slice(1,3),16)\/255,g=parseInt(hex.slice(3,5),16)\/255,b=parseInt(hex.slice(5,7),16)\/255;let max=Math.max(r,g,b),min=Math.min(r,g,b),h,s,l=(max+min)\/2;if(max==min){h=s=0}else{let d=max-min;s=l>0.5?d\/(2-max-min):d\/(max+min);switch(max){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*=60;}return{h,s,l};}\nfunction HSLToHex(h,s,l){function hue2rgb(p,q,t){if(t<0)t+=1;if(t>1)t-=1;if(t<1\/6)return p+(q-p)*6*t;if(t<1\/2)return q;if(t<2\/3)return p+(q-p)*(2\/3-t)*6;return p;}let r,g,b;if(s==0){r=g=b=l;}else{let q=l<0.5?l*(1+s):l+s-l*s;let p=2*l-q;r=hue2rgb(p,q,(h\/360)+1\/3);g=hue2rgb(p,q,(h\/360));b=hue2rgb(p,q,(h\/360)-1\/3);}let toHex=x=>{let hex=Math.round(x*255).toString(16);return hex.length==1?'0'+hex:hex;};return'#'+toHex(r)+toHex(g)+toHex(b);}\nfunction hexToRGB(hex){return{r:parseInt(hex.slice(1,3),16),g:parseInt(hex.slice(3,5),16),b:parseInt(hex.slice(5,7),16)}}\nfunction contrast(r,g,b){return (r*299+g*587+b*114)\/1000>150?'#0F172A':'#fff';}\n\nfunction build(){\n  const base=$('baseColorNew').value.toUpperCase();\n  $('baseHexNew').textContent=base;\n  const rgb=hexToRGB(base); const hsl=hexToHSL(base);\n  const pb=$('previewBoxNew'); pb.style.background=base; pb.style.color=contrast(rgb.r,rgb.g,rgb.b);\n  $('hexValNew').textContent=base; $('rgbValNew').textContent=`rgb(${rgb.r},${rgb.g},${rgb.b})`; $('hslValNew').textContent=`hsl(${Math.round(hsl.h)},${Math.round(hsl.s*100)}%,${Math.round(hsl.l*100)}%)`;\n\n  const pal=[\n    {title:'Complementary', colors:[base,HSLToHex((hsl.h+180)%360,hsl.s,hsl.l)]},\n    {title:'Analogous', colors:[base,HSLToHex((hsl.h+30)%360,hsl.s,hsl.l),HSLToHex((hsl.h+330)%360,hsl.s,hsl.l)]},\n    {title:'Triadic', colors:[base,HSLToHex((hsl.h+120)%360,hsl.s,hsl.l),HSLToHex((hsl.h+240)%360,hsl.s,hsl.l)]},\n    {title:'Monochromatic Shades', colors:[base,HSLToHex(hsl.h,hsl.s,Math.min(hsl.l+0.2,1)),HSLToHex(hsl.h,hsl.s,hsl.l),HSLToHex(hsl.h,hsl.s,Math.max(hsl.l-0.2,0))]},\n    {title:'Shades & Tints', colors:[HSLToHex(hsl.h,hsl.s,Math.min(hsl.l+0.4,1)),HSLToHex(hsl.h,hsl.s,Math.min(hsl.l+0.2,1)),base,HSLToHex(hsl.h,hsl.s,Math.max(hsl.l-0.2,0)),HSLToHex(hsl.h,hsl.s,Math.max(hsl.l-0.4,0))]},\n  ];\n  const container=$('paletteResultsNew'); container.innerHTML='';\n  pal.forEach(group=>{\n    const row=document.createElement('div'); row.className='gen-row';\n    row.innerHTML=`<div class=\"gen-row-title\">${group.title}<\/div><div class=\"gen-swatches\"><\/div>`;\n    const swWrap=row.querySelector('.gen-swatches');\n    group.colors.forEach(c=>{\n      const card=document.createElement('div'); card.className='g-swatch-card';\n      card.innerHTML=`<span class=\"copy-badge\">Copied!<\/span><div class=\"g-swatch\" style=\"background:${c}\"><\/div><div class=\"g-hex-small\" data-copy=\"${c}\">${c}<\/div>`;\n      const trigger=()=>{navigator.clipboard.writeText(c);card.classList.add('copied');showToast(c);setTimeout(()=>card.classList.remove('copied'),1200);};\n      card.querySelector('.g-hex-small').addEventListener('click',trigger);\n      card.querySelector('.g-swatch').addEventListener('click',trigger);\n      swWrap.appendChild(card);\n    });\n    container.appendChild(row);\n  });\n}\n\n$('baseColorNew').addEventListener('input',build);\nbuild();\n\n\/\/ Download PNG\n$('downloadBtnNew').addEventListener('click',()=>{\n  const base=$('baseColorNew').value.toUpperCase();\n  const canvas=document.createElement('canvas'); canvas.width=1000; canvas.height=820;\n  const ctx=canvas.getContext('2d'); \n  ctx.fillStyle='#ffffff'; ctx.fillRect(0,0,1000,820);\n  \n  \/\/ Header with site URL\n  ctx.fillStyle='#0F172A'; ctx.font='bold 24px Anton, Inter'; ctx.fillText('COLOR PALETTES - '+base,30,50);\n  ctx.fillStyle='#6B7280'; ctx.font='11px Inter'; ctx.fillText('Base: '+base+' \u2022 Generated by Notebook & Penguin',30,70);\n  \n  let y=110;\n  document.querySelectorAll('.gen-row').forEach(row=>{\n    ctx.fillStyle='#6B7280'; ctx.font='700 12px Inter'; ctx.fillText(row.querySelector('.gen-row-title').textContent.toUpperCase(),30,y); y+=16;\n    let x=30;\n    row.querySelectorAll('.g-swatch-card').forEach(card=>{\n      const hex=card.querySelector('.g-hex-small').dataset.copy;\n      ctx.fillStyle=hex; \n      ctx.beginPath(); ctx.roundRect(x,y,90,54,10); ctx.fill();\n      ctx.strokeStyle='rgba(0,0,0,.08)'; ctx.stroke();\n      ctx.fillStyle='#0F172A'; ctx.font='700 11px monospace'; ctx.fillText(hex,x+4,y+68);\n      x+=100;\n    });\n    y+=90;\n  });\n  \n  \/\/ Footer branding\n  y+=20;\n  ctx.fillStyle='#F1F5F9'; ctx.fillRect(0,740,1000,80);\n  ctx.fillStyle='#0F172A'; ctx.font='bold 13px Inter'; ctx.textAlign='center';\n  ctx.fillText('Generated by Notebook & Penguin',500,770);\n  ctx.fillStyle='#64748B'; ctx.font='11px Inter'; ctx.fillText('www.notebookandpenguin.com',500,788);\n  ctx.textAlign='left';\n  \n  const a=document.createElement('a'); \n  a.download=`palette-${base.slice(1)}-notebookandpenguin.png`; \n  a.href=canvas.toDataURL('image\/png'); \n  a.click();\n  showToast('PNG Downloaded');\n});\n})();\n<\/script>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-a16afc8\" data-block-id=\"a16afc8\"><style>.stk-a16afc8 {margin-bottom:2px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">COLOR CARDS TO MIX, MATCH &amp; PLAN<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-9c36502\" id=\"card-deck\" data-block-id=\"9c36502\"><h2 class=\"stk-block-heading__text\">ESSENTIAL COLOR CARD DECK<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-a59ad76\" data-block-id=\"a59ad76\"><style>.stk-a59ad76 {margin-bottom:0px !important;}.stk-a59ad76-column{max-width:932px !important;min-width:auto !important;}.stk-a59ad76 > .stk-separator__bottom .stk-separator__wrapper{height:387px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-a59ad76-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-8434637\" data-v=\"4\" data-block-id=\"8434637\"><style>.stk-8434637 {align-self:center !important;}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-8434637-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-8434637-inner-blocks\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/m.media-amazon.com\/images\/I\/51dfRbO88WL._SL500_.jpg\" alt=\"\"\/><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-90a132a\" data-v=\"4\" data-block-id=\"90a132a\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-90a132a-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-90a132a-inner-blocks\">\n<p class=\"has-text-align-right has-small-font-size wp-block-paragraph\"><strong>#AD<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">200 Color Cards + color guide<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"> Includes Hues, Tints, Tones, Shades &amp; Values with RGB \/ CMYK \/ HEX codes. perfect for mixing, matching, and planning hues, tints, tones, and shades hands-on<\/p>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-a0ed039\" data-block-id=\"a0ed039\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-fe8cdb0\" data-block-id=\"fe8cdb0\"><style>.stk-fe8cdb0 , .stk-fe8cdb0 .stk-button{width:100% !important;}.stk-fe8cdb0 {flex:1 0 var(--stk-button-group-flex-wrap, 0) !important;}.stk-fe8cdb0 .stk-button{background:#f5ac36 !important;}.stk-fe8cdb0 .stk-button__inner-text{color:#000000 !important;}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/amzn.to\/44FIOXw\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-text-color stk-button__inner-text\"><strong>Learn More -&gt;<\/strong><\/span><\/a><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-0242530\" data-block-id=\"0242530\"><style>.stk-0242530 {margin-bottom:0px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">PIN THE MOST POPULAR ORANGE COLORS<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-5ccd651\" id=\"pinterest\" data-block-id=\"5ccd651\"><h2 class=\"stk-block-heading__text\">SAVE FOR LATER<\/h2><\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"683\" height=\"1024\" src=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/orange-hex-color-code-swatches-683x1024.png\" alt=\"Orange color swatches with orange color names and hex codes - Infographic\" class=\"wp-image-3755\" style=\"width:500px\" srcset=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/orange-hex-color-code-swatches-683x1024.png 683w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/orange-hex-color-code-swatches-200x300.png 200w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/orange-hex-color-code-swatches-800x1200.png 800w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/orange-hex-color-code-swatches-500x750.png 500w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/orange-hex-color-code-swatches-768x1152.png 768w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/orange-hex-color-code-swatches.png 1000w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-e20b98f\" data-block-id=\"e20b98f\"><style>.stk-e20b98f {margin-bottom:3px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">UNDERSTANDING COLOR CODES<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-cffc6de learn\" id=\"learn\" data-block-id=\"cffc6de\"><h2 class=\"stk-block-heading__text\">LEARN ABOUT ORANGE COLOR CODES<\/h2><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Orange is a secondary color that is created by mixing red and yellow together.  <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/secondary-colors\/\"><strong>Learn all about secondary colors here!<\/strong><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In color and design, hex codes are used to specify specific colors depending on the amount of red, green, and blue that they contain.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hex codes are displayed in the following format: #RRGGBB. <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As mentioned, orange is made by combining <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/red-color-codes\/\">red<\/a> and yellow. And of course, <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/yellow-color-codes\/\">yellow is created by combining green and red<\/a>. Orange has no blue so, for true orange, there is no blue within the orange color code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-left\">The orange hex code is <strong>#FFA500<\/strong>.<\/h3>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left\">Orange RGB Codes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">RGB color codes are similar to hex codes because they also specify how much red, green, and blue are contained within a specific color.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>RGB color codes are displayed in the following format: RGB(RR,GG,BB)<\/strong>.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-left\">The Orange RGB code is RGB(255, 165, 0)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Because RGB codes use numbers between 0 and 255 to specify how much red, green, and blue are within that color, you will see that in the orange RBG code red is completely saturated while <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/green-color-codes\/\"><strong>green is found in a smaller amount<\/strong><\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/amber-color-codes\/\"><strong>By combining red and yellow with more yellow, you create amber!<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Is Orange So Popular?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When it comes to <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/colors-and-emotions-infographic\/\"><strong>color psychology and how colors influence people&#8217;s emotions<\/strong><\/a>, it is well-known that the color <strong>orange is associated with enthusiasm, energy, friendliness, confidence, warmth, and creativity.  <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because of this, orange is a very popular color choice for everything from home decor to logos. In fact, orange is <strong>one of the most commonly used colors in branding and marketing<\/strong> because it is known to evoke feelings of fun and affordability.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-8a350bd\" data-block-id=\"8a350bd\"><style>.stk-8a350bd {margin-bottom:3px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">NEED MORE IDEAS &amp; GUIDES?<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-f7df8d5\" id=\"resources\" data-block-id=\"f7df8d5\"><h2 class=\"stk-block-heading__text\">RESOURCES<\/h2><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Orange can be used in so many different ways and can create so many different moods!  If you would like more ideas on how to use orange then check out the following resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-and-orange-color-palettes\/\">Blue And Orange Color Palettes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/orange-color-palettes\/\">Vibrant Orange Color Palettes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/russet-color\/\">The Complete Russett Color Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-palette-library-search-by-color\/\">Color Palette Library<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-69c0cda\" data-block-id=\"69c0cda\"><style>.stk-69c0cda {margin-bottom:0px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">PRINTABLE PDF &#8211; INCLUDING ORANGES<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-3fabd1b\" id=\"swatch-book\" data-block-id=\"3fabd1b\"><h2 class=\"stk-block-heading__text\">HEX COLOR SWATCH PRINTABLE<\/h2><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Check out our latest product to help you easily find color codes and RGB values for your projects<\/p>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-5362d1e stk-block-background\" data-block-id=\"5362d1e\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-5362d1e-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-4a20c6c\" data-v=\"4\" data-block-id=\"4a20c6c\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-4a20c6c-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-4a20c6c-inner-blocks\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"1500\" src=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2025\/07\/hex-color-code-printable-pdf.jpg\" alt=\"Hex Color Code Printable  PDF Book\" class=\"wp-image-12795\" srcset=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2025\/07\/hex-color-code-printable-pdf.jpg 1000w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2025\/07\/hex-color-code-printable-pdf-200x300.jpg 200w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2025\/07\/hex-color-code-printable-pdf-683x1024.jpg 683w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2025\/07\/hex-color-code-printable-pdf-800x1200.jpg 800w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2025\/07\/hex-color-code-printable-pdf-500x750.jpg 500w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-c67a566\" data-v=\"4\" data-block-id=\"c67a566\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-c67a566-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-c67a566-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-dfa4d44\" id=\"\ud83c\udfa8-every-color-code-you-need-in-one-instant-download\" data-block-id=\"dfa4d44\"><h3 class=\"stk-block-heading__text has-text-align-center\">\ud83c\udfa8Every Color Code You Need &#8211; In One Instant Download!<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-88f8e00\" data-block-id=\"88f8e00\"><style>.stk-88f8e00 .stk-block-subtitle__text{font-size:18px !important;text-transform:uppercase !important;}@media screen and (max-width:999px){.stk-88f8e00 .stk-block-subtitle__text{font-size:18px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle has-text-align-center\"><strong>Never Search for a Hex or RGB Code Again &#8211; WITH 500+ COLORS<\/strong><\/p><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Say goodbye to endless color searching! Instantly access 500+ organized color swatches &#8211; each with hex codes, RGB values, and names. Download, print, and have all your color references at your fingertips for every digital or print project.<\/p>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-681251f\" data-block-id=\"681251f\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-00405f9\" data-block-id=\"00405f9\"><style>.stk-00405f9 , .stk-00405f9 .stk-button{width:100% !important;}.stk-00405f9 {flex:1 0 var(--stk-button-group-flex-wrap, 0) !important;}.stk-00405f9 .stk-button{background:#a14654 !important;}.stk-00405f9 .stk-button .stk--inner-svg svg:last-child{height:27px !important;width:27px !important;}.stk-00405f9 .stk-button__inner-text{font-weight:700 !important;}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/shop\/resources\/printable-color-swatch-book\/\"><span class=\"stk-button__inner-text\">GET INSTANT ACCESS<\/span><span class=\"stk--svg-wrapper\"><div class=\"stk--inner-svg\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" aria-hidden=\"true\" width=\"32\" height=\"32\"><path d=\"M167.02 309.34c-40.12 2.58-76.53 17.86-97.19 72.3-2.35 6.21-8 9.98-14.59 9.98-11.11 0-45.46-27.67-55.25-34.35C0 439.62 37.93 512 128 512c75.86 0 128-43.77 128-120.19 0-3.11-.65-6.08-.97-9.13l-88.01-73.34zM457.89 0c-15.16 0-29.37 6.71-40.21 16.45C213.27 199.05 192 203.34 192 257.09c0 13.7 3.25 26.76 8.73 38.7l63.82 53.18c7.21 1.8 14.64 3.03 22.39 3.03 62.11 0 98.11-45.47 211.16-256.46 7.38-14.35 13.9-29.85 13.9-45.99C512 20.64 486 0 457.89 0z\"\/><\/svg><\/div><\/span><\/a><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-2b65619\" data-block-id=\"2b65619\"><style>.stk-2b65619 {margin-bottom:0px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">FIND YOUR PERFECT COLOR COMBINATIONS<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-33740b3\" id=\"tools\" data-block-id=\"33740b3\"><h2 class=\"stk-block-heading__text\">Free Color Tools<\/h2><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&#038;family=Inter:wght@500;700;800&#038;display=swap\" rel=\"stylesheet\">\n<style>\n.tools-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;font-family:Inter,sans-serif}\n.tool-card{border:1.5px solid #E5E7EB;border-radius:16px;background:#fff;padding:14px 14px 12px;display:flex;gap:12px;align-items:flex-start;transition:.18s;text-decoration:none;color:inherit}\n.tool-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08);border-color:#CBD5E1}\n.tool-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;border:1.5px solid #F1F5F9}\n.tool-icon svg{width:20px;height:20px}\n.tool-name{font-family:Anton,sans-serif;font-size:17px;line-height:.95;text-transform:uppercase;color:#0F172A;letter-spacing:.2px}\n.tool-desc{font-size:12.5px;color:#64748B;line-height:1.4;margin-top:4px}\n.tool-arrow{margin-left:auto;color:#94A3B8;font-size:14px;transition:.18s}\n.tool-card:hover .tool-arrow{color:#0F172A;transform:translateX(3px)}\n.tool-kicker{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#C2410C;background:#FFF7ED;border:1px solid #FDBA74;border-radius:999px;padding:2px 7px;display:inline-block;margin-bottom:6px}\n<\/style>\n\n<div class=\"tools-grid\" id=\"tools\">\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/color-palette-generator-from-photo\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#FFFBEB;border-color:#FDE68A;color:#92400E\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><path d=\"M9 9h.01M15 9h.01M9 15h.01M15 15h.01M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M18 9h3M3 15h3M18 15h3\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-kicker\">Most Popular<\/div>\n      <div class=\"tool-name\">Palette Generator From Photo<\/div>\n      <div class=\"tool-desc\">Upload any image &#038; extract 5 dominant colors instantly.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/image-color-picker\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><path d=\"M12 2v6M12 16v6M4.9 4.9l4.2 4.2M14.9 14.9l4.2 4.2M2 12h6M16 12h6M4.9 19.1l4.2-4.2M14.9 9.1l4.2-4.2\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-name\">Image Color Picker<\/div>\n      <div class=\"tool-desc\">Click any pixel to get HEX, RGB, HSL + CMYK with magnifier.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/color-matching-tool\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#EEF2FF;border-color:#C7D2FE;color:#4338CA\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-name\">Color Matching Tool<\/div>\n      <div class=\"tool-desc\">Test if 2 colors match with a 0-100% score + live preview.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/complementary-color-picker\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#FFF7ED;border-color:#FED7AA;color:#9A3412\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 3a9 9 0 010 18V3z\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-name\">Complementary Picker<\/div>\n      <div class=\"tool-desc\">Find exact 180\u00b0 opposites for high-contrast CTAs.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/wcag-color-contrast-checker-tool\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#F0FDF4;border-color:#BBF7D0;color:#166534\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 8v8M8 12h8\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-kicker\">For Accessibility<\/div>\n      <div class=\"tool-name\">WCAG Contrast Checker<\/div>\n      <div class=\"tool-desc\">Check AA \/ AAA readability with live preview.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/color-converter-hex-to-rgb-cmyk-and-hsl\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#FAF5FF;border-color:#E9D5FF;color:#6B21A8\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><path d=\"M7 16V8l-3 3M17 8v8l3-3\"\/><path d=\"M12 8v8\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-name\">Color Code Converter<\/div>\n      <div class=\"tool-desc\">Convert HEX \u2192 RGB, CMYK, HSL in one click.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-36cbbe6 stk-block-background\" data-block-id=\"36cbbe6\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-36cbbe6-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-c8d7e90\" data-v=\"4\" data-block-id=\"c8d7e90\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-c8d7e90-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-c8d7e90-inner-blocks\">\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-327c95c\" data-block-id=\"327c95c\"><style>.stk-327c95c {margin-bottom:0px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle has-text-align-center\">KEEP GOING<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-cfbc7ed\" id=\"other-colors\" data-block-id=\"cfbc7ed\"><style>.stk-cfbc7ed {margin-bottom:0px !important;}<\/style><h2 class=\"stk-block-heading__text has-text-align-center\">EXPLORE OTHER COLOR HUBS<\/h2><\/div>\n\n\n\n<style>\n.color-hub-closer{max-width:900px;margin:32px auto 0;padding:14px 12px;font-family:Inter,sans-serif;text-align:center}\n.closer-dots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}\n.color-dot-link{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#fff;border:1.5px solid #E5E7EB;font-size:12.5px;font-weight:700;color:#334155;text-decoration:none;transition:.15s}\n.color-dot-link:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.07);border-color:#CBD5E1;color:#0F172A}\n.dot{width:20px;height:20px;border-radius:50%;display:inline-block;flex-shrink:0;border:1px solid rgba(0,0,0,.08)}\n<\/style>\n\n<div class=\"color-hub-closer\" id=\"other-colors\">\n  <div class=\"closer-dots\">\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/red-color-codes\/\"><span class=\"dot\" style=\"background:#E62E3E\"><\/span>Red<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/orange-color-codes\/\"><span class=\"dot\" style=\"background:#FF8E1F\"><\/span>Orange<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/yellow-color-codes\/\"><span class=\"dot\" style=\"background:#F5C518\"><\/span>Yellow<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/green-color-codes\/\"><span class=\"dot\" style=\"background:#2EAB4A\"><\/span>Green<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-color-codes\/\"><span class=\"dot\" style=\"background:#2A8BD7\"><\/span>Blue<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/purple-color-codes\/\"><span class=\"dot\" style=\"background:#7A4ED1\"><\/span>Purple<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/pink-color-codes\/\"><span class=\"dot\" style=\"background:#D93D8D\"><\/span>Pink<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/brown-color-codes\/\"><span class=\"dot\" style=\"background:#8B5A2B\"><\/span>Brown<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/black-color-codes\/\"><span class=\"dot\" style=\"background:#1A1A1A\"><\/span>Black<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/gray-color-codes\/\"><span class=\"dot\" style=\"background:#9E9E9E\"><\/span>Gray<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/white-color-codes\/\"><span class=\"dot\" style=\"background:#FFFFFF\"><\/span>White<\/a>\n  <\/div>\n<\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ORANGE COLOR HUB 75+ SHADES OF ORANGE Orange is one of the world&#8217;s most energetic and vibrant colors and, although it might not be the first color people think about when choosing colors, once you start playing with all the different shades of orange out there, you will soon see that orange is definitely a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3750,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_important_terms":"","footnotes":""},"categories":[217,224],"tags":[25,24,55,34],"class_list":["post-3744","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-colors","category-orange","tag-color-codes","tag-color-psychology","tag-hcc","tag-orange"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7},"has_hero_section":"disabled","disable_featured_image":"yes","disable_share_box":"yes","vertical_spacing_source":"custom","content_area_spacing":"bottom"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/comments?post=3744"}],"version-history":[{"count":19,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3744\/revisions"}],"predecessor-version":[{"id":16791,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3744\/revisions\/16791"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/media\/3750"}],"wp:attachment":[{"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/media?parent=3744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/categories?post=3744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/tags?post=3744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}