{"id":3821,"date":"2024-09-05T15:23:23","date_gmt":"2024-09-05T15:23:23","guid":{"rendered":"https:\/\/www.notebookandpenguin.com\/rebuild\/?p=3821"},"modified":"2026-07-24T11:33:35","modified_gmt":"2026-07-24T11:33:35","slug":"white-color-codes","status":"publish","type":"post","link":"https:\/\/www.notebookandpenguin.com\/rebuild\/white-color-codes\/","title":{"rendered":"95+ Wonderful Shades Of White: Meaning, Psychology, Hex Codes &#038; 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:#FFFFFF !important;background-image:url(https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/white-color.jpg) !important;min-height:338px !important;align-items:center !important;display:flex !important;}.stk-768afb3:before{background-color:#FFFFFF !important;opacity:0.5 !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:#000000 !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:#000000 !important;}.stk-e39ec37 .stk-block-subtitle__text{font-size:14px !important;color:#FFFFFF !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>WHITE 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=\"95-shades-of-white\" data-block-id=\"e483374\"><style>.stk-e483374 {margin-bottom:9px !important;}.stk-e483374 .stk-block-heading__text{font-size:58px !important;color:#000000 !important;}@media screen and (max-width:999px){.stk-e483374 .stk-block-heading__text{font-size:50px !important;}}<\/style><h2 class=\"stk-block-heading__text has-text-color has-text-align-center\">95+ SHADES OF WHITE<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-460f2fe\" data-block-id=\"460f2fe\"><style>.stk-460f2fe {margin-bottom:3px !important;}.stk-460f2fe .stk-block-subtitle__text{font-size:18px !important;color:#000000 !important;}@media screen and (max-width:999px){.stk-460f2fe .stk-block-subtitle__text{font-size:18px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle has-text-color has-text-align-center\">When most people think of white, they often have a very specific shade of white in mind &#8211; usually a bright white color, like freshly fallen snow, that is crisp and clean! However, don&#8217;t be fooled, white comes in an incredibly wide range of colors and shades, ranging from cool blues and grays all the way to warm yellows and pinks, each with its own unique personality.<\/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#trueWhiteBlock, #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  #trueWhiteBlock, #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=\"#trueWhiteBlock\">Pure White<\/a>\n    <a class=\"hub-link-s\" href=\"#psychology\">Psychology Of White<\/a>\n    <a class=\"hub-link-s\" href=\"#palettes\">Color Palettes<\/a>\n    <a class=\"hub-link-s\" href=\"#popular\">Popular Shades of White<\/a>\n    <a class=\"hub-link-s\" href=\"#library\">White 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 White<\/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-white-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-white-block{grid-template-columns:1fr}}\n.true-swatch{height:380px;background:#FFFFFF;border-radius:20px;position:relative;padding:14px;display:flex;align-items:flex-end;border:1.5px solid #E5E7EB;box-shadow:0 12px 28px rgba(0,0,0,.06)}\n.true-pill{width:100%;background:#0F172A;border-radius:999px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:#FFFFFF;letter-spacing:.2px}\n.true-pill button{background:none;border:0;cursor:pointer;font-size:16px;color:#FFFFFF}\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:#94A3B8;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}\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,#F5F5F5 0%,#FFFFFF 50%,#FFFFFF 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#whiteToast{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#whiteToast.show{opacity:1;transform:translateX(-50%) translateY(0)}\n<\/style>\n\n<div class=\"true-white-block\" id=\"trueWhiteBlock\">\n  <div>\n    <div class=\"true-swatch\">\n      <div class=\"true-pill\"><span>PURE WHITE \/ TRUE WHITE #FFFFFF<\/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>#FFFFFF<\/span><span>#FFFFFF<\/span><span>#F5F5F5<\/span><\/div>\n    <\/div>\n  <\/div>\n  <div>\n    <div class=\"true-title\"><h2>Pure White \/ True White<\/h2><\/div>\n    <div class=\"true-sub\">Pure White or True White is the brightest and cleanest shade of white. Other shades of white are created when you add small amounts of other colors to create warmer or cooler undertones.<\/div>\n    <div class=\"true-grid\">\n      <div class=\"true-card\" data-copy=\"#FFFFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">HEX<\/div><div class=\"true-value\">#FFFFFF<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"255, 255, 255\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">RGB<\/div><div class=\"true-value\">255, 255, 255<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"0\u00b0, 0%, 100%\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">HSL<\/div><div class=\"true-value\">0\u00b0, 0%, 100%<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"0%, 0%, 0%, 0%\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">CMYK<\/div><div class=\"true-value\">0%, 0%, 0%, 0%<\/div><\/div>\n      <div class=\"true-card\"><div class=\"true-label\">Temperature<\/div><div class=\"true-value\">Neutral<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"#000000\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Complementary<\/div><div class=\"true-value\"><span class=\"true-dot\" style=\"background:#000000\"><\/span>#000000<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"1.00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Luminance<\/div><div class=\"true-value\">1.00<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"Base\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Family<\/div><div class=\"true-value\">Base<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"#10 Worldwide\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Popularity<\/div><div class=\"true-value\">#10 Worldwide<\/div><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<div id=\"whiteToast\">Copied to clipboard!<\/div>\n\n<script>\n(function(){\n  const toast=document.getElementById('whiteToast');\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'),'#FFFFFF');\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 WHITE<\/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: #808080 !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:#475569;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\">White Creates Feelings Of Purity and Simplicity<\/div>\n    <div class=\"trust-p\">When people see white they are reminded of cleanliness, purity, and freshness. Studies have found that white promotes clarity, signals simplicity, and creates a sense of space and openness. In business, brands use white to convey minimalism, modernity, and premium quality.<\/div>\n    \n    <div class=\"trust-cards\">\n      <div class=\"mini\"><div class=\"label\">Emotions<\/div><div class=\"pills\"><span class=\"pill\">Purity<\/span><span class=\"pill\">Simplicity<\/span><span class=\"pill\">Cleanliness<\/span><span class=\"pill\">Clarity<\/span><span class=\"pill\">Freshness<\/span><span class=\"pill\">Modernity<\/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: Weddings, Purity, Peace.<\/li><li>In China: Mourning, Funerals.<\/li> <li>In India: Peace, Purity.<\/li> <li>In Japan: Purity, Truth.<\/li> <li>In Africa: Spirituality.<\/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\">Apple, Nike, and Tesla all use white extensively because it signals minimalism, innovation, and premium quality. Studies show white spaces reduce cognitive load and increase focus by up to 20%.<\/div><\/div><\/div>\n  <\/div>\n\n  <!-- RIGHT COLUMN -->\n  <div>\n    <div class=\"brands\"><div class=\"label\">Brands that use white<\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div><b style=\"font-size:14px\">Apple<\/b><div style=\"font-size:13px;color:#6B7280\">Innovation, simplicity<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div><b style=\"font-size:14px\">Nike<\/b><div style=\"font-size:13px;color:#6B7280\">Performance, excellence<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div><b style=\"font-size:14px\">Tesla<\/b><div style=\"font-size:13px;color:#6B7280\">Innovation, premium<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div><b style=\"font-size:14px\">Victoria&#8217;s Secret<\/b><div style=\"font-size:13px;color:#6B7280\">Romance, luxury<\/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, Healthcare, Luxury, Minimalist brands, Wedding\/Events, Interior design, Clean beauty.<br><br><span style=\"color:#9CA3AF\">Avoid if you want to stand out (use bright colors instead).<\/span><\/div><\/div>\n  <\/div>\n\n  <!-- LIFESTYLE SECTION - FULL WIDTH -->\n  <div class=\"life full-width\">\n    <div class=\"label\">Lifestyle Ideas \u2014 Where to use white<\/div>\n    <div class=\"life-grid\">\n      <div class=\"life-item\"><b>\ud83c\udfe0 Home Decor<\/b><span>Pure white for clean, modern spaces. Cream for cozy warmth. Eggshell for a soft, elegant feel.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udc8d Weddings<\/b><span>Pure white for classic weddings. Cream for vintage themes. Pearl for elegant, timeless.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udc57 Fashion<\/b><span>White is the ultimate wardrobe staple. Cream is a warm alternative. Off-white is trendy.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83c\udfa8 Branding<\/b><span>Tech, luxury, minimalist. Pure white = modern. Cream = vintage &amp; warm.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udcf1 UI \/ Web<\/b><span>Best for clean, modern design. Use #FFFFFF for backgrounds. Ensure high contrast with dark text.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83c\udfa8 Events &amp; Seasonal<\/b><span>White for weddings, spring, summer. Cream for autumn\/winter. Pearl for sophisticated events.<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Famous Brands That Use Black And White In Their Logos<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-wth-black-and-white-logos-1024x683.jpg\" alt=\"Businesses and brands with black and white logos and branding\" class=\"wp-image-3830\" srcset=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-wth-black-and-white-logos-1024x683.jpg 1024w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-wth-black-and-white-logos-300x200.jpg 300w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-wth-black-and-white-logos-800x533.jpg 800w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-wth-black-and-white-logos-500x333.jpg 500w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-wth-black-and-white-logos-768x512.jpg 768w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/companies-wth-black-and-white-logos.jpg 1500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/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 PURE WHITE<\/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\">WHITE 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:#94A3B8}\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>Monochromatic \u2014 Pure White + Grey Tones<\/span><button class=\"copy-all\" data-copy=\"#FFFFFF, #F5F5F5, #E5E5E5, #D5D5D5, #C5C5C5\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFFFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div class=\"pal-hex\">#FFFFFF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#F5F5F5\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#F5F5F5\"><\/div><div class=\"pal-hex\">#F5F5F5<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#E5E5E5\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#E5E5E5\"><\/div><div class=\"pal-hex\">#E5E5E5<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#D5D5D5\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#D5D5D5\"><\/div><div class=\"pal-hex\">#D5D5D5<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#C5C5C5\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#C5C5C5\"><\/div><div class=\"pal-hex\">#C5C5C5<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Warm Whites \u2014 White + Warm Undertones<\/span><button class=\"copy-all\" data-copy=\"#FFFFFF, #FFF8F0, #FFF5E6, #F5EDE0, #EED9C4\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFFFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div class=\"pal-hex\">#FFFFFF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFF8F0\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFF8F0\"><\/div><div class=\"pal-hex\">#FFF8F0<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFF5E6\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFF5E6\"><\/div><div class=\"pal-hex\">#FFF5E6<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#F5EDE0\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#F5EDE0\"><\/div><div class=\"pal-hex\">#F5EDE0<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#EED9C4\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#EED9C4\"><\/div><div class=\"pal-hex\">#EED9C4<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Cool Whites \u2014 White + Cool Undertones<\/span><button class=\"copy-all\" data-copy=\"#FFFFFF, #F5F8FF, #E8EDF5, #DCE3ED, #D0D8E5\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFFFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div class=\"pal-hex\">#FFFFFF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#F5F8FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#F5F8FF\"><\/div><div class=\"pal-hex\">#F5F8FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#E8EDF5\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#E8EDF5\"><\/div><div class=\"pal-hex\">#E8EDF5<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#DCE3ED\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#DCE3ED\"><\/div><div class=\"pal-hex\">#DCE3ED<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#D0D8E5\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#D0D8E5\"><\/div><div class=\"pal-hex\">#D0D8E5<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>White + Color Pop \u2014 White + Bold Colors<\/span><button class=\"copy-all\" data-copy=\"#FFFFFF, #FF0000, #0000FF, #00FF00, #FFA500\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFFFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div class=\"pal-hex\">#FFFFFF<\/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=\"#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=\"#00FF00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#00FF00\"><\/div><div class=\"pal-hex\">#00FF00<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFA500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFA500\"><\/div><div class=\"pal-hex\">#FFA500<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>White + Earth Tones<\/span><button class=\"copy-all\" data-copy=\"#FFFFFF, #F5EDE0, #D4A574, #964B00, #4B2500\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFFFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div class=\"pal-hex\">#FFFFFF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#F5EDE0\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#F5EDE0\"><\/div><div class=\"pal-hex\">#F5EDE0<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#D4A574\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#D4A574\"><\/div><div class=\"pal-hex\">#D4A574<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#964B00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#964B00\"><\/div><div class=\"pal-hex\">#964B00<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#4B2500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#4B2500\"><\/div><div class=\"pal-hex\">#4B2500<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>White + Pastels<\/span><button class=\"copy-all\" data-copy=\"#FFFFFF, #FFD1DC, #D1E8FF, #D4F1D4, #FFD1D1\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#FFFFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFFFFF;border:1px solid #E5E7EB\"><\/div><div class=\"pal-hex\">#FFFFFF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFD1DC\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFD1DC\"><\/div><div class=\"pal-hex\">#FFD1DC<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#D1E8FF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#D1E8FF\"><\/div><div class=\"pal-hex\">#D1E8FF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#D4F1D4\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#D4F1D4\"><\/div><div class=\"pal-hex\">#D4F1D4<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFD1D1\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFD1D1\"><\/div><div class=\"pal-hex\">#FFD1D1<\/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 WHITE<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-930de17\" data-block-id=\"930de17\"><style>.stk-930de17 .stk-block-subtitle__text{font-size:12px !important;}@media screen and (max-width:999px){.stk-930de17 .stk-block-subtitle__text{font-size:12px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">CLICK THE SWATCHES TO BE TAKEN TO FULL COLOR GUIDES <\/p><\/div>\n\n\n\n<style>\n.guides-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:1100px;margin:0 auto;font-family:Inter,sans-serif}\n@media(max-width:1000px){.guides-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.guides-grid{grid-template-columns:repeat(2,1fr)}}\n.g-card{border:1.5px solid #E5E7EB;background:#fff;border-radius:16px;padding:10px;display:block;transition:.15s;position:relative}\n.g-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.07);border-color:#94A3B8}\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#whiteToast{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#whiteToast.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:'Pure White',hex:'#FFFFFF',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/pure-white\/'},\n    {name:'Cream',hex:'#FFFDD0',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/cream\/'},\n    {name:'Eggshell',hex:'#F0EAD6',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/eggshell\/'},\n    {name:'Pearl',hex:'#F5F0E1',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/pearl\/'},\n    {name:'Snow',hex:'#FFFAFA',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/snow\/'},\n    {name:'Alabaster',hex:'#F0EDE5',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/alabaster\/'},\n    {name:'Linen',hex:'#FAF0E6',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/linen\/'},\n    {name:'Cotton',hex:'#FDFBF7',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/cotton\/'},\n    {name:'Seashell',hex:'#FFF5EE',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/seashell\/'},\n    {name:'Antique White',hex:'#FAEBD7',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/antique-white\/'},\n    {name:'Floral White',hex:'#FFFAF0',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/floral-white\/'},\n    {name:'Bone',hex:'#E3DAC9',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/bone\/'},\n    {name:'Chalk',hex:'#F2F0E6',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/chalk\/'},\n    {name:'Ghost White',hex:'#F8F8FF',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/ghost-white\/'},\n    {name:'Milk White',hex:'#FEFEFE',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/milk-white\/'},\n    {name:'White Smoke',hex:'#F5F5F5',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/white-smoke\/'},\n  ];\n  const grid=document.getElementById('guidesGrid');\n  const toast=document.getElementById('whiteToast');\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};${g.hex === '#FFFFFF' ? 'border:1px solid #E5E7EB;' : ''}\"><\/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: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\">WHITE 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 WHITE: 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#whiteToast{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#whiteToast.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\">109 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:#E3DAC9;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Bone<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E3DAC9\">#E3DAC9<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(227,218,201)\">rgb(227,218,201)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EDE6D6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White Chocolate<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EDE6D6\">#EDE6D6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,230,214)\">rgb(237,230,214)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EBE5D0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Abbey White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EBE5D0\">#EBE5D0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(235,229,208)\">rgb(235,229,208)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EDE9DD;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Abstract White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EDE9DD\">#EDE9DD<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,233,221)\">rgb(237,233,221)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F4EFE3;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Acadia White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F4EFE3\">#F4EFE3<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(244,239,227)\">rgb(244,239,227)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EFECE1;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Acoustic White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EFECE1\">#EFECE1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(239,236,225)\">rgb(239,236,225)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F1EEE4;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Atrium White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F1EEE4\">#F1EEE4<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(241,238,228)\">rgb(241,238,228)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EDECE6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Commercial White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EDECE6\">#EDECE6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,236,230)\">rgb(237,236,230)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F2F3F4;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Anti-Flash White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F2F3F4\">#F2F3F4<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(242,243,244)\">rgb(242,243,244)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EDF2F8;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Aircraft White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EDF2F8\">#EDF2F8<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,242,248)\">rgb(237,242,248)<\/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:#ECF3F9;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Link White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#ECF3F9\">#ECF3F9<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(236,243,249)\">rgb(236,243,249)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F7FCFE;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Paper White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F7FCFE\">#F7FCFE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(247,252,254)\">rgb(247,252,254)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EBF6F7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cup Cake<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EBF6F7\">#EBF6F7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(235,246,247)\">rgb(235,246,247)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#DBE9F4;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Azureish White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#DBE9F4\">#DBE9F4<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(219,233,244)\">rgb(219,233,244)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F8F8FF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Ghost White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F8F8FF\">#F8F8FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(248,248,255)\">rgb(248,248,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E6E8FA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Glitter<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E6E8FA\">#E6E8FA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(230,232,250)\">rgb(230,232,250)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EDF1FE;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Brilliant White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EDF1FE\">#EDF1FE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,241,254)\">rgb(237,241,254)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E9EDF6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Coconut White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E9EDF6\">#E9EDF6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(233,237,246)\">rgb(233,237,246)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F2F7FD;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cotton Ball<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F2F7FD\">#F2F7FD<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(242,247,253)\">rgb(242,247,253)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#DDD6E1;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Titan White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#DDD6E1\">#DDD6E1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(238,238,255)\">rgb(238,238,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F8F4FF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Magnolia<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F8F4FF\">#F8F4FF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(248,244,255)\">rgb(248,244,255)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F6F1F4;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Soft Peach<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F6F1F4\">#F6F1F4<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(246,241,244)\">rgb(246,241,244)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FAFAFA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Daisy<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FAFAFA\">#FAFAFA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(250,250,250)\">rgb(250,250,250)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FEFEFA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Baby Powder<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FEFEFA\">#FEFEFA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(254,254,250)\">rgb(254,254,250)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FCFFF9;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Ceramic<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FCFFF9\">#FCFFF9<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(252,255,249)\">rgb(252,255,249)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F7E9D2;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Albescent White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F7E9D2\">#F7E9D2<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(243,222,202)\">rgb(243,222,202)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F4F5F0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Bright White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F4F5F0\">#F4F5F0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(244,245,240)\">rgb(244,245,240)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F1F2EE;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Delicate White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F1F2EE\">#F1F2EE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(241,242,238)\">rgb(241,242,238)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EEEBE3;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Broken White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EEEBE3\">#EEEBE3<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(238,235,227)\">rgb(238,235,227)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F0EDDB;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cake Batter<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F0EDDB\">#F0EDDB<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(240,237,219)\">rgb(240,237,219)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F3EAD3;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Linen<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F3EAD3\">#F3EAD3<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(243,234,211)\">rgb(243,234,211)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F7E7CE;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Champagne<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F7E7CE\">#F7E7CE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(247,231,206)\">rgb(247,231,206)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EDEAE0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Alabaster<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EDEAE0\">#EDEAE0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,234,224)\">rgb(237,234,224)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F5F5DC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Beige<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F5F5DC\">#F5F5DC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(245,245,220)\">rgb(245,245,220)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFF8DC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cornsilk<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFF8DC\">#FFF8DC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,248,220)\">rgb(255,248,220)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFFCEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Island Spice<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFFCEC\">#FFFCEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,252,236)\">rgb(255,252,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFFFF0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Ivory<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFFFF0\">#FFFFF0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,255,240)\">rgb(255,255,240)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F2EFE1;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Coconut Butter<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F2EFE1\">#F2EFE1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(242,239,225)\">rgb(242,239,225)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFEFD5;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Papaya Whip<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFEFD5\">#FFEFD5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,239,213)\">rgb(255,239,213)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFDEAD;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Navajo White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFDEAD\">#FFDEAD<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,222,173)\">rgb(255,222,173)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EFDFBB;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dutch White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EFDFBB\">#EFDFBB<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(239,223,187)\">rgb(239,223,187)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F0EAD6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Eggshell<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F0EAD6\">#F0EAD6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(240,234,214)\">rgb(240,234,214)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F1E9D2;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Parchment<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F1E9D2\">#F1E9D2<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(241,233,210)\">rgb(241,233,210)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F8F8E8;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Photon White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F8F8E8\">#F8F8E8<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(248,248,232)\">rgb(248,248,232)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FDFFF5;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Milk<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FDFFF5\">#FDFFF5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(253,255,245)\">rgb(253,255,245)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFFAF0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Floral White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFFAF0\">#FFFAF0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,250,240)\">rgb(255,250,240)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFF5EE;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Seashell<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFF5EE\">#FFF5EE<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,245,238)\">rgb(255,245,238)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F8EEEC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pink Salt<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F8EEEC\">#F8EEEC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(248,238,236)\">rgb(248,238,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFF0F5;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Lavender Blush<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFF0F5\">#FFF0F5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,240,245)\">rgb(255,240,245)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFFAFA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Rose White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFFAFA\">#FFFAFA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,250,250)\">rgb(255,250,250)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FCFBFC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Frost<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FCFBFC\">#FCFBFC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(252,251,252)\">rgb(252,251,252)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F7F5F6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cascading White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F7F5F6\">#F7F5F6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(247,245,246)\">rgb(247,245,246)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E7EAE5;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Feather White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E7EAE5\">#E7EAE5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(231,234,229)\">rgb(231,234,229)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EBF5F0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Harp<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EBF5F0\">#EBF5F0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(235,245,240)\">rgb(235,245,240)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FBFCF8;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pearl<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FBFCF8\">#FBFCF8<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(251,252,248)\">rgb(251,252,248)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#BFD4BF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Paris White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#BFD4BF\">#BFD4BF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(194,216,211)\">rgb(194,216,211)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F1F9EC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Peppermint<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F1F9EC\">#F1F9EC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(241,249,236)\">rgb(241,249,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F0FFF0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Honeydew<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F0FFF0\">#F0FFF0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(240,255,240)\">rgb(240,255,240)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F5FFFA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Mint Cream<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F5FFFA\">#F5FFFA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(245,255,250)\">rgb(245,255,250)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F0EBE3;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Greek Villa<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F0EBE3\">#F0EBE3<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(240,235,227)\">rgb(240,235,227)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EBE4D8;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Hog Bristle Quarter<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EBE4D8\">#EBE4D8<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(235,228,216)\">rgb(235,228,216)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F1F0E5;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Huntington White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F1F0E5\">#F1F0E5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(241,240,229)\">rgb(241,240,229)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F4F0EC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Isabelline<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F4F0EC\">#F4F0EC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(244,240,236)\">rgb(244,240,236)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E7EAEA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Lexicon<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E7EAEA\">#E7EAEA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(231,234,234)\">rgb(231,234,234)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F2F2F1;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Lexicon Quarter<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F2F2F1\">#F2F2F1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(242,242,241)\">rgb(242,242,241)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E7E7E7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Mercury<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E7E7E7\">#E7E7E7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(231,231,231)\">rgb(231,231,231)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E3DFD2;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Oyster White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E3DFD2\">#E3DFD2<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(227,223,210)\">rgb(227,223,210)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F2EBDD;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Merino<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F2EBDD\">#F2EBDD<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(242,235,221)\">rgb(242,235,221)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F0EEE4;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Old Wood<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F0EEE4\">#F0EEE4<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(240,238,228)\">rgb(240,238,228)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFF1E6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Coconut<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFF1E6\">#FFF1E6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,241,230)\">rgb(255,241,230)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FAEBD7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Antique White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FAEBD7\">#FAEBD7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(250,235,215)\">rgb(250,235,215)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FDF5E6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Old Lace<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FDF5E6\">#FDF5E6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(253,245,230)\">rgb(253,245,230)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F8F9F5;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Orange White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F8F9F5\">#F8F9F5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(248,249,245)\">rgb(248,249,245)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F5FEFD;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Snow<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F5FEFD\">#F5FEFD<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(245,254,253)\">rgb(245,254,253)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F8FBF8;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Snow Drift<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F8FBF8\">#F8FBF8<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(248,251,248)\">rgb(248,251,248)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EEF1EA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Shadow White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EEF1EA\">#EEF1EA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(238,241,234)\">rgb(238,241,234)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E1E1DD;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Night White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E1E1DD\">#E1E1DD<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(225,225,221)\">rgb(225,225,221)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E5E4E2;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Platinum<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E5E4E2\">#E5E4E2<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(229,228,226)\">rgb(229,228,226)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E8EAE6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pacific Pearl<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E8EAE6\">#E8EAE6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(232,234,230)\">rgb(232,234,230)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EAE9E0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Polar Bear<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EAE9E0\">#EAE9E0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(234,233,224)\">rgb(234,233,224)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EDEAE2;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Retro White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EDEAE2\">#EDEAE2<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,234,226)\">rgb(237,234,226)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EFEDE3;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Simply White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EFEDE3\">#EFEDE3<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(239,237,227)\">rgb(239,237,227)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EEECE6;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Natural White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EEECE6\">#EEECE6<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(238,236,230)\">rgb(238,236,230)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F3F0E8;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Spring<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F3F0E8\">#F3F0E8<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(243,240,232)\">rgb(243,240,232)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FDF9EF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White Heat<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FDF9EF\">#FDF9EF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(253,249,239)\">rgb(253,249,239)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FBF6F0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Stone White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FBF6F0\">#FBF6F0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(251,246,240)\">rgb(251,246,240)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FAF5EF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Rice<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FAF5EF\">#FAF5EF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(250,245,239)\">rgb(250,245,239)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#DEDDDB;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Spatial White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#DEDDDB\">#DEDDDB<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(222,221,219)\">rgb(222,221,219)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E2E3E0;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Winter White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E2E3E0\">#E2E3E0<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(223,223,213)\">rgb(223,223,213)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E7E8E2;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White Diamond<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E7E8E2\">#E7E8E2<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(231,232,226)\">rgb(231,232,226)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#ECE9E4;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White Sand<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#ECE9E4\">#ECE9E4<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(236,233,228)\">rgb(236,233,228)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F0EFE7;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White Dove<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F0EFE7\">#F0EFE7<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(240,239,231)\">rgb(240,239,231)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EAE8E1;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White Whisper<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EAE8E1\">#EAE8E1<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(234,232,225)\">rgb(234,232,225)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#E9E9E4;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White Wisp<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#E9E9E4\">#E9E9E4<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(233,233,228)\">rgb(233,233,228)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#EDEFEF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White on White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#EDEFEF\">#EDEFEF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(237,239,239)\">rgb(237,239,239)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F8F8F4;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Vivid White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F8F8F4\">#F8F8F4<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(248,248,244)\">rgb(248,248,244)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#F5F5F5;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">White Smoke<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#F5F5F5\">#F5F5F5<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(245,245,245)\">rgb(245,245,245)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FEFFFC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Whitewash<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FEFFFC\">#FEFFFC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(254,255,252)\">rgb(254,255,252)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FDFCFA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Vista White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FDFCFA\">#FDFCFA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(253,252,250)\">rgb(253,252,250)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FBFCFA;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Powder<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FBFCFA\">#FBFCFA<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(251,252,250)\">rgb(251,252,250)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FCFCFC;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Swan White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FCFCFC\">#FCFCFC<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(252,252,252)\">rgb(252,252,252)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#FFFFFF;--text-color:#000\"><td><div class=\"cell-swatch\"><div class=\"cell-name\" style=\"border:1px solid #E5E7EB;padding:2px 6px;border-radius:4px;\">White<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#FFFFFF\">#FFFFFF<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(255,255,255)\">rgb(255,255,255)<\/span><\/td><\/tr>\n    <\/tbody>\n  <\/table>\n<\/div>\n\n<script>\n(function(){\n  const toast=document.getElementById('whiteToast');\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\">WHITE COLOR PALETTE GENERATOR<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-e3c9a55\" data-block-id=\"e3c9a55\"><style>.stk-e3c9a55 .stk-block-subtitle__text{font-size:12px !important;}@media screen and (max-width:999px){.stk-e3c9a55 .stk-block-subtitle__text{font-size:12px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">PICK ANY COLOR AND INSTANTLY GENERATE MATCHING COLOR COMBINATIONS<\/p><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&#038;family=Inter:wght@500;700&#038;display=swap\" rel=\"stylesheet\">\n<style>\n.gen-wrap{max-width:900px;margin:2.5rem auto;font-family:Inter,sans-serif;border:1.5px solid #E5E7EB;border-radius:20px;background:#fff;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.05)}\n.gen-input-row{display:flex;gap:12px;align-items:center;background:#F9FAFB;border:1.5px solid #E5E7EB;border-radius:14px;padding:12px;flex-wrap:wrap}\n.gen-color-input{width:64px;height:64px;border:none;border-radius:12px;cursor:pointer;padding:0}\n.gen-hex-pill{font-family:monospace;font-size:14px;font-weight:700;background:#fff;border:1.5px solid #E5E7EB;border-radius:10px;padding:8px 12px}\n.gen-preview{margin-top:14px;border-radius:14px;padding:18px;color:#000;text-align:center;transition:.2s}\n.gen-values{font-family:monospace;font-size:12px;background:rgba(0,0,0,.1);display:inline-block;padding:8px 12px;border-radius:10px;margin-top:10px}\n.gen-row{margin:18px 0}\n.gen-row-title{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6B7280;border-bottom:1.5px solid #F3F4F6;padding-bottom:6px;margin-bottom:10px;text-align:center}\n.gen-swatches{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}\n.g-swatch-card{border:1.5px solid #E5E7EB;border-radius:14px;padding:8px;background:#fff;width:82px;text-align:center;transition:.15s;position:relative}\n.g-swatch-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.08)}\n.g-swatch{height:52px;border-radius:10px;border:1px solid rgba(0,0,0,.06);margin-bottom:6px}\n.g-hex-small{font-family:monospace;font-size:10px;background:#F3F4F6;border-radius:6px;padding:2px 5px;display:inline-block;cursor:pointer;transition:.15s}\n.g-hex-small:hover{background:#0F172A;color:#fff}\n.copy-badge{position:absolute;top:6px;right:6px;background:#0F172A;color:#fff;font-size:9px;font-weight:800;padding:3px 6px;border-radius:6px;opacity:0;transition:.2s;pointer-events:none}\n.g-swatch-card.copied .copy-badge{opacity:1}\n.gen-download{margin-top:18px;text-align:center;background:#F8FAFC;border:2px dashed #CBD5E1;border-radius:14px;padding:14px}\n.gen-btn{background:#0F172A;color:#fff;border:none;padding:10px 18px;border-radius:999px;font-weight:700;cursor:pointer}\n.gen-btn:hover{background:#000}\n#whiteToast{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#whiteToast.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=\"#FFFFFF\" class=\"gen-color-input\">\n    <div class=\"gen-hex-pill\" id=\"baseHexNew\">#FFFFFF<\/div>\n    <div style=\"font-size:12px;color:#6B7280\">Click the square to pick any white \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\">#FFFFFF<\/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=\"whiteToast\">Copied!<\/div>\n\n<script>\n(function(){\nconst $=s=>document.getElementById(s);\nconst toast=$('whiteToast');\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};${c === '#FFFFFF' ? 'border:1px solid #E5E7EB;' : ''}\"><\/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 WHITE 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\/white-hex-codes-683x1024.png\" alt=\"White hex codes and color names chart - Infographic\" class=\"wp-image-3834\" style=\"width:500px\" srcset=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/white-hex-codes-683x1024.png 683w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/white-hex-codes-200x300.png 200w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/white-hex-codes-800x1200.png 800w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/white-hex-codes-500x750.png 500w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/white-hex-codes-768x1152.png 768w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/white-hex-codes.png 1000w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-e20b98f\" data-block-id=\"e20b98f\"><style>.stk-e20b98f {margin-bottom:3px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">UNDERSTANDING COLOR CODES<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-cffc6de learn\" id=\"learn\" data-block-id=\"cffc6de\"><h2 class=\"stk-block-heading__text\">LEARN ABOUT WHITE COLOR CODES<\/h2><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">When it comes to digital design, white hex codes are used to create the perfect shade of white. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">White Hex Codes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hex codes are six-digit codes used to represent colors in graphic and web design. Each hex code is made up of the letters A-F and the numbers 0-9 and is displayed in the following format <strong>#RRGGBB<\/strong>.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The first two digits in the hex code represent the <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/red-color-codes\/\"><strong>red color value<\/strong><\/a>, the second two digits represent the <strong><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/green-color-codes\/\">green value<\/a><\/strong>, and the final two digits represent the <strong><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-color-codes\/\">blue value<\/a><\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The white hex code is #FFFFFF.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">When using hex codes, F specifies that a color is completely saturated while 0 tells us that that color is not used at all. In the case of white, we can see from the hex code that it is a combination of the primary colors red, green and blue and that each color is completely saturated.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">White RGB Codes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Just like hex color codes, RGB codes are another way to represent colors. RGB stands for red, green, and blue, which are the primary colors of light. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each color is represented by a number between 0 and 255. In the case of white, the RGB color code is (255, 255, 255). This means that the red value is 255, the green value is 255, and the blue value is 255.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The RGB code for white is RGB(255,255,255).<\/h4>\n\n\n\n<h2 class=\"wp-block-heading\">Why Is White 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>white is associated with purity, simplicity, cleanliness, clarity, freshness, and modernity.  <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because of this, white is a very popular color choice for everything from home decor to logos. In fact, white is <strong>one of the most commonly used colors in branding and marketing<\/strong> because it is known to evoke feelings of cleanliness and simplicity.<\/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-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 WHITES<\/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:#475569;background:#F8FAFC;border:1px solid #CBD5E1;border-radius:999px;padding:2px 7px;display:inline-block;margin-bottom:6px}\n<\/style>\n\n<div class=\"tools-grid\" id=\"tools\">\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/color-palette-generator-from-photo\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#FFFBEB;border-color:#FDE68A;color:#92400E\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><path d=\"M9 9h.01M15 9h.01M9 15h.01M15 15h.01M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M18 9h3M3 15h3M18 15h3\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-kicker\">Most Popular<\/div>\n      <div class=\"tool-name\">Palette Generator From Photo<\/div>\n      <div class=\"tool-desc\">Upload any image &#038; extract 5 dominant colors instantly.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/image-color-picker\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><path d=\"M12 2v6M12 16v6M4.9 4.9l4.2 4.2M14.9 14.9l4.2 4.2M2 12h6M16 12h6M4.9 19.1l4.2-4.2M14.9 9.1l4.2-4.2\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-name\">Image Color Picker<\/div>\n      <div class=\"tool-desc\">Click any pixel to get HEX, RGB, HSL + CMYK with magnifier.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/color-matching-tool\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#EEF2FF;border-color:#C7D2FE;color:#4338CA\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-name\">Color Matching Tool<\/div>\n      <div class=\"tool-desc\">Test if 2 colors match with a 0-100% score + live preview.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/complementary-color-picker\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#FFF7ED;border-color:#FED7AA;color:#9A3412\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 3a9 9 0 010 18V3z\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-name\">Complementary Picker<\/div>\n      <div class=\"tool-desc\">Find exact 180\u00b0 opposites for high-contrast CTAs.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/wcag-color-contrast-checker-tool\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#F0FDF4;border-color:#BBF7D0;color:#166534\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 8v8M8 12h8\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-kicker\">For Accessibility<\/div>\n      <div class=\"tool-name\">WCAG Contrast Checker<\/div>\n      <div class=\"tool-desc\">Check AA \/ AAA readability with live preview.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n  <a class=\"tool-card\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-tools\/color-converter-hex-to-rgb-cmyk-and-hsl\/\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"tool-icon\" style=\"background:#FAF5FF;border-color:#E9D5FF;color:#6B21A8\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><path d=\"M7 16V8l-3 3M17 8v8l3-3\"\/><path d=\"M12 8v8\"\/><\/svg>\n    <\/div>\n    <div>\n      <div class=\"tool-name\">Color Code Converter<\/div>\n      <div class=\"tool-desc\">Convert HEX \u2192 RGB, CMYK, HSL in one click.<\/div>\n    <\/div>\n    <div class=\"tool-arrow\">\u2197<\/div>\n  <\/a>\n\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-36cbbe6 stk-block-background\" data-block-id=\"36cbbe6\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-36cbbe6-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-c8d7e90\" data-v=\"4\" data-block-id=\"c8d7e90\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-c8d7e90-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-c8d7e90-inner-blocks\">\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-327c95c\" data-block-id=\"327c95c\"><style>.stk-327c95c {margin-bottom:0px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle has-text-align-center\">KEEP GOING<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-cfbc7ed\" id=\"other-colors\" data-block-id=\"cfbc7ed\"><style>.stk-cfbc7ed {margin-bottom:0px !important;}<\/style><h2 class=\"stk-block-heading__text has-text-align-center\">EXPLORE OTHER COLOR HUBS<\/h2><\/div>\n\n\n\n<style>\n.color-hub-closer{max-width:900px;margin:32px auto 0;padding:14px 12px;font-family:Inter,sans-serif;text-align:center}\n.closer-dots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}\n.color-dot-link{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#fff;border:1.5px solid #E5E7EB;font-size:12.5px;font-weight:700;color:#334155;text-decoration:none;transition:.15s}\n.color-dot-link:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.07);border-color:#CBD5E1;color:#0F172A}\n.dot{width:20px;height:20px;border-radius:50%;display:inline-block;flex-shrink:0;border:1px solid rgba(0,0,0,.08)}\n<\/style>\n\n<div class=\"color-hub-closer\" id=\"other-colors\">\n  <div class=\"closer-dots\">\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/red-color-codes\/\"><span class=\"dot\" style=\"background:#E62E3E\"><\/span>Red<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/orange-color-codes\/\"><span class=\"dot\" style=\"background:#FF8E1F\"><\/span>Orange<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/yellow-color-codes\/\"><span class=\"dot\" style=\"background:#F5C518\"><\/span>Yellow<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/green-color-codes\/\"><span class=\"dot\" style=\"background:#2EAB4A\"><\/span>Green<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-color-codes\/\"><span class=\"dot\" style=\"background:#2A8BD7\"><\/span>Blue<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/purple-color-codes\/\"><span class=\"dot\" style=\"background:#7A4ED1\"><\/span>Purple<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/pink-color-codes\/\"><span class=\"dot\" style=\"background:#D93D8D\"><\/span>Pink<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/brown-color-codes\/\"><span class=\"dot\" style=\"background:#8B5A2B\"><\/span>Brown<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/black-color-codes\/\"><span class=\"dot\" style=\"background:#1A1A1A\"><\/span>Black<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/gray-color-codes\/\"><span class=\"dot\" style=\"background:#9E9E9E\"><\/span>Gray<\/a>\n    <a class=\"color-dot-link\" href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/white-color-codes\/\"><span class=\"dot\" style=\"background:#FFFFFF\"><\/span>White<\/a>\n  <\/div>\n<\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WHITE COLOR HUB 95+ SHADES OF WHITE When most people think of white, they often have a very specific shade of white in mind &#8211; usually a bright white color, like freshly fallen snow, that is crisp and clean! However, don&#8217;t be fooled, white comes in an incredibly wide range of colors and shades, ranging [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3833,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_important_terms":"","footnotes":""},"categories":[217,227],"tags":[25,24,55,30],"class_list":["post-3821","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-colors","category-white","tag-color-codes","tag-color-psychology","tag-hcc","tag-white"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7},"has_hero_section":"disabled","vertical_spacing_source":"custom","content_area_spacing":"bottom","disable_featured_image":"yes","disable_share_box":"yes"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3821","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=3821"}],"version-history":[{"count":7,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3821\/revisions"}],"predecessor-version":[{"id":16775,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3821\/revisions\/16775"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/media\/3833"}],"wp:attachment":[{"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/media?parent=3821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/categories?post=3821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/tags?post=3821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}