{"id":24,"date":"2025-08-08T10:39:12","date_gmt":"2025-08-08T09:39:12","guid":{"rendered":"https:\/\/blogs.napier.ac.uk\/wcii\/?page_id=24"},"modified":"2025-10-28T15:26:04","modified_gmt":"2025-10-28T15:26:04","slug":"faeces","status":"publish","type":"page","link":"https:\/\/blogs.napier.ac.uk\/wcii\/faeces\/","title":{"rendered":"faeces"},"content":{"rendered":"
<\/div>
<\/div><\/div>
\n
\n\t\t\"\"\n\t<\/div>\n\n<\/div><\/div>
\n\n\n\n\nFaeces Colour Chart<\/title>\n<!-- Developer: Manish Khatri -->\n<meta name=\"author\" content=\"Manish Khatri\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Titillium+Web:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n :root{ --brand:#cf102d; --ink:#111; }\n *{ box-sizing:border-box }\n body{\n margin:0; background:#fff; color:var(--ink);\n font-family:'Titillium Web',system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;\n font-size:16px; line-height:1.45;\n }\n .container{ max-width:960px; margin:0 auto; padding:0 16px 24px; }\n\n \/* Hide WordPress menu, footer, navigation etc *\/\n .wp-site-blocks>header,\n .wp-site-blocks>footer,\n .wp-site-blocks main .wp-block-post-title,\n h1.entry-title,.page-title,.entry-title,.entry-header,\n header .wp-block-site-title,.site-title,.site-title a,\n .wp-block-site-title,.wp-block-site-logo,.wp-block-navigation,\n nav[role=\"navigation\"], .breadcrumbs, .breadcrumb,\n .yoast-breadcrumbs, .rank-math-breadcrumb, .post-navigation, .nav-links,\n .wp-block-page-list, .wp-block-query-pagination, .pagination, .page-links,\n .widget_nav_menu, .wp-block-archives, .wp-block-categories,\n .wp-block-loginout, .banner, .hero, .hero-header, .hero-section,\n .table-of-contents, .lwptoc, .ez-toc-container, #toc_container,\n .toc_container, .toc, .footer, footer, .wp-block-group.alignwide,\n .wp-block-columns, .wp-block-column {\n display:none!important;\n }\n\n \/* Header text (matches Urine page) *\/\n .titleRow{\n display:flex; align-items:baseline; justify-content:space-between;\n gap:12px; margin:8px 0 10px;\n }\n .titleRow h1{\n margin:0; font-size:clamp(28px,4vw,40px);\n font-weight:400; \/* soft regular weight *\/\n }\n .titleRow .topic{\n font-size:clamp(22px,3vw,30px);\n font-weight:700; \/* bold for Faeces *\/\n color:#111; white-space:nowrap;\n }\n\n \/* Controls *\/\n .controls{ display:flex; align-items:center; gap:10px; margin:8px 0 12px; }\n .btn{ border:1px solid transparent; background:var(--brand); color:#fff; border-radius:999px;\n padding:8px 12px; cursor:pointer; font-size:12px; text-decoration:none; display:inline-flex; align-items:center; }\n .btn.secondary{ background:#fff; color:var(--brand); border-color:var(--brand); }\n .tip{ color:#777; font-size:12px; }\n\n \/* Swatches *\/\n .swatch{ height:42px; border-radius:8px; margin:10px 0; border:1px solid #e6e6e6; position:relative; }\n .swatch:focus{ outline:none; box-shadow:0 0 0 3px rgba(207,16,45,.25); }\n .hex{ position:absolute; right:10px; top:50%; transform:translateY(-50%);\n background:rgba(255,255,255,.95); border:1px solid #ddd; border-radius:8px;\n padding:4px 8px; font:14px ui-monospace,Consolas,Menlo,monospace; display:none; }\n\n \/* Screen reader live 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\t .contact-box {\n background: #f3f3f3;\n border-radius: 8px;\n text-align: center;\n padding: 10px 16px;\n margin-top: 24px;\n font-size: 14px;\n color: #333;\n }\n .contact-box a {\n color: #111;\n text-decoration: none;\n }\n .contact-box a:hover {\n text-decoration: underline;\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <!-- TEXT HEADER ONLY -->\n <div class=\"titleRow\" aria-label=\"Page title\">\n <h1>What Colour Is It?<\/h1>\n <div class=\"topic\" id=\"topic\">Faeces<\/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=\"Faeces colour chart\"><\/div>\n <div id=\"live\" class=\"vh\" aria-live=\"polite\"><\/div>\n <!-- Contact (bottom) -->\n <div class=\"contact-box\">\n Contact: <a href=\"mailto:wcii@napier.ac.uk\">wcii@napier.ac.uk<\/a>\n<\/div>\n\n<!-- Hidden canvas -->\n<canvas id=\"cnv\" width=\"1000\" height=\"1600\" style=\"display:none\"><\/canvas>\n\n<script>\nconst TOPIC = 'Faeces';\ndocument.getElementById('topic').textContent = TOPIC;\n\nconst COLOURS = [\n '#E9EAEB','#6F5E5C','#47494B','#0E0E0E','#6C4823',\n '#A77E53','#8D8F3F','#D9C055','#93B479','#3E6F3D',\n '#F06A67','#D71318','#6D0A0E'\n];\n\nconst $ = s => document.querySelector(s), host = $('#swatches'), live = $('#live');\n\nCOLOURS.forEach(hex=>{\n const el = document.createElement('div'); el.className='swatch'; el.style.background=hex; el.tabIndex=0;\n const b = document.createElement('div'); b.className='hex'; b.textContent=hex; el.appendChild(b);\n const show = ()=>{ b.style.display='block'; navigator.clipboard?.writeText(hex).catch(()=>{});\n live.textContent=`${hex} copied`; clearTimeout(el._t); el._t=setTimeout(()=>{ b.style.display='none'; live.textContent=''; },1100); };\n el.addEventListener('click',show);\n el.addEventListener('keydown',e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); show(); }});\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); c.arcTo(x+w,y+h,x,y+h,R);\n c.arcTo(x,y+h,x,y,R); c.arcTo(x,y,x+w,y,R);\n if(fill) c.fill(); if(stroke){ c.strokeStyle='#e6e6e6'; c.stroke(); }\n}\nfunction buildPNG(){\n const pad=40,gap=20,swH=70,titleH=50,W=1000,H=pad+titleH+COLOURS.length*(swH+gap)+40;\n const cnv=$('#cnv'); cnv.width=W; cnv.height=H; const ctx=cnv.getContext('2d');\n ctx.fillStyle='#fff'; ctx.fillRect(0,0,W,H);\n ctx.fillStyle='#111'; ctx.font='600 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; ctx.fillText(hex, W-pad-12-w, y+swH\/2+10);\n y+=swH+gap;\n });\n return cnv;\n}\nfunction saveCanvas(cnv,name){\n if(cnv.toBlob){\n cnv.toBlob(b=>{ const url=URL.createObjectURL(b); const a=document.createElement('a');\n a.href=url; a.download=name; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); },'image\/png');\n } else {\n const a=document.createElement('a'); a.href=cnv.toDataURL('image\/png'); a.download=name; document.body.appendChild(a); a.click(); a.remove();\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>Faeces Colour Chart What Colour Is It? Faeces 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-24","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>faeces - 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\/faeces\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"faeces - What Colour Is It?\" \/>\n<meta property=\"og:description\" content=\"Faeces Colour Chart What Colour Is It? Faeces 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\/faeces\/\" \/>\n<meta property=\"og:site_name\" content=\"What Colour Is It?\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-28T15:26:04+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\\\/faeces\\\/\",\"url\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/faeces\\\/\",\"name\":\"faeces - What Colour Is It?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/#website\"},\"datePublished\":\"2025-08-08T09:39:12+00:00\",\"dateModified\":\"2025-10-28T15:26:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/faeces\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/faeces\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/faeces\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blogs.napier.ac.uk\\\/wcii\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"faeces\"}]},{\"@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":"faeces - 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\/faeces\/","og_locale":"en_GB","og_type":"article","og_title":"faeces - What Colour Is It?","og_description":"Faeces Colour Chart What Colour Is It? Faeces Home Download PNG Click any bar to copy its HEX. Contact: wcii@napier.ac.uk","og_url":"https:\/\/blogs.napier.ac.uk\/wcii\/faeces\/","og_site_name":"What Colour Is It?","article_modified_time":"2025-10-28T15:26:04+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\/faeces\/","url":"https:\/\/blogs.napier.ac.uk\/wcii\/faeces\/","name":"faeces - What Colour Is It?","isPartOf":{"@id":"https:\/\/blogs.napier.ac.uk\/wcii\/#website"},"datePublished":"2025-08-08T09:39:12+00:00","dateModified":"2025-10-28T15:26:04+00:00","breadcrumb":{"@id":"https:\/\/blogs.napier.ac.uk\/wcii\/faeces\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.napier.ac.uk\/wcii\/faeces\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.napier.ac.uk\/wcii\/faeces\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.napier.ac.uk\/wcii\/"},{"@type":"ListItem","position":2,"name":"faeces"}]},{"@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\/24","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=24"}],"version-history":[{"count":36,"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":191,"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/pages\/24\/revisions\/191"}],"wp:attachment":[{"href":"https:\/\/blogs.napier.ac.uk\/wcii\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}