{"id":20,"date":"2025-08-08T10:38:28","date_gmt":"2025-08-08T09:38:28","guid":{"rendered":"https:\/\/blogs.napier.ac.uk\/wcii\/?page_id=20"},"modified":"2025-10-28T15:15:33","modified_gmt":"2025-10-28T15:15:33","slug":"sputum","status":"publish","type":"page","link":"https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/","title":{"rendered":"sputum"},"content":{"rendered":"
\n
\n\t\t\"\"\n\t<\/div>\n\n<\/div><\/div><\/div>
<\/div><\/div>
\n\n\n\n\nSputum Colour Chart<\/title>\n<meta name=\"author\" content=\"Manish Khatri\">\n\n<!-- Titillium Web font -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Titillium+Web:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n \/* Hide unwanted WP elements *\/\n .wp-site-blocks>header,.wp-site-blocks>footer,\n .wp-site-blocks main .wp-block-post-title,\n h1.entry-title,.page-title,\n header .wp-block-site-title,.site-title,.site-title a,\n .wp-block-site-title,.wp-block-site-logo,.wp-block-navigation,\n .table-of-contents,.lwptoc,.ez-toc-container,#toc_container,.toc_container,.toc {\n display:none!important;\n }\n\n :root{\n --brand:#cf102d;\n --ink:#111;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n background:#fff;\n color:var(--ink);\n font-family:'Titillium Web',system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;\n font-size:16px;\n line-height:1.45;\n }\n\n .container{\n max-width:960px;\n margin:0 auto;\n padding:16px 16px 24px;\n }\n\n \/* Header text *\/\n .titleRow{\n display:flex;\n align-items:baseline;\n justify-content:space-between;\n gap:12px;\n margin:8px 0 10px;\n }\n .titleRow h1{\n margin:0;\n font-size:clamp(28px,4vw,40px);\n font-weight:400;\n color:#111;\n }\n .titleRow .topic{\n font-size:clamp(22px,3vw,30px);\n font-weight:700;\n color:#111;\n white-space:nowrap;\n }\n\n \/* Controls *\/\n .controls{\n display:flex;\n align-items:center;\n gap:10px;\n margin:8px 0 12px;\n }\n .btn{\n border:1px solid transparent;\n background:var(--brand);\n color:#fff;\n border-radius:999px;\n padding:8px 12px;\n cursor:pointer;\n font-size:12px;\n text-decoration:none;\n display:inline-flex;\n align-items:center;\n }\n .btn.secondary{\n background:#fff;\n color:var(--brand);\n border-color:var(--brand);\n }\n .tip{color:#777;font-size:12px}\n\n \/* Swatches *\/\n .swatch{\n height:42px;\n border-radius:8px;\n margin:10px 0;\n border:1px solid #e6e6e6;\n position:relative;\n }\n .swatch:focus{outline:none;box-shadow:0 0 0 3px rgba(207,16,45,.25)}\n .hex{\n position:absolute;\n right:10px;\n top:50%;\n transform:translateY(-50%);\n background:rgba(255,255,255,.95);\n border:1px solid #ddd;\n border-radius:8px;\n padding:4px 8px;\n font:14px ui-monospace,Consolas,Menlo,monospace;\n display:none;\n }\n\n \/* Simple email box at bottom *\/\n .email-box{\n margin-top:30px;\n padding:12px 16px;\n background:#f2f2f2;\n border-radius:10px;\n color:#444;\n font-size:15px;\n text-align:center;\n }\n\n \/* Hidden accessibility region *\/\n .vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;\n clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n\n <!-- Page title -->\n <div class=\"titleRow\" aria-label=\"Page title\">\n <h1>What Colour Is It?<\/h1>\n <div class=\"topic\" id=\"topic\">Sputum<\/div>\n <\/div>\n\n <!-- Controls -->\n <div class=\"controls\">\n <a id=\"homeBtn\" class=\"btn secondary\" href=\"\/wcii\" aria-label=\"Go to home\">Home<\/a>\n <button id=\"pngBtn\" class=\"btn\" type=\"button\">Download PNG<\/button>\n <span class=\"tip\">Click any bar to copy its HEX.<\/span>\n <\/div>\n\n <!-- Swatches -->\n <div id=\"swatches\" role=\"region\" aria-label=\"Sputum colour chart\"><\/div>\n <div id=\"live\" class=\"vh\" aria-live=\"polite\"><\/div>\n\n <!-- Simple email box -->\n <div class=\"email-box\">\n Contact: <strong>wcii@napier.ac.uk<\/strong>\n <\/div>\n\n<\/div>\n\n<!-- Hidden canvas -->\n<canvas id=\"cnv\" width=\"1000\" height=\"1600\" style=\"display:none\"><\/canvas>\n\n<script>\nconst TOPIC='Sputum';\ndocument.getElementById('topic').textContent = TOPIC;\n\nconst COLOURS=[\n '#FFFFFF','#F2F2F2','#E9EBE7','#FBFBEF','#FFF671','#E6C565',\n '#D9DB9C','#9FB83C','#8DB12F','#AF9B60','#7A5A30','#5B524E',\n '#000000','#5E0E0E','#8B4C08','#EA6F62','#D21212'\n];\n\nconst $=s=>document.querySelector(s), host=$('#swatches'), live=$('#live');\n\nCOLOURS.forEach(hex=>{\n const el=document.createElement('div');\n el.className='swatch';\n el.style.background=hex;\n el.tabIndex=0;\n const b=document.createElement('div');\n b.className='hex';\n b.textContent=hex;\n el.appendChild(b);\n const show=()=>{\n b.style.display='block';\n navigator.clipboard?.writeText(hex).catch(()=>{});\n live.textContent=`${hex} copied`;\n clearTimeout(el._t);\n el._t=setTimeout(()=>{ b.style.display='none'; live.textContent=''; },1100);\n };\n el.addEventListener('click',show);\n el.addEventListener('keydown',e=>{\n if(e.key==='Enter'||e.key===' '){ e.preventDefault(); show(); }\n });\n host.appendChild(el);\n});\n\nfunction rr(c,x,y,w,h,r,fill,stroke){\n const R=Math.min(r,w\/2,h\/2);\n c.beginPath(); c.moveTo(x+R,y);\n c.arcTo(x+w,y,x+w,y+h,R);\n c.arcTo(x+w,y+h,x,y+h,R);\n c.arcTo(x,y+h,x,y,R);\n c.arcTo(x,y,x+w,y,R);\n if(fill) c.fill();\n if(stroke){ c.strokeStyle='#e6e6e6'; c.stroke(); }\n}\n\nfunction buildPNG(){\n const pad=40,gap=20,swH=70,titleH=40,W=1000,H=pad+titleH+COLOURS.length*(swH+gap)+40;\n const cnv=$('#cnv'); cnv.width=W; cnv.height=H;\n const ctx=cnv.getContext('2d');\n ctx.fillStyle='#fff'; ctx.fillRect(0,0,W,H);\n ctx.fillStyle='#111'; ctx.font='400 46px \"Titillium Web\", sans-serif';\n ctx.fillText(`What Colour Is It? \u2014 ${TOPIC}`, pad, pad+48);\n let y=pad+titleH;\n COLOURS.forEach(hex=>{\n ctx.fillStyle=hex; rr(ctx,pad,y,W-pad*2,swH,12,true,true);\n ctx.fillStyle='#000'; ctx.font='28px Menlo, Consolas, monospace';\n const w=ctx.measureText(hex).width;\n ctx.fillText(hex, W-pad-12-w, y+swH\/2+10);\n y+=swH+gap;\n });\n return cnv;\n}\n\nfunction saveCanvas(cnv,name){\n if(cnv.toBlob){\n cnv.toBlob(b=>{\n const u=URL.createObjectURL(b);\n const a=document.createElement('a');\n a.href=u;\n a.download=name;\n document.body.appendChild(a);\n a.click();\n a.remove();\n URL.revokeObjectURL(u);\n },'image\/png');\n }else{\n const a=document.createElement('a');\n a.href=cnv.toDataURL('image\/png');\n a.download=name;\n document.body.appendChild(a);\n a.click();\n a.remove();\n }\n}\n\ndocument.getElementById('pngBtn').addEventListener('click',()=>saveCanvas(buildPNG(),`${TOPIC}-Colour-Chart.png`));\n<\/script>\n<\/body>\n<\/html>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Sputum Colour Chart What Colour Is It? Sputum Home Download PNG Click any bar to copy its HEX. Contact: wcii@napier.ac.uk<\/p>\n","protected":false},"author":364,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>sputum - What Colour Is It?<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"sputum - What Colour Is It?\" \/>\n<meta property=\"og:description\" content=\"Sputum Colour Chart What Colour Is It? Sputum Home Download PNG Click any bar to copy its HEX. Contact: wcii@napier.ac.uk\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/\" \/>\n<meta property=\"og:site_name\" content=\"What Colour Is It?\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-28T15:15:33+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/sputum\\\/\",\"url\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/sputum\\\/\",\"name\":\"sputum - What Colour Is It?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/#website\"},\"datePublished\":\"2025-08-08T09:38:28+00:00\",\"dateModified\":\"2025-10-28T15:15:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/sputum\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/sputum\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/sputum\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"sputum\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/#website\",\"url\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/\",\"name\":\"What Colour Is It?\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"sputum - What Colour Is It?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/","og_locale":"en_GB","og_type":"article","og_title":"sputum - What Colour Is It?","og_description":"Sputum Colour Chart What Colour Is It? Sputum Home Download PNG Click any bar to copy its HEX. Contact: wcii@napier.ac.uk","og_url":"https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/","og_site_name":"What Colour Is It?","article_modified_time":"2025-10-28T15:15:33+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/","url":"https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/","name":"sputum - What Colour Is It?","isPartOf":{"@id":"https:\/\/blogs.napier.ac.uk\/wcii\/#website"},"datePublished":"2025-08-08T09:38:28+00:00","dateModified":"2025-10-28T15:15:33+00:00","breadcrumb":{"@id":"https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.napier.ac.uk\/wcii\/sputum\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.napier.ac.uk\/wcii\/"},{"@type":"ListItem","position":2,"name":"sputum"}]},{"@type":"WebSite","@id":"https:\/\/blogs.napier.ac.uk\/wcii\/#website","url":"https:\/\/blogs.napier.ac.uk\/wcii\/","name":"What Colour Is It?","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.napier.ac.uk\/wcii\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"}]}},"_links":{"self":[{"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/users\/364"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":40,"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/pages\/20\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}