{"id":3837,"date":"2024-09-09T03:41:10","date_gmt":"2024-09-09T03:41:10","guid":{"rendered":"https:\/\/www.notebookandpenguin.com\/rebuild\/?p=3837"},"modified":"2026-07-24T11:33:25","modified_gmt":"2026-07-24T11:33:25","slug":"black-color-codes","status":"publish","type":"post","link":"https:\/\/www.notebookandpenguin.com\/rebuild\/black-color-codes\/","title":{"rendered":"97+ Brilliant Shades Of Black: 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:#000000 !important;background-image:url(https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/black-color-codes-chart.jpg) !important;min-height:338px !important;align-items:center !important;display:flex !important;}.stk-768afb3:before{background-color:#000000 !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:#ffffff !important;border-top-left-radius:20px !important;border-top-right-radius:20px !important;border-bottom-right-radius:20px !important;border-bottom-left-radius:20px !important;overflow:hidden !important;align-items:center !important;max-width:205px !important;min-width:auto !important;padding-top:var(--stk--preset--spacing--20, 0.44rem) !important;padding-right:var(--stk--preset--spacing--20, 0.44rem) !important;padding-bottom:var(--stk--preset--spacing--20, 0.44rem) !important;padding-left:var(--stk--preset--spacing--20, 0.44rem) !important;margin-right:auto !important;margin-left:auto !important;display:flex !important;}.stk-e39ec37:before{background-color:#ffffff !important;}.stk-e39ec37 .stk-block-subtitle__text{font-size:14px !important;color:#000000 !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>BLACK 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-black\" data-block-id=\"e483374\"><style>.stk-e483374 {margin-bottom:9px !important;}.stk-e483374 .stk-block-heading__text{font-size:58px !important;color:#ffffff !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 BLACK<\/h2><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\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:#ffffff !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\">Black is one of the world&#8217;s most mysterious, sophisticated, powerful, and elegant colors &#8211; and it can add a sleek and modern look to any design! Shades of black are incredibly versatile and it can be used in a variety of different ways with many different color combinations to create the perfect color palette. <\/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#trueBlackBlock, #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  #trueBlackBlock, #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=\"#trueBlackBlock\">Pure Black<\/a>\n    <a class=\"hub-link-s\" href=\"#psychology\">Psychology Of Black<\/a>\n    <a class=\"hub-link-s\" href=\"#palettes\">Color Palettes<\/a>\n    <a class=\"hub-link-s\" href=\"#popular\">Popular Shades of Black<\/a>\n    <a class=\"hub-link-s\" href=\"#library\">Black 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 Black<\/a>\n    <a class=\"hub-link-s\" href=\"#resources\">Resources<\/a>\n    <a class=\"hub-link-s\" href=\"#swatch-book\">Color Swatch Book<\/a>\n    <a class=\"hub-link-s\" href=\"#tools\">Tools<\/a>\n<a class=\"hub-link-s\" href=\"#other-colors\">Other Colors<\/a>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  const links=[...document.querySelectorAll('.hub-link-s')];\n  const secs=links.map(a=>document.querySelector(a.getAttribute('href'))).filter(Boolean);\n  \n  \/\/ 1. Active state\n  function setActive(){\n    let cur='';\n    for(let s of secs){ if(window.scrollY >= s.offsetTop - 180) cur='#'+s.id; }\n    links.forEach(a=>a.classList.toggle('active', a.getAttribute('href')===cur));\n  }\n  window.addEventListener('scroll',setActive); setActive();\n\n  \/\/ 2. Middle-of-page landing when clicked\n  links.forEach(link=>{\n    link.addEventListener('click', function(e){\n      e.preventDefault();\n      const target=document.querySelector(this.getAttribute('href'));\n      if(!target) return;\n      \/\/ calculate position so heading lands in middle of screen\n      const offset=90+20; \/\/ your 90px top + 20px gap\n      const targetTop=target.getBoundingClientRect().top + window.pageYOffset;\n      const middlePos=targetTop - offset - (window.innerHeight\/3); \/\/ lands at 1\/3 down the page\n      window.scrollTo({top:middlePos, behavior:'smooth'});\n    });\n  });\n})();\n<\/script>\n\n\n\n<div style=\"height:76px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&amp;family=Inter:wght@500;700&amp;display=swap\" rel=\"stylesheet\">\n<style>\n.true-black-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-black-block{grid-template-columns:1fr}}\n.true-swatch{height:380px;background:#000000;border-radius:20px;position:relative;padding:14px;display:flex;align-items:flex-end;box-shadow:0 12px 28px rgba(0,0,0,.22)}\n.true-pill{width:100%;background:#ffffff;border-radius:999px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:#000000;letter-spacing:.2px}\n.true-pill button{background:none;border:0;cursor:pointer;font-size:16px;color:#000000}\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,#1A1A1A 0%,#0D0D0D 25%,#000000 50%,#000000 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#blackToast{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#blackToast.show{opacity:1;transform:translateX(-50%) translateY(0)}\n<\/style>\n\n<div class=\"true-black-block\" id=\"trueBlackBlock\">\n  <div>\n    <div class=\"true-swatch\">\n      <div class=\"true-pill\"><span>PURE BLACK \/ TRUE BLACK #000000<\/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>#1A1A1A<\/span><span>#000000<\/span><span>#000000<\/span><\/div>\n    <\/div>\n  <\/div>\n  <div>\n    <div class=\"true-title\"><h2>Pure Black \/ True Black<\/h2><\/div>\n    <div class=\"true-sub\">Pure Black or True Black is the deepest and most intense shade of black. Other shades of black are created when you add small amounts of other colors or lighten the black slightly.<\/div>\n    <div class=\"true-grid\">\n      <div class=\"true-card\" data-copy=\"#000000\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">HEX<\/div><div class=\"true-value\">#000000<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"0, 0, 0\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">RGB<\/div><div class=\"true-value\">0, 0, 0<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"0\u00b0, 0%, 0%\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">HSL<\/div><div class=\"true-value\">0\u00b0, 0%, 0%<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"0%, 0%, 0%, 100%\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">CMYK<\/div><div class=\"true-value\">0%, 0%, 0%, 100%<\/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=\"#FFFFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Complementary<\/div><div class=\"true-value\"><span class=\"true-dot\" style=\"background:#FFFFFF\"><\/span>#FFFFFF<\/div><\/div>\n      <div class=\"true-card\" data-copy=\"0.00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Luminance<\/div><div class=\"true-value\">0.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=\"#9 Worldwide\"><span class=\"copy-hint\">Copied!<\/span><div class=\"true-label\">Popularity<\/div><div class=\"true-value\">#9 Worldwide<\/div><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<div id=\"blackToast\">Copied to clipboard!<\/div>\n\n<script>\n(function(){\n  const toast=document.getElementById('blackToast');\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'),'#000000');\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 BLACK<\/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:#1C1C1C;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\">Black Creates Feelings Of Power and Sophistication<\/div>\n    <div class=\"trust-p\">When people see black they are reminded of elegance, mystery, and strength. Studies have found that black evokes feelings of power, signals authority, and creates a sense of sophistication and luxury. In business, brands use black to convey premium quality, timelessness, and boldness.<\/div>\n    \n    <div class=\"trust-cards\">\n      <div class=\"mini\"><div class=\"label\">Emotions<\/div><div class=\"pills\"><span class=\"pill\">Power<\/span><span class=\"pill\">Sophistication<\/span><span class=\"pill\">Elegance<\/span><span class=\"pill\">Mystery<\/span><span class=\"pill\">Authority<\/span><span class=\"pill\">Timelessness<\/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: Formal, Power, Elegance.<\/li><li>In China: Mourning, Celebration.<\/li> <li>In India: Darkness, Evil.<\/li> <li>In Japan: Mystery, Nobility.<\/li> <li>In Africa: Maturity, Wisdom.<\/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\">Chanel, Gucci, and Louis Vuitton all use black extensively because it signals timeless luxury and sophistication. Studies show black is the most commonly chosen color for luxury products and formal wear.<\/div><\/div><\/div>\n  <\/div>\n\n  <!-- RIGHT COLUMN -->\n  <div>\n    <div class=\"brands\"><div class=\"label\">Brands that use black<\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#000000\"><\/div><div><b style=\"font-size:14px\">Chanel<\/b><div style=\"font-size:13px;color:#6B7280\">Luxury, elegance<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#000000\"><\/div><div><b style=\"font-size:14px\">Gucci<\/b><div style=\"font-size:13px;color:#6B7280\">Luxury, boldness<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#000000\"><\/div><div><b style=\"font-size:14px\">Louis Vuitton<\/b><div style=\"font-size:13px;color:#6B7280\">Timeless, premium<\/div><\/div><\/div>\n      <div class=\"brand-row\"><div class=\"dot\" style=\"background:#000000\"><\/div><div><b style=\"font-size:14px\">Mercedes-Benz<\/b><div style=\"font-size:13px;color:#6B7280\">Engineering, excellence<\/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\">Luxury, Fashion, Technology, Corporate, Automotive, Premium products, Formal wear.<br><br><span style=\"color:#9CA3AF\">Avoid if you want to be seen as approachable or playful.<\/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 black<\/div>\n    <div class=\"life-grid\">\n      <div class=\"life-item\"><b>\ud83c\udfe0 Home Decor<\/b><span>Pure black for dramatic statements. Obsidian for modern accents. Pair with white, gold, and warm woods.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udc8d Weddings<\/b><span>Pure black for modern, elegant themes. Midnight black for romantic. Ebony for classic sophistication.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udc57 Fashion<\/b><span>Black is the ultimate wardrobe staple. Formal, casual, everything in between. Always in style.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83c\udfa8 Branding<\/b><span>Luxury, tech, fashion. Pure black = premium. Soft black = approachable &amp; friendly.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83d\udcf1 UI \/ Web<\/b><span>Best for dark mode. Use #000000 for backgrounds. Ensure high contrast with light text.<\/span><\/div>\n      <div class=\"life-item\"><b>\ud83c\udfad Events &amp; Seasonal<\/b><span>Black for formal events, winter, evening. Sophisticated for galas and premieres.<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Famous Brands That Use Black 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 BLACK<\/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\">BLACK 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 Black + Grey Tones<\/span><button class=\"copy-all\" data-copy=\"#000000, #1A1A1A, #333333, #4D4D4D, #666666\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#000000\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#000000\"><\/div><div class=\"pal-hex\">#000000<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#1A1A1A\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#1A1A1A\"><\/div><div class=\"pal-hex\">#1A1A1A<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#333333\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#333333\"><\/div><div class=\"pal-hex\">#333333<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#4D4D4D\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#4D4D4D\"><\/div><div class=\"pal-hex\">#4D4D4D<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#666666\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#666666\"><\/div><div class=\"pal-hex\">#666666<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Black + White \u2014 Classic High Contrast<\/span><button class=\"copy-all\" data-copy=\"#000000, #FFFFFF, #666666, #999999, #CCCCCC\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#000000\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#000000\"><\/div><div class=\"pal-hex\">#000000<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFFFFF\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFFFFF\"><\/div><div class=\"pal-hex\">#FFFFFF<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#666666\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#666666\"><\/div><div class=\"pal-hex\">#666666<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#999999\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#999999\"><\/div><div class=\"pal-hex\">#999999<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#CCCCCC\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#CCCCCC\"><\/div><div class=\"pal-hex\">#CCCCCC<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Black + Gold \u2014 Luxury &amp; Elegance<\/span><button class=\"copy-all\" data-copy=\"#000000, #D4AF37, #FFD700, #C9A84C, #B8860B\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#000000\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#000000\"><\/div><div class=\"pal-hex\">#000000<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#D4AF37\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#D4AF37\"><\/div><div class=\"pal-hex\">#D4AF37<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFD700\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFD700\"><\/div><div class=\"pal-hex\">#FFD700<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#C9A84C\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#C9A84C\"><\/div><div class=\"pal-hex\">#C9A84C<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#B8860B\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#B8860B\"><\/div><div class=\"pal-hex\">#B8860B<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Black + Vibrant Colors \u2014 Bold Contrast<\/span><button class=\"copy-all\" data-copy=\"#000000, #FF0000, #0000FF, #FFA500, #00FF00\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#000000\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#000000\"><\/div><div class=\"pal-hex\">#000000<\/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=\"#FFA500\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFA500\"><\/div><div class=\"pal-hex\">#FFA500<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#00FF00\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#00FF00\"><\/div><div class=\"pal-hex\">#00FF00<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"pal-section\">\n    <div class=\"pal-label\"><span>Black + Earth Tones \u2014 Natural &amp; Grounded<\/span><button class=\"copy-all\" data-copy=\"#000000, #964B00, #D4A574, #F5EDE0, #4B2500\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#000000\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#000000\"><\/div><div class=\"pal-hex\">#000000<\/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=\"#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=\"#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=\"#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>Black + Jewel Tones \u2014 Rich &amp; Opulent<\/span><button class=\"copy-all\" data-copy=\"#000000, #800080, #FFC0CB, #008080, #FFD700\">Copy palette<\/button><\/div>\n    <div class=\"pal-row\">\n      <div class=\"pal-chip\" data-copy=\"#000000\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#000000\"><\/div><div class=\"pal-hex\">#000000<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#800080\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#800080\"><\/div><div class=\"pal-hex\">#800080<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFC0CB\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFC0CB\"><\/div><div class=\"pal-hex\">#FFC0CB<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#008080\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#008080\"><\/div><div class=\"pal-hex\">#008080<\/div><\/div>\n      <div class=\"pal-chip\" data-copy=\"#FFD700\"><span class=\"copy-hint\">Copied!<\/span><div class=\"pal-swatch\" style=\"background:#FFD700\"><\/div><div class=\"pal-hex\">#FFD700<\/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 BLACK<\/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#blackToast{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#blackToast.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 Black',hex:'#000000',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/pure-black\/'},\n    {name:'Obsidian',hex:'#0A0A0A',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/obsidian\/'},\n    {name:'Raven',hex:'#0B0B0B',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/raven\/'},\n    {name:'Pitch Black',hex:'#0F0F0F',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/pitch-black\/'},\n    {name:'Midnight Black',hex:'#1C1C1C',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/midnight-black\/'},\n    {name:'Licorice',hex:'#1A1110',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/licorice\/'},\n    {name:'Space Black',hex:'#2B2D2F',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/space-black\/'},\n    {name:'Ebony',hex:'#555D50',url:'https:\/\/www.notebookandpenguin.com\/rebuild\/color-guides\/ebony\/'},\n  ];\n  const grid=document.getElementById('guidesGrid');\n  const toast=document.getElementById('blackToast');\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 === '#000000' ? '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:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:63px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-86c0a85\" data-block-id=\"86c0a85\"><style>.stk-86c0a85 {margin-bottom:9px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">BLACK 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 BLACK: 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 (WE&#8217;VE INCLUDED COLORS THAT USE &#8220;BLACK&#8221; IN THEIR NAMES EVEN THOUGH THEY MIGHT NOT NECESSARILY LOOK BLACK)<\/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#blackToast{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#blackToast.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\">119 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:#000000;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#000000\">#000000<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,0,0)\">rgb(0,0,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1C1C1E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Aesthetic Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1C1C1E\">#1C1C1E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(28,28,30)\">rgb(28,28,30)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1A2228;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Alien Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1A2228\">#1A2228<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(26,34,40)\">rgb(26,34,40)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0C0404;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Asphalt<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0C0404\">#0C0404<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(12,4,4)\">rgb(12,4,4)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1B1811;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Chocolate<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1B1811\">#1B1811<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(27,24,17)\">rgb(27,24,17)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1A1E28;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Blue<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1A1E28\">#1A1E28<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(26,30,40)\">rgb(26,30,40)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#191C27;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Denim<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#191C27\">#191C27<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(25,28,39)\">rgb(25,28,39)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#060605;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Hole<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#060605\">#060605<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(6,6,5)\">rgb(6,6,5)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0B0510;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Magic<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0B0510\">#0B0510<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(11,5,16)\">rgb(11,5,16)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0E161A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Pearl<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0E161A\">#0E161A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(14,22,26)\">rgb(14,22,26)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#010127;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Rock<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#010127\">#010127<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(1,1,39)\">rgb(1,1,39)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#24252B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Russian<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#24252B\">#24252B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(36,37,43)\">rgb(36,37,43)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0C0A00;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Carbon Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0C0A00\">#0C0A00<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(12,10,0)\">rgb(12,10,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#151922;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cool Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#151922\">#151922<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(21,25,34)\">rgb(21,25,34)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0D0907;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Crow<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0D0907\">#0D0907<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(13,9,7)\">rgb(13,9,7)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#171717;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cynical Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#171717\">#171717<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(23,23,23)\">rgb(23,23,23)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#010203;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#010203\">#010203<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(1,2,3)\">rgb(1,2,3)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2B2523;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blackstrap Molasses<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2B2523\">#2B2523<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(43,37,35)\">rgb(43,37,35)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#262B2F;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blue Charcoal<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#262B2F\">#262B2F<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(38,43,47)\">rgb(38,43,47)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#222024;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Bright Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#222024\">#222024<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(34,32,36)\">rgb(34,32,36)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1A0F0F;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Raisin<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1A0F0F\">#1A0F0F<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(26,15,15)\">rgb(26,15,15)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#050203;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Deep Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#050203\">#050203<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(5,2,3)\">rgb(5,2,3)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#161616;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dull Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#161616\">#161616<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(22,22,22)\">rgb(22,22,22)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1B1B1B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Eerie Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1B1B1B\">#1B1B1B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(27,27,27)\">rgb(27,27,27)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#292929;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Electric Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#292929\">#292929<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(41,41,41)\">rgb(41,41,41)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#060403;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Fashion Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#060403\">#060403<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(6,4,3)\">rgb(6,4,3)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#191C20;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Frost Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#191C20\">#191C20<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(25,28,32)\">rgb(25,28,32)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#252324;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Glossy Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#252324\">#252324<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(37,35,36)\">rgb(37,35,36)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#120321;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Gothic Grape<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#120321\">#120321<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(18,3,33)\">rgb(18,3,33)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#27292B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Graphite Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#27292B\">#27292B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(39,41,43)\">rgb(39,41,43)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#080806;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Grease<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#080806\">#080806<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(8,8,6)\">rgb(8,8,6)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#050505;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Heavy Gray<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#050505\">#050505<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(5,5,5)\">rgb(5,5,5)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#212122;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Ink Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#212122\">#212122<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(33,33,34)\">rgb(33,33,34)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#231F20;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Ivory Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#231F20\">#231F20<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(35,31,32)\">rgb(35,31,32)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#000302;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Jade<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#000302\">#000302<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,3,2)\">rgb(0,3,2)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#171412;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Kokushoku<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#171412\">#171412<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(23,20,18)\">rgb(23,20,18)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#231F20;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Lamp Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#231F20\">#231F20<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(46,71,59)\">rgb(46,71,59)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0B0705;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Leather<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0B0705\">#0B0705<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(11,7,5)\">rgb(11,7,5)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1A1110;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Licorice<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1A1110\">#1A1110<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(26,17,16)\">rgb(26,17,16)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#060D0D;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Luxury Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#060D0D\">#060D0D<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(6,13,13)\">rgb(6,13,13)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0E0C0A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Metal<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0E0C0A\">#0E0C0A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(14,12,10)\">rgb(14,12,10)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1A1A1A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Metropolis<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1A1A1A\">#1A1A1A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(26,26,26)\">rgb(26,26,26)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#07000B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Natural Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#07000B\">#07000B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(7,0,11)\">rgb(7,0,11)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0B0B0B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Neutral Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0B0B0B\">#0B0B0B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(11,11,11)\">rgb(11,11,11)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0C090A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Night<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0C090A\">#0C090A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(12,9,10)\">rgb(12,9,10)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1C1C1C;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Night Shadow<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1C1C1C\">#1C1C1C<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(28,28,28)\">rgb(28,28,28)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#020403;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Obsidian<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#020403\">#020403<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(2,4,3)\">rgb(2,4,3)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1D1C1A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pastel Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1D1C1A\">#1D1C1A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(29,28,26)\">rgb(29,28,26)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#27251F;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Pitch Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#27251F\">#27251F<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(39,37,31)\">rgb(39,37,31)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0E0C01;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Power Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0E0C01\">#0E0C01<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(14,12,1)\">rgb(14,12,1)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#100E09;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Premium Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#100E09\">#100E09<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(16,14,9)\">rgb(16,14,9)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#242124;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Raisin Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#242124\">#242124<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(36,33,36)\">rgb(36,33,36)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#050301;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Raven<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#050301\">#050301<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(5,3,1)\">rgb(5,3,1)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#111212;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Refresh Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#111212\">#111212<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(17,18,18)\">rgb(17,18,18)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1F201F;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Retro Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1F201F\">#1F201F<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(31,32,31)\">rgb(31,32,31)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#080808;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Reversed Gray<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#080808\">#080808<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(8,8,8)\">rgb(8,8,8)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#010B13;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Rich Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#010B13\">#010B13<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(1,11,19)\">rgb(1,11,19)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1B1A16;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Rustic Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1B1A16\">#1B1A16<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(27,26,22)\">rgb(27,26,22)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#060606;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Sable<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#060606\">#060606<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(6,6,6)\">rgb(6,6,6)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2B2B2C;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Signal Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2B2B2C\">#2B2B2C<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(43,43,44)\">rgb(43,43,44)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#26282A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Slate<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#26282A\">#26282A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(38,40,42)\">rgb(38,40,42)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#100C08;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Smoky Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#100C08\">#100C08<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(16,12,8)\">rgb(16,12,8)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#160D08;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Soot<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#160D08\">#160D08<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(22,13,8)\">rgb(22,13,8)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#040200;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Spider<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#040200\">#040200<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(4,2,0)\">rgb(4,2,0)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0F0B0A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Stout<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0F0B0A\">#0F0B0A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(15,11,10)\">rgb(15,11,10)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2A2B2D;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Tap Shoe<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2A2B2D\">#2A2B2D<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(42,43,45)\">rgb(42,43,45)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#161311;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Tea Bag<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#161311\">#161311<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(22,19,17)\">rgb(22,19,17)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0D0E0E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Tech Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0D0E0E\">#0D0E0E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(13,14,14)\">rgb(13,14,14)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#121213;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Tornado Cloud<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#121213\">#121213<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(18,18,19)\">rgb(18,18,19)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0A0B0B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">True Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0A0B0B\">#0A0B0B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(10,11,11)\">rgb(10,11,11)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#0F0404;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Vampire Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#0F0404\">#0F0404<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(15,4,4)\">rgb(15,4,4)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#010207;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Void<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#010207\">#010207<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(1,2,7)\">rgb(1,2,7)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1B1813;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Walnut Hull<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1B1813\">#1B1813<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(27,24,19)\">rgb(27,24,19)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#080706;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Wet Suit<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#080706\">#080706<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(8,7,6)\">rgb(8,7,6)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1F2024;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Wind Cave<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1F2024\">#1F2024<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(31,32,36)\">rgb(31,32,36)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2B3230;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Woodsmoke<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2B3230\">#2B3230<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(43,50,48)\">rgb(43,50,48)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#222627;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Yacht Club Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#222627\">#222627<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(34,38,39)\">rgb(34,38,39)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#232323;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Young Night<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#232323\">#232323<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(35,35,35)\">rgb(35,35,35)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#3D3C3A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Iridium<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#3D3C3A\">#3D3C3A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(61,60,58)\">rgb(61,60,58)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#343432;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Iron Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#343432\">#343432<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(52,52,50)\">rgb(52,52,50)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#313639;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Off Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#313639\">#313639<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(89,86,82)\">rgb(89,86,82)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#3C4748;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Panda Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#3C4748\">#3C4748<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(60,71,72)\">rgb(60,71,72)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#004242;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Warm Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#004242\">#004242<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(0,66,66)\">rgb(0,66,66)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#232B2B;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Charleston Green<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#232B2B\">#232B2B<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(35,43,43)\">rgb(35,43,43)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#1A2421;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Jungle Green<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#1A2421\">#1A2421<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(26,36,33)\">rgb(26,36,33)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#253529;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Leather Jacket<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#253529\">#253529<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(37,53,41)\">rgb(37,53,41)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#303D3A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Green<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#303D3A\">#303D3A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(48,61,58)\">rgb(48,61,58)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#3B3C36;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Olive<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#3B3C36\">#3B3C36<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(59,60,54)\">rgb(59,60,54)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#4D423E;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Basalt Black<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#4D423E\">#4D423E<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(77,66,62)\">rgb(77,66,62)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2C1608;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Zinnwaldite Brown<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2C1608\">#2C1608<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(44,22,8)\">rgb(44,22,8)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2B1B17;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Midnight<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2B1B17\">#2B1B17<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(43,27,23)\">rgb(43,27,23)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#3D0C02;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Bean<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#3D0C02\">#3D0C02<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(61,12,2)\">rgb(61,12,2)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#451425;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Raspberry<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#451425\">#451425<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(69,20,37)\">rgb(69,20,37)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#3D2022;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Red<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#3D2022\">#3D2022<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(61,32,34)\">rgb(61,32,34)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#362B32;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Plum<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#362B32\">#362B32<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(54,43,50)\">rgb(54,43,50)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#362819;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Cafe Americano<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#362819\">#362819<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(54,40,25)\">rgb(54,40,25)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#413839;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Cat<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#413839\">#413839<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(65,56,57)\">rgb(65,56,57)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#4C4646;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Cow<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#4C4646\">#4C4646<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(76,70,70)\">rgb(76,70,70)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#463E3F;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Eel<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#463E3F\">#463E3F<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(70,62,63)\">rgb(70,62,63)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#2C2C2A;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Grain<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#2C2C2A\">#2C2C2A<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(44,44,42)\">rgb(44,44,42)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#353839;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Onyx<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#353839\">#353839<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(53,56,57)\">rgb(53,56,57)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#303234;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Gray<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#303234\">#303234<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(48,50,52)\">rgb(48,50,52)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#3A3A38;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Blackberry<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#3A3A38\">#3A3A38<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(58,58,56)\">rgb(58,58,56)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#333333;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Dark Charcoal<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#333333\">#333333<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(51,51,51)\">rgb(51,51,51)<\/span><\/td><\/tr>\n      <tr style=\"--bg:#54626F;--text-color:#fff\"><td><div class=\"cell-swatch\"><div class=\"cell-name\">Black Coral<\/div><\/div><\/td><td><span class=\"pill\" data-copy=\"#54626F\">#54626F<\/span><\/td><td><span class=\"pill\" data-copy=\"rgb(84,98,111)\">rgb(84,98,111)<\/span><\/td><\/tr>\n    <\/tbody>\n  <\/table>\n<\/div>\n\n<script>\n(function(){\n  const toast=document.getElementById('blackToast');\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\">BLACK COLOR PALETTE GENERATOR<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-e3c9a55\" data-block-id=\"e3c9a55\"><style>.stk-e3c9a55 .stk-block-subtitle__text{font-size:12px !important;}@media screen and (max-width:999px){.stk-e3c9a55 .stk-block-subtitle__text{font-size:12px !important;}}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">PICK ANY COLOR AND INSTANTLY GENERATE MATCHING COLOR COMBINATIONS<\/p><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&#038;family=Inter:wght@500;700&#038;display=swap\" rel=\"stylesheet\">\n<style>\n.gen-wrap{max-width:900px;margin:2.5rem auto;font-family:Inter,sans-serif;border:1.5px solid #E5E7EB;border-radius:20px;background:#fff;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.05)}\n.gen-input-row{display:flex;gap:12px;align-items:center;background:#F9FAFB;border:1.5px solid #E5E7EB;border-radius:14px;padding:12px;flex-wrap:wrap}\n.gen-color-input{width:64px;height:64px;border:none;border-radius:12px;cursor:pointer;padding:0}\n.gen-hex-pill{font-family:monospace;font-size:14px;font-weight:700;background:#fff;border:1.5px solid #E5E7EB;border-radius:10px;padding:8px 12px}\n.gen-preview{margin-top:14px;border-radius:14px;padding:18px;color:#fff;text-align:center;transition:.2s}\n.gen-values{font-family:monospace;font-size:12px;background:rgba(0,0,0,.2);display:inline-block;padding:8px 12px;border-radius:10px;margin-top:10px}\n.gen-row{margin:18px 0}\n.gen-row-title{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6B7280;border-bottom:1.5px solid #F3F4F6;padding-bottom:6px;margin-bottom:10px;text-align:center}\n.gen-swatches{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}\n.g-swatch-card{border:1.5px solid #E5E7EB;border-radius:14px;padding:8px;background:#fff;width:82px;text-align:center;transition:.15s;position:relative}\n.g-swatch-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.08)}\n.g-swatch{height:52px;border-radius:10px;border:1px solid rgba(0,0,0,.06);margin-bottom:6px}\n.g-hex-small{font-family:monospace;font-size:10px;background:#F3F4F6;border-radius:6px;padding:2px 5px;display:inline-block;cursor:pointer;transition:.15s}\n.g-hex-small:hover{background:#0F172A;color:#fff}\n.copy-badge{position:absolute;top:6px;right:6px;background:#0F172A;color:#fff;font-size:9px;font-weight:800;padding:3px 6px;border-radius:6px;opacity:0;transition:.2s;pointer-events:none}\n.g-swatch-card.copied .copy-badge{opacity:1}\n.gen-download{margin-top:18px;text-align:center;background:#F8FAFC;border:2px dashed #CBD5E1;border-radius:14px;padding:14px}\n.gen-btn{background:#0F172A;color:#fff;border:none;padding:10px 18px;border-radius:999px;font-weight:700;cursor:pointer}\n.gen-btn:hover{background:#000}\n#blackToast{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#blackToast.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=\"#000000\" class=\"gen-color-input\">\n    <div class=\"gen-hex-pill\" id=\"baseHexNew\">#000000<\/div>\n    <div style=\"font-size:12px;color:#6B7280\">Click the square to pick any black \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\">#000000<\/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=\"blackToast\">Copied!<\/div>\n\n<script>\n(function(){\nconst $=s=>document.getElementById(s);\nconst toast=$('blackToast');\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 === '#000000' ? '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 BLACK 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\/black-color-code-chart-683x1024.png\" alt=\"Black color code chart with 20 shades of black including black hex codes - Infographic\" class=\"wp-image-3861\" style=\"width:500px\" srcset=\"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/black-color-code-chart-683x1024.png 683w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/black-color-code-chart-200x300.png 200w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/black-color-code-chart-800x1200.png 800w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/black-color-code-chart-500x750.png 500w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/black-color-code-chart-768x1152.png 768w, https:\/\/www.notebookandpenguin.com\/rebuild\/wp-content\/uploads\/2023\/03\/black-color-code-chart.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 BLACK COLOR CODES<\/h2><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left\">Pure Black Hex Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pure black is the <strong>complete absence of all colors<\/strong>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How Is Black Created?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Black is created when there is no color at all.<\/strong>  Sounds strange but think of it this way, when there is no light, everything is black.  And because light is made up of color, by removing the light you remove the color.   So when black is created, all color is removed.  Likewise, when you mix all of the colors together, you <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/white-color-codes\/\"><strong>create white<\/strong><\/a>! <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Black Hex Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hex codes are used to specify how much color is contained within a specific shade and are displayed in the following format <strong>#RRGGBB<\/strong>.  Hex codes use the letters A-F and the numbers 0-9 to specify how much color is contained within the color with <strong>F meaning that the color is completely saturated<\/strong> and <strong>0 meaning that the color isn&#8217;t used at all<\/strong>.  <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The black hex code is #000000.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">From black&#8217;s hex code, you can see that it contains no <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/red-color-codes\/\"><strong>red<\/strong><\/a>, <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/green-color-codes\/\"><strong>green<\/strong><\/a>, or <a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/blue-color-codes\/\"><strong>blue<\/strong><\/a> in its color code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Black RGB Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Just like the black hex codes, the RGB code also specifies how much red, green, and blue are contained within a specific color.  RGB codes are displayed in the following format <strong>RGB(RR,GG,BB).<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The Black RGB Code is RGB(0,0,0,).<\/h4>\n\n\n\n<h2 class=\"wp-block-heading\">Why Is Black 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>black is associated with power, sophistication, elegance, mystery, authority, and timelessness.  <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because of this, black is a very popular color choice for everything from home decor to logos. In fact, black is <strong>one of the most commonly used colors in branding and marketing<\/strong> because it is known to evoke feelings of luxury and premium quality.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-8a350bd\" data-block-id=\"8a350bd\"><style>.stk-8a350bd {margin-bottom:3px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">NEED MORE IDEAS &amp; GUIDES?<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-f7df8d5\" id=\"resources\" data-block-id=\"f7df8d5\"><h2 class=\"stk-block-heading__text\">RESOURCES<\/h2><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Learn more about different ways to use the color black by checking out our other resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/color-palette-library-search-by-color\/\">Color Palette Library<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.notebookandpenguin.com\/rebuild\/pink-and-black-color-palettes\/\">Pink And Black Color Palettes<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-subtitle stk-block-subtitle stk-block stk-69c0cda\" data-block-id=\"69c0cda\"><style>.stk-69c0cda {margin-bottom:0px !important;}<\/style><p class=\"stk-block-subtitle__text stk-subtitle\">PRINTABLE PDF &#8211; INCLUDING BLACKS<\/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:#1C1C1C;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","protected":false},"excerpt":{"rendered":"<p>BLACK COLOR HUB 95+ SHADES OF BLACK Black is one of the world&#8217;s most mysterious, sophisticated, powerful, and elegant colors &#8211; and it can add a sleek and modern look to any design! Shades of black are incredibly versatile and it can be used in a variety of different ways with many different color combinations [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3845,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_important_terms":"","footnotes":""},"categories":[228,217],"tags":[29,25,24,55],"class_list":["post-3837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-black","category-colors","tag-black","tag-color-codes","tag-color-psychology","tag-hcc"],"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\/3837","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=3837"}],"version-history":[{"count":9,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3837\/revisions"}],"predecessor-version":[{"id":16774,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/posts\/3837\/revisions\/16774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/media\/3845"}],"wp:attachment":[{"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/media?parent=3837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/categories?post=3837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.notebookandpenguin.com\/rebuild\/wp-json\/wp\/v2\/tags?post=3837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}