{"id":3542,"date":"2025-01-04T15:59:03","date_gmt":"2025-01-04T15:59:03","guid":{"rendered":"https:\/\/www.notebookandpenguin.com\/rebuild\/?p=3542"},"modified":"2026-07-24T11:33:02","modified_gmt":"2026-07-24T11:33:02","slug":"blue-color-codes","status":"publish","type":"post","link":"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-color-codes\/","title":{"rendered":"75+ Beautiful Shades Of Blue: 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:#0000ff !important;background-image:url(https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/blue-hex-color-codes.jpg) !important;min-height:338px !important;align-items:center !important;display:flex !important;}.stk-768afb3:before{background-color:#0000ff !important;opacity:0.2 !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:#ffffff !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:#ffffff !important;}.stk-e39ec37 .stk-block-subtitle__text{font-size:14px !important;color:#0000ff !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>BLUE 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-blue\" data-block-id=\"e483374\"><style>.stk-e483374 {margin-bottom:9px !important;}.stk-e483374 .stk-block-heading__text{font-size:58px !important;color:#fffffe !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 BLUE<\/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:#fffffe !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\">Blue is one of the world\u2019s favorite colors, and it isn\u2019t hard to see why! <br>There are so many different shades of blue to choose from, ranging all the way from delicate blues such as Baby Blue and Powder Blue all the way to darker tones like Navy Blue and Midnight Blue.<\/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#trueBlueBlock, #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  #trueBlueBlock, #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=\"#trueBlueBlock\">Primary Blue<\/a>\n    <a class=\"hub-link-s\" href=\"#psychology\">Psychology Of Blue<\/a>\n    <a class=\"hub-link-s\" href=\"#palettes\">Color Palettes<\/a>\n    <a class=\"hub-link-s\" href=\"#popular\">Popular Shades of Blue<\/a>\n    <a class=\"hub-link-s\" href=\"#library\">Blue 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 Blue<\/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-blue-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-blue-block{grid-template-columns:1fr}}\n.true-swatch{height:380px;background:#0000FF;border-radius:20px;position:relative;padding:14px;display:flex;align-items:flex-end;box-shadow:0 12px 28px rgba(0,0,255,.22)}\n.true-pill{width:100%;background:#fff;border-radius:999px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:#0000FF;letter-spacing:.2px}\n.true-pill button{background:none;border:0;cursor:pointer;font-size:16px;color:#0000FF}\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:#93C5FD;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,255,.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,#E6F0FF 0%,#9AB4FF 25%,#0000FF 50%,#000080 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#blueToast{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#blueToast.show{opacity:1;transform:translateX(-50%) translateY(0)}\n<\/style>\n\n<div class=\"true-blue-block\" id=\"trueBlueBlock\">\n  <div>\n    <div class=\"true-swatch\">\n      <div class=\"true-pill\"><span>TRUE BLUE \/ PRIMARY BLUE #0000FF<\/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>#E6F0FF<\/span><span>#0000FF<\/span><span>#000080<\/span><\/div>\n    <\/div>\n  <\/div>\n  <div>\n    <div class=\"true-title\"><h2>True Blue \/ Primary Blue<\/h2><\/div>\n    <div class=\"true-sub\">True Blue or Primary Blue is the purest and most intense shade of blue. Other shades of blue are created when you alter the amounts of red, green, black or white that are mixed with the blue.<\/div>\n    <div class=\"true-grid\">\n      <div class=\"true-card\" data-copy=\"#0000FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">HEX<\/div><div class=\"true-value\">#0000FF<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"0, 0, 255\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">RGB<\/div><div class=\"true-value\">0, 0, 255<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"240\u00b0, 100%, 50%\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">HSL<\/div><div class=\"true-value\">240\u00b0, 100%, 50%<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"100%, 100%, 0%, 0%\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">CMYK<\/div><div class=\"true-value\">100%, 100%, 0%, 0%<\/div><\/div>\n      <div class=\"true-card\"><div class=\"true-label\">Temperature<\/div><div class=\"true-value\">Cool<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"#FFFF00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Complementary<\/div><div class=\"true-value\"><span class=\"true-dot\" style=\"background:#FFFF00\"><\/span>#FFFF00<\/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=\"Primary\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Family<\/div><div class=\"true-value\">Primary<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"#1 Worldwide\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Popularity<\/div><div class=\"true-value\">#1 Worldwide<\/div><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<div id=\"blueToast\">Copied to clipboard!<\/div>\n\n<script>\n(function(){\n  const toast=document.getElementById('blueToast');\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'),'#0000FF');\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 BLUE<\/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: #2563EB !important;\n    border-radius: 999px;\n    padding: 5px 12px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #ffffff !important;\n    display: inline-block;\n    font-family: Inter, sans-serif !important;\n    cursor: default !important;\n}\n.didyou{background:#2563EB;color:#fff;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\">Blue Creates Feelings Of Trust and Calm<\/div>\n    <div class=\"trust-p\">When people see blue they are reminded of the sky and the sea &#8211; constants in human experience. Studies have found that blue lowers the heart rate, signals competence, and is the most universally liked color (42% of people choose blue as favorite!). In business, brands use blue to convey security, trust, and honestly.<\/div>\n    \n    <div class=\"trust-cards\">\n      <div class=\"mini\"><div class=\"label\">Emotions<\/div><div class=\"pills\"><span class=\"pill\">Calm<\/span><span class=\"pill\">Trust<\/span><span class=\"pill\">Focus<\/span><span class=\"pill\">Loyalty<\/span><span class=\"pill\">Serenity<\/span><span class=\"pill\">Stability<\/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: Corporate, Trustworthy.<\/li><li>In Middle East: Protection.<\/li> <li>In China: Immortality.<\/li> <li>In Judaism: Holiness.<\/li> <li>In India: Krishna, Infinity.<\/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\">Facebook, LinkedIn, PayPal and IBM all use blue because A\/B tests show blue CTAs increase trust-based conversions by 8-12% vs red. Light blues calm, dark blues signal authority.<\/div><\/div><\/div>\n  <\/div>\n\n  <!-- RIGHT COLUMN -->\n  <div>\n    <div class=\"brands\"><div class=\"label\">Brands that use blue<\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#1877F2\"><\/div><div><b style=\"font-size:14px\">Facebook<\/b><div style=\"font-size:13px;color:#6B7280\">Trust, community<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#1428A0\"><\/div><div><b style=\"font-size:14px\">Samsung<\/b><div style=\"font-size:13px;color:#6B7280\">Innovation<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#001E50\"><\/div><div><b style=\"font-size:14px\">Ford<\/b><div style=\"font-size:13px;color:#6B7280\">Dependability<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#2D8CFF\"><\/div><div><b style=\"font-size:14px\">Zoom<\/b><div style=\"font-size:13px;color:#6B7280\">Clarity<\/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\">Tech, Finance, Healthcare, Education, Corporate sites, Meditation apps, Ocean \/ Travel brands. <br><br><span style=\"color:#9CA3AF\">Avoid if you want to create urgency (use red\/orange 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 blue<\/div>\n    <div class=\"life-grid\">\n      <div class=\"life-item\"><b>\ud83c\udfe0 Home Decor<\/b><span>Powder &amp; Dusty Blue for calm bedrooms. Navy for accent walls. Pairs with white + wood for coastal.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udc8d Weddings<\/b><span>Dusty Blue #5A86AD is top 3 for 2024-26 bridesmaid dresses. Navy for suits. Sky Blue for summer invites.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udc57 Fashion<\/b><span>Cobalt is a power color. Baby Blue is trending. Denim Blue #1560BD is the ultimate capsule wardrobe staple.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83c\udfa8 Branding<\/b><span>Tech, finance, healthcare. Light blue = friendly. Dark blue = premium &amp; secure.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udcf1 UI \/ Web<\/b><span>Best CTA color for trust. Use #2563EB for buttons. Ensure 4.5:1 contrast with white text.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83c\udf0a Events &amp; Baby<\/b><span>Blue for baby boys, gender reveals, ocean themes. Ice Blue #F0F8FF for winter wonderland.<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Famous Brands That Use Blue In Their Logos<\/h2>\n\n\n\n<figure class=\"wp-block-image alignleft size-full\"><img decoding=\"async\" width=\"960\" height=\"540\" src=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-blue-logos.jpg\" alt=\"Brands With Blue Logos\" class=\"wp-image-3558\" srcset=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-blue-logos.jpg 960w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-blue-logos-300x169.jpg 300w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-blue-logos-800x450.jpg 800w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-blue-logos-500x281.jpg 500w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-with-blue-logos-768x432.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/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 BLUE<\/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\">BLUE 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:#93C5FD}\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 Blue + Yellow<\/span><button class=\"copy-all\" data-copy=\"#0000FF, #FFFF00\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#0000FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#0000FF\"><\/div><div class=\"pal-hex\">#0000FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFFF00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFFF00\"><\/div><div class=\"pal-hex\">#FFFF00<\/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=\"#0000FF, #3333FF, #6666FF, #9999FF, #CCCCFF\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#0000FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#0000FF\"><\/div><div class=\"pal-hex\">#0000FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#3333FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#3333FF\"><\/div><div class=\"pal-hex\">#3333FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#6666FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#6666FF\"><\/div><div class=\"pal-hex\">#6666FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#9999FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#9999FF\"><\/div><div class=\"pal-hex\">#9999FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#CCCCFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#CCCCFF\"><\/div><div class=\"pal-hex\">#CCCCFF<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Triadic \u2014 Blue, Red, Yellow<\/span><button class=\"copy-all\" data-copy=\"#0000FF, #FF0000, #FFFF00\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#0000FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#0000FF\"><\/div><div class=\"pal-hex\">#0000FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FF0000\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FF0000\"><\/div><div class=\"pal-hex\">#FF0000<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFFF00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFFF00\"><\/div><div class=\"pal-hex\">#FFFF00<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Analogous \u2014 Cyan \u2192 Purple<\/span><button class=\"copy-all\" data-copy=\"#00FFFF, #0080FF, #0000FF, #8000FF, #FF80FF\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#00FFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#00FFFF\"><\/div><div class=\"pal-hex\">#00FFFF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#0080FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#0080FF\"><\/div><div class=\"pal-hex\">#0080FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#0000FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#0000FF\"><\/div><div class=\"pal-hex\">#0000FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#8000FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#8000FF\"><\/div><div class=\"pal-hex\">#8000FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FF80FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FF80FF\"><\/div><div class=\"pal-hex\">#FF80FF<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Shades \u2014 True Blue + Black<\/span><button class=\"copy-all\" data-copy=\"#0000FF, #0000CC, #000099, #000066, #000033\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#0000FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#0000FF\"><\/div><div class=\"pal-hex\">#0000FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#0000CC\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#0000CC\"><\/div><div class=\"pal-hex\">#0000CC<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#000099\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#000099\"><\/div><div class=\"pal-hex\">#000099<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#000066\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#000066\"><\/div><div class=\"pal-hex\">#000066<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#000033\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#000033\"><\/div><div class=\"pal-hex\">#000033<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Tints \u2014 True Blue + White<\/span><button class=\"copy-all\" data-copy=\"#0000FF, #3333FF, #6666FF, #9999FF, #CCCCFF, #E5E5FF\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#3333FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#3333FF\"><\/div><div class=\"pal-hex\">#3333FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#6666FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#6666FF\"><\/div><div class=\"pal-hex\">#6666FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#9999FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#9999FF\"><\/div><div class=\"pal-hex\">#9999FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#CCCCFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#CCCCFF\"><\/div><div class=\"pal-hex\">#CCCCFF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#E5E5FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#E5E5FF\"><\/div><div class=\"pal-hex\">#E5E5FF<\/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 BLUE<\/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{#5A86ADgrid-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:#93C5FD}\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#blueToast{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#blueToast.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:'Azure',hex:'#007FFF',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/azure\/'},\n    {name:'Baby Blue',hex:'#89CFF0',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/baby-blue\/'},\n    {name:'Blue Gray',hex:'#6699CC',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/blue-gray\/'},\n    {name:'Cerulean',hex:'#007BA7',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/cerulean\/'},\n  {name:'Cornflower Blue',hex:'#6495ED',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/cornflower-blue\/'},\n\n    {name:'Dusty Blue',hex:'#5A86AD',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/dusty-blue\/'},\n\n  {name:'Powder Blue',hex:'#B0E0E6',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/powder-blue\/'},\n\n{name:'Ice Blue',hex:'#F0F8FF',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/ice-blue\/'},\n\n\n {name:'Pastel Blue',hex:'#AEC6CF',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/pastel-blue\/'},\n\n\n    {name:'Sky Blue',hex:'#87CEEB',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/sky-blue\/'},\n\n    \n\n  {name:'Royal Blue',hex:'#4169E1',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/royal-blue\/'},\n\n    {name:'Cobalt Blue',hex:'#0047AB',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/cobalt-blue\/'},\n  \n  {name:'Denim Blue',hex:'#1560BD',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/denim-blue\/'},\n\n\n    {name:'Midnight Blue',hex:'#191970',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/midnight-blue\/'},\n    {name:'Navy Blue',hex:'#000080',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/navy-blue\/'},\n    \n  \n\n    {name:'Indigo',hex:'#4B0082',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/indigo\/'},\n    {name:'Lavender Blue',hex:'#CCCCFF',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/lavender-blue\/'},\n\n   \n    {name:'Periwinkle',hex:'#8E82FE',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/periwinkle\/'},\n  \n  \n    {name:'Slate Blue',hex:'#6A5ACD',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/slate-blue\/'},\n    {name:'Steel Blue',hex:'#4682B4',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/steel-blue\/'},\n    {name:'Teal',hex:'#008080',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/teal\/'},\n\n   {name:'Turquoise',hex:'#40E0D0',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/turquoise\/'},\n\n{name:'Cyan',hex:'#00FFFF',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/cyan\/'},\n  ];\n  const grid=document.getElementById('guidesGrid');\n  const toast=document.getElementById('blueToast');\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<p class=\"has-text-align-center has-palette-color-5-background-color has-background wp-block-paragraph\"><strong>Not sure about Periwinkle and Indigo being blue?<\/strong><br><strong> Check out their full color guides here:<br><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/indigo-color-guide\/\">The Ultimate Indigo Color Guide<\/a><br><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/periwinkle-color\/\">The Best Periwinkle Color Guide<\/a><\/strong><\/p>\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\">BLUE 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 BLUE: 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#blueToast{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#blueToast.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\">78 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:#2B547E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Jay<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2B547E\">#2B547E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(43,84,126)\">rgb(43,84,126)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#4863A0;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Azure Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#4863A0\">#4863A0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(72,99,160)\">rgb(72,99,160)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#728FCE;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Light Purple Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#728FCE\">#728FCE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(114,143,206)\">rgb(114,143,206)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#737CA1;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Slate Blue Gray<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#737CA1\">#737CA1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(115,124,161)\">rgb(115,124,161)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#646D7E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Mist Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#646D7E\">#646D7E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(100,109,126)\">rgb(100,109,126)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#98AFC7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Gray<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#98AFC7\">#98AFC7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(152,175,199)\">rgb(152,175,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#566D7E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Marble Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#566D7E\">#566D7E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(86,109,126)\">rgb(86,109,126)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#36454F;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Charcoal Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#36454F\">#36454F<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(54,69,79)\">rgb(54,69,79)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#29465B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Blue Grey<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#29465B\">#29465B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(41,70,91)\">rgb(41,70,91)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2B3856;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Slate<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2B3856\">#2B3856<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(43,56,86)\">rgb(43,56,86)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#123456;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Deep-Sea Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#123456\">#123456<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(18,52,86)\">rgb(18,52,86)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#151B54;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Night Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#151B54\">#151B54<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(21,27,84)\">rgb(21,27,84)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#191970;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Midnight Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#191970\">#191970<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(25,25,112)\">rgb(25,25,112)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#000080;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Navy<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#000080\">#000080<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,0,128)\">rgb(0,0,128)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#151B8D;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Denim Dark Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#151B8D\">#151B8D<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(21,27,141)\">rgb(21,27,141)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#00008B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#00008B\">#00008B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,0,139)\">rgb(0,0,139)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0000A0;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">New Midnight Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0000A0\">#0000A0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,0,160)\">rgb(0,0,160)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0000A5;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Earth Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0000A5\">#0000A5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,0,165)\">rgb(0,0,165)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0020C2;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cobalt Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0020C2\">#0020C2<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,32,194)\">rgb(0,32,194)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0000CD;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Medium Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0000CD\">#0000CD<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,0,205)\">rgb(0,0,205)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2916F5;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Canary Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2916F5\">#2916F5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(41,22,245)\">rgb(41,22,245)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0000FF;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0000FF\">#0000FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,0,255)\">rgb(0,0,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0002FF;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Samco Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0002FF\">#0002FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,2,255)\">rgb(0,2,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0909FF;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Bright Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0909FF\">#0909FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(9,9,255)\">rgb(9,9,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1F45FC;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Orchid<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1F45FC\">#1F45FC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(31,69,252)\">rgb(31,69,252)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2B65EC;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Ocean Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2B65EC\">#2B65EC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(43,101,236)\">rgb(43,101,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#306EFF;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Ribbon<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#306EFF\">#306EFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(48,110,255)\">rgb(48,110,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#157DEC;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Dress<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#157DEC\">#157DEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(21,125,236)\">rgb(21,125,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1589FF;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Neon Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1589FF\">#1589FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(21,137,255)\">rgb(21,137,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1E90FF;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dodger Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1E90FF\">#1E90FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(30,144,255)\">rgb(30,144,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0041C2;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blueberry Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0041C2\">#0041C2<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,65,194)\">rgb(0,65,194)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2554C7;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Sapphire Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2554C7\">#2554C7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(37,84,199)\">rgb(37,84,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2B60DE;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Balloon Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2B60DE\">#2B60DE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(43,96,222)\">rgb(43,96,222)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#4169E1;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Royal Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#4169E1\">#4169E1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(65,105,225)\">rgb(65,105,225)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#6495ED;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cornflower Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#6495ED\">#6495ED<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(100,149,237)\">rgb(100,149,237)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#6698FF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Sky Blue Dress<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#6698FF\">#6698FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(102,152,255)\">rgb(102,152,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#56A5EC;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Iceberg<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#56A5EC\">#56A5EC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(86,165,236)\">rgb(86,165,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#38ACEC;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Butterfly Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#38ACEC\">#38ACEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(56,172,236)\">rgb(56,172,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#00BFFF;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Deep Sky Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#00BFFF\">#00BFFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,191,255)\">rgb(0,191,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#3BB9FF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Midday Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#3BB9FF\">#3BB9FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(59,185,255)\">rgb(59,185,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1569C7;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Eyes<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1569C7\">#1569C7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(21,105,199)\">rgb(21,105,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1974D2;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Bright Navy Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1974D2\">#1974D2<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(25,116,210)\">rgb(25,116,210)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#357EC7;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Windows Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#357EC7\">#357EC7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(53,126,199)\">rgb(53,126,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#488AC7;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Silk Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#488AC7\">#488AC7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(72,138,199)\">rgb(72,138,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#368BC1;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Glacial Blue Ice<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#368BC1\">#368BC1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(54,139,193)\">rgb(54,139,193)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#3090C7;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Ivy<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#3090C7\">#3090C7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(48,144,199)\">rgb(48,144,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#4682B4;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Steel Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#4682B4\">#4682B4<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(70,130,180)\">rgb(70,130,180)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#659EC7;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Koi<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#659EC7\">#659EC7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(101,158,199)\">rgb(101,158,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#87AFC7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Columbia Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#87AFC7\">#87AFC7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(135,175,199)\">rgb(135,175,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#95B9C7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Baby Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#95B9C7\">#95B9C7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(149,185,199)\">rgb(149,185,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#5CB3FF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Crystal Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#5CB3FF\">#5CB3FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(92,179,255)\">rgb(92,179,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#79BAEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Denim Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#79BAEC\">#79BAEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(121,186,236)\">rgb(121,186,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#82CAFF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Day Sky Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#82CAFF\">#82CAFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(130,202,255)\">rgb(130,202,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#ADDFFF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Light Day Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#ADDFFF\">#ADDFFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(173,223,255)\">rgb(173,223,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#87CEEB;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Light Sky Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#87CEEB\">#87CEEB<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(135,206,235)\">rgb(135,206,235)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#A0CFEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Jeans Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#A0CFEC\">#A0CFEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(160,207,236)\">rgb(160,207,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#B7CEEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Angel<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#B7CEEC\">#B7CEEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(183,206,236)\">rgb(183,206,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#B4CFEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pastel Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#AEC6CF\">#AEC6CF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(180,207,236)\">rgb(180,207,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#C2DFFF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Sea Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#C2DFFF\">#C2DFFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(194,223,255)\">rgb(194,223,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#C6DEFF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Heavenly Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#C6DEFF\">#C6DEFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(198,222,255)\">rgb(198,222,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#D5D6EA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pastel Light Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#D5D6EA\">#D5D6EA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(213,214,234)\">rgb(213,214,234)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E3E4FA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Lavender Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#CCCCFF\">#CCCCFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(227,228,250)\">rgb(227,228,250)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#DBE9FA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#DBE9FA\">#DBE9FA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(219,233,250)\">rgb(219,233,250)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F0F8FF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Alice Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F0F8FF\">#F0F8FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(240,248,255)\">rgb(240,248,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#C9DFEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Gulf Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#C9DFEC\">#C9DFEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(201,223,236)\">rgb(201,223,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#B0CFDE;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Light Steel Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#B0CFDE\">#B0CFDE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(176,207,222)\">rgb(176,207,222)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#ADD8E6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Light Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#ADD8E6\">#ADD8E6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(173,216,230)\">rgb(173,216,230)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#AFDCEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Coral Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#AFDCEC\">#AFDCEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(175,220,236)\">rgb(175,220,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#B0E0E6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Powder Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#B0E0E6\">#B0E0E6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(176,224,230)\">rgb(176,224,230)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#BDEDFF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Robin Egg Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#BDEDFF\">#BDEDFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(189,237,255)\">rgb(189,237,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#9AFEFF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Electric Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#9AFEFF\">#9AFEFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(154,254,255)\">rgb(154,254,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#7DFDFE;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Tron Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#7DFDFE\">#7DFDFE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(125,253,254)\">rgb(125,253,254)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#57FEFF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Zircon<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#57FEFF\">#57FEFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(87,254,255)\">rgb(87,254,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#4EE2EC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Diamond<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#4EE2EC\">#4EE2EC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(78,226,236)\">rgb(78,226,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#8EEBEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Lagoon<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#8EEBEC\">#8EEBEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(142,235,236)\">rgb(142,235,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#AFEEEE;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pale Turquoise<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#AFEEEE\">#AFEEEE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(175,238,238)\">rgb(175,238,238)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#CFECEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pale Blue Lily<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#CFECEC\">#CFECEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(207,236,236)\">rgb(207,236,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#B3D9D9;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Light Teal<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#B3D9D9\">#B3D9D9<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(179,217,217)\">rgb(179,217,217)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#81D8D0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Tiffany Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#81D8D0\">#81D8D0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(129,216,208)\">rgb(129,216,208)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#77BFC7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Hosta<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#77BFC7\">#77BFC7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(119,191,199)\">rgb(119,191,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#92C7C7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cyan Opaque<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#92C7C7\">#92C7C7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(146,199,199)\">rgb(146,199,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#78C7C7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Northern Lights Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#78C7C7\">#78C7C7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(120,199,199)\">rgb(120,199,199)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#7BCCB5;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Green<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#7BCCB5\">#7BCCB5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(123,204,181)\">rgb(123,204,181)<\/span><\/td><\/tr>\n    <\/tbody>\n  <\/table>\n<\/div>\n\n<script>\n(function(){\n  const toast=document.getElementById('blueToast');\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\">BLUE 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:#fff;text-align:center;transition:.2s}\n.gen-values{font-family:monospace;font-size:12px;background:rgba(0,0,0,.2);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#blueToast{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#blueToast.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=\"#1E90FF\" class=\"gen-color-input\">\n    <div class=\"gen-hex-pill\" id=\"baseHexNew\">#1E90FF<\/div>\n    <div style=\"font-size:12px;color:#6B7280\">Click the square to pick any blue \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\">#1E90FF<\/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=\"blueToast\">Copied!<\/div>\n\n<script>\n(function(){\nconst $=s=>document.getElementById(s);\nconst toast=$('blueToast');\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 BLUE 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\/shades-of-blue-hex-codes-pinterest-683x1024.jpg\" alt=\"Blue Hex Color Chart With Blue Color Names, Blue Hex Color Codes - Infographic\" class=\"wp-image-3613\" style=\"width:500px\" srcset=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/shades-of-blue-hex-codes-pinterest-683x1024.jpg 683w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/shades-of-blue-hex-codes-pinterest-200x300.jpg 200w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/shades-of-blue-hex-codes-pinterest-800x1200.jpg 800w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/shades-of-blue-hex-codes-pinterest-500x750.jpg 500w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/shades-of-blue-hex-codes-pinterest-768x1152.jpg 768w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/shades-of-blue-hex-codes-pinterest.jpg 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 BLUE COLOR CODES<\/h2><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">When it comes to digital design, blue hex codes are used to create the perfect shade of blue. Each <strong>hex code is made up of 6 letters or numbers<\/strong> which are linked to how much of the <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/red-color-codes\/\">colors red<\/a>, <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/green-color-codes\/\">green<\/a>, and blue are within the color. &nbsp;By changing the combinations, you change the color.&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The hex color code is laid out in the following &nbsp;format:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>#RRGGBB<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left\">Primary Blue Hex Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Blue is one of the three primary colors and <strong>true blue or primary blue contains no red or green<\/strong>.&nbsp;Likewise, <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/yellow-color-codes\/\">yellow (a combination of red and green) contains no blue<\/a>!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The primary blue hex color code is #0000FF.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This code is broken up into 3 sections &#8211; The first two digits are for red color values, the second two are for green color values and the third two are for blue color values.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the case of primary blue, there are <strong>no values for red and green<\/strong>.   <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, if for example, you wanted to create red, you would remove the blue values and instead use <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/red-color-codes\/\"><strong>red&#8217;s hex code which is #FF0000<\/strong><\/a>.  Likewise, if you wanted pure green, you could use the <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/green-color-codes\/\"><strong>#00FF00 green hex color code<\/strong><\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/purple-color-codes\/\"><strong>By combining blue and red, you create purple!<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left\">Primary Blue RGB Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Just like blue&#8217;s hex color code, RGB color codes are also broken down into 3 sections, each represented by a number between 0 and 255.   Zero represents no color while 255 represents the full color.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Primary blue RGB color code is RGB(0,0,255)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Like before, we have <strong>zero values for red and green<\/strong>. Again, if you wanted to create red, you would use an RGB color code of RGB(255,0,0) and green would be RGB(0,255,0).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Is Blue 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>blue is associated with peace, serenity, stability, reliability, loyalty, and intelligence.  <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because of this, blue is a very popular color choice for everything from home decor to logos. In fact, blue is <strong>one of the most commonly used colors in branding and marketing<\/strong> because it is known to evoke feelings of trust and dependability.<\/p>\n\n\n\n<p class=\"has-palette-color-5-background-color has-background wp-block-paragraph\">Fun fact!&nbsp; There are over <strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Color_depth\" target=\"_blank\" rel=\"noreferrer noopener\">16 million hex color code<\/a><a href=\"https:\/\/en.wikipedia.org\/wiki\/Color_depth\" target=\"_blank\" rel=\"noopener\">s<\/a><\/strong> to choose from so you really are spoiled for choice when it comes to color codes! Oh, and all these colors are visible on just about all modern monitors, TVs, and mobile devices.<\/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\">If you would like some more resources for the color blue, then we&#8217;ve got you covered!<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/indigo-color-guide\/\">The Ultimate Indigo Color Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/slate-blue-color\/\">The Ultimate Slate Blue Color Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/periwinkle-color\/\">The Ultimate Periwinkle Color Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/navy-blue-color-palette\/\">Navy Blue Color Palettes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-green-color-palette\/\">Blue And Green Color Palettes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/pastel-blue-color-palettes\/\">Pastel Blue Color Palettes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-and-brown-color-palettes\/\">Blue And Brown Color Palettes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/red-and-blue-color-palettes\/\">Red And Blue Color Palettes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-gray-color-palettes\/\">Blue And Gray Color Palettes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-and-yellow-color-palettes\/\">Blue And Yellow Color Palettes<\/a><\/li>\n\n\n\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\/blue-and-purple-color-palettes\/\">Blue And Purple Color Palettes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/teal-color-palettes\/\">Teal Color Palettes<\/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 BLUES<\/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:#3B82F6;background:#EFF6FF;border:1px solid #DBEAFE;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","protected":false},"excerpt":{"rendered":"<p>BLUE COLOR HUB 75+ SHADES OF BLUE Blue is one of the world\u2019s favorite colors, and it isn\u2019t hard to see why! There are so many different shades of blue to choose from, ranging all the way from delicate blues such as Baby Blue and Powder Blue all the way to darker tones like Navy [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3564,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_important_terms":"","footnotes":""},"categories":[218,217],"tags":[27,25,24,55],"class_list":["post-3542","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blue","category-colors","tag-blue","tag-color-codes","tag-color-psychology","tag-hcc"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"[data-prefix=\"single_blog_post\"] {background-color:var(--theme-palette-color-8);background-image:none;}","tablet":"","mobile":""},"google_fonts":[],"version":7},"page_structure_type":"type-1","has_hero_section":"disabled","vertical_spacing_source":"custom","content_area_spacing":"bottom","disable_featured_image":"yes","hero_section":"type-2","disable_share_box":"yes","background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--theme-palette-color-8)"}}}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3542","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=3542"}],"version-history":[{"count":110,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3542\/revisions"}],"predecessor-version":[{"id":16793,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3542\/revisions\/16793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/media\/3564"}],"wp:attachment":[{"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/media?parent=3542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/categories?post=3542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/tags?post=3542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}