https://michaelharding.co.uk/assets/PigmentIndex-BNzCPt-w.js

1import{d as P,j as e,L as g,c as N,B as k,g as I,v as C,q as M,r as f,a as S,S as B,A as L,b as T}from"./index-BXFUGXGO.js";import{u as R,M as E}from"./MediumToggle-BreNO3n8.js";import{p as b,g as h,P as O,s as u,n as j}from"./pigmentUtils-CqGjLUvH.js";import{g as v}from"./pigmentKnowledge-6wEkJSrc.js";import{L as A}from"./layers-_c2YMGzw.js";import{T as F}from"./table-scroll-C0wvNvlx.js";import{C as _}from"./ColourDisclaimer-B97AgtH8.js";import"./colourMath--2_mtqw1.js";/**
2 * @license lucide-react v0.475.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const $=[["path",{d:"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z",key:"7g6ntu"}],["path",{d:"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z",key:"ijws7r"}],["path",{d:"M7 21h10",key:"1b0cd5"}],["path",{d:"M12 3v18",key:"108xh3"}],["path",{d:"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2",key:"3gwbw2"}]],H=P("Scale",$);function q({codes:o,mediumKey:d}){const l=d==="watercolour"?"?medium=watercolour":"",a={};for(const i of o){const s=b(h(i));a[s]=(a[s]||0)+1}return e.jsxs("div",{children:[e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4",children:O.map(i=>{const s=b(i);return e.jsxs("div",{className:"border border-border p-5",children:[e.jsx("div",{className:"font-display text-xl font-medium",children:s}),e.jsxs("div",{className:"font-mono-tech text-[10px] uppercase tracking-[0.12em] text-foreground/50 mt-1",children:[a[s]||0," pigments"]})]},i)})}),e.jsx(g,{to:`/pigments${l}`,className:"font-mono-tech text-[11px] uppercase tracking-[0.18em] text-primary link-underline mt-6 inline-block",children:"Browse the full encyclopaedia →"})]})}const D=[{to:"/equivalent-finder",label:"Pigment Finder",desc:"Search any Colour Index code or colour name.",icon:N},{to:"/pigments",label:"Pigment Encyclopaedia",desc:"Every pigment behind our colours, A–Z by code.",icon:k},{to:"/compare-colours",label:"Colour Compare",desc:"Place colours side by side before you choose.",icon:H},{to:"/mixing-studio",label:"Mixing Studio",desc:"Preview how colours combine on the palette.",icon:I},{to:"/find-your-palette",label:"Find Your Palette",desc:"A guided palette matched to how you paint.",icon:C},{to:"/master-palettes",label:"Master Palettes",desc:"Historical palettes reconstructed in modern oils.",icon:A}];function U(){return e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",children:D.map(o=>e.jsxs(g,{to:o.to,className:"group flex items-start gap-4 border border-border p-5 hover:border-foreground transition-colors",children:[e.jsx(o.icon,{className:"w-5 h-5 mt-1 text-foreground/60 group-hover:text-primary transition-colors"}),e.jsxs("div",{children:[e.jsx("div",{className:"font-display text-lg font-medium group-hover:text-primary transition-colors",children:o.label}),e.jsx("div",{className:"text-sm text-foreground/55",children:o.desc})]})]},o.to))})}function z(o,d){const l=o.filter(i=>u(i.pigment_code).some(s=>s===d||s.startsWith(`${d}.`))),a=i=>{const s=l.map(n=>n[i]).filter(Boolean);if(!s.length)return null;const t={};for(const n of s)t[n]=(t[n]||0)+1;return Object.entries(t).sort((n,m)=>m[1]-n[1])[0][0]};return{count:l.length,transparency:a("transparency")||a("opacity"),lightfastness:a("lightfastness")}}function G({products:o,mediumKey:d}){if(!o||!o.length)return null;const l=[...new Set(o.flatMap(t=>u(t.pigment_code)))],a=["PW","PY","PO","PR","PV","PB","PG","PBR","PBK"];l.sort((t,n)=>{const m=a.indexOf(h(t)),x=a.indexOf(h(n));return(m===-1?99:m)-(x===-1?99:x)||t.localeCompare(n)});const i=l.map(t=>{const n=v(t),m=z(o,t);return{code:t,name:n.commonName&&n.commonName!==t?n.commonName:"—",family:b(h(t)),transparency:m.transparency||"—",lightfastness:m.lightfastness||"—",count:m.count}}),s=d==="watercolour"?"?medium=watercolour":"";return e.jsx(F,{minWidth:640,children:e.jsxs("table",{className:"w-full text-sm border-collapse",children:[e.jsxs("caption",{className:"sr-only",children:["Every Colour Index pigment used in the Michael Harding ",d==="watercolour"?"watercolour":"oil colour"," range, with common name, family, aggregated transparency and lightfastness, and the number of colours built on it."]}),e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-border text-left",children:[e.jsx("th",{scope:"col",className:"py-3 pr-4 font-mono-tech text-[10px] uppercase tracking-[0.18em] text-foreground

6/50",children:"Pigment"}),e.jsx("th",{scope:"col",className:"py-3 pr-4 font-mono-tech text-[10px] uppercase tracking-[0.18em] text-foreground/50",children:"Common name"}),e.jsx("th",{scope:"col",className:"py-3 pr-4 font-mono-tech text-[10px] uppercase tracking-[0.18em] text-foreground/50",children:"Family"}),e.jsx("th",{scope:"col",className:"py-3 pr-4 font-mono-tech text-[10px] uppercase tracking-[0.18em] text-foreground/50",children:"Transparency"}),e.jsx("th",{scope:"col",className:"py-3 pr-4 font-mono-tech text-[10px] uppercase tracking-[0.18em] text-foreground/50",children:"Lightfastness"}),e.jsx("th",{scope:"col",className:"py-3 pr-4 font-mono-tech text-[10px] uppercase tracking-[0.18em] text-foreground/50",children:"Used in"})]})}),e.jsx("tbody",{children:i.map(t=>e.jsxs("tr",{className:"border-b border-border/60 align-top",children:[e.jsx("th",{scope:"row",className:"py-3 pr-4",children:e.jsx(g,{to:`/pigments/${encodeURIComponent(t.code)}${s}`,className:"font-mono-tech text-xs uppercase tracking-[0.12em] text-primary hover:underline",children:t.code})}),e.jsx("td",{className:"py-3 pr-4 text-foreground/80",children:t.name}),e.jsx("td",{className:"py-3 pr-4 text-foreground/70",children:t.family}),e.jsx("td",{className:"py-3 pr-4 text-foreground/70",children:t.transparency}),e.jsx("td",{className:"py-3 pr-4 text-foreground/70",children:t.lightfastness}),e.jsxs("td",{className:"py-3 pr-4 text-foreground/70",children:[t.count," ",t.count===1?"colour":"colours"]})]},t.code))})]})})}const W=["PB29","PB15","PB28","PG18","PBr7","PBk9","PY35","PR108","PV19","PR101"];function te(){const{mediumKey:o,setMedium:d}=R(),l=M(),[a,i]=f.useState(""),s=o==="watercolour"?"Watercolour":"Oil Colour",{data:t}=S({queryKey:["products",s,"pigment-index"],queryFn:()=>T.entities.Product.filter({category:s},"-created_date",500)}),n=f.useMemo(()=>{const r=new Set;

6for(const c of t||[])for(const p of u(c.pigment_code))r.add(p);return[...r]},[t]),m=f.useMemo(()=>{const r={};for(const c of t||[])for(const p of u(c.pigment_code))!r[p]&&c.swatch_hex&&(r[p]=c.swatch_hex);return r},[t]),x=o==="watercolour"?"?medium=watercolour":"",w=r=>{r.preventDefault();const c=a.trim();if(!c)return;const p=j(c);/^[A-Z]{2,3}\d+(\.\d+)?$/.test(p)?l(`/pigments/${encodeURIComponent(p)}${x}`):l(`/equivalent-finder${x}`)},y=W.map(j).filter(r=>n.includes(r));return e.jsxs("section",{className:"pt-32 md:pt-40 pb-24 md:pb-32 bg-background min-h-screen",children:[e.jsx(B,{title:"The Michael Harding Pigment Index",description:"A reference index of every Colour Index pigment used in Michael Harding artist colours — code, common name, family, transparency, lightfastness and the colours built on each pigment, across oil and watercolour.",jsonLd:{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://michaelharding.co.uk/#organization",name:"Michael Harding Art Formulas Ltd",url:"https://michaelharding.co.uk"},{"@type":"CollectionPage","@id":"https://michaelharding.co.uk/pigment-index#page",url:"https://michaelharding.co.uk/pigment-index",name:"The Michael Harding Pigment Index",description:"A reference index of every Colour Index pigment used in Michael Harding artist colours, with the colours built on each pigment across oil and watercolour.",isPartOf:{"@id":"https://michaelharding.co.uk/#website"},publisher:{"@id":"https://michaelharding.co.uk/#organization"}},{"@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:"https://michaelharding.co.uk/"},{"@type":"ListItem",position:2,name:"Pigment Index",item:"https://michaelharding.co.uk/pigment-index"}]}]}}),e.jsxs("div",{className:"mx-auto max-w-[1200px] px-6 md:px-10",children:[e.jsx("div",{className:"font-mono-tech text-[10px] uppercase tracking-[0.2em] text-primary mb-4",children:"The Pigment Index"}),e.jsx("h1",{className:"font-display text-[clamp(2.5rem,7vw,5.5rem)] leading-[0.92] font-medium tracking-tight",children:"The Michael Harding Pigment Index"}),e.jsx("div",{className:"w-24 h-1 bg-primary mt-4 mb-8"}),e.jsx("p",{className:"text-lg text-foreground/70 max-w-2xl leading-relaxed mb-8",children:"One knowledge base connecting every pigment we use to its chemistry, behaviour, swatches, mixing partners, comparable pigments, the palettes that use it, and the colours we make from it. Start anywhere — the index carries you to the answer."}),e.jsx("div",{className:"mb-8",children:e.jsx(E,{mediumKey:o,onChange:d})}),e.jsxs("form",{onSubmit:w,className:"relative max-w-xl mb-12",children:[e.jsx(N,{className:"absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground/40"}),e.jsx("input",{value:a,onChange:r=>i(r.target.value),placeholder:"Enter a pigment code (PB29) or colour name…",className:"w-full bg-background border border-border pl-12 pr-32 py-3.5 focus:outline-none focus:border-foreground"}),e.jsxs("button",{type:"submit",className:"absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1.5 font-mono-tech text-[11px] uppercase tracking-[0.18em] bg-primary text-primary-foreground px-4 py-2.5 hover:bg-primary/90 transition-colors",children:["Go ",e.jsx(L,{className:"w-3.5 h-3.5"})]})]}),y.length>0&&e.jsxs("div",{className:"mb-16",children:[e.jsx("div",{className:"font-mono-tech text-[10px] uppercase tracking-[0.18em] text-foreground/50 mb-3",children:"Featured pigments"}),e.jsx("div",{className:"flex flex-wrap gap-2",children:y.map(r=>{const c=v(r);return e.jsxs(g,{to:`/pigments/${encodeURIComponent(r)}${x}`,className:"group flex items-center gap-2 border border-border px-3 py-2 hover:border-foreground transition-colors",children:[e.jsx("span",{className:"w-4 h-4 border border-border",style:{background:m[r]||"#e5e5e5"}}),e.jsx("span",{className:"font-mono-tech text-[11px] uppercase tracking-[0.1em] group-hover:text-primary transition-colors",children:r}),c.commonName&&c.commonName!==r&&e.jsx("span",{className:"text-xs text-foreground/55 hidden sm:inline",children:c.commonName})]},r)})})]}),e.jsxs("div",{className:"mb-16",children:[e.jsx("div",{className:"font-mono-tech text-[10px] uppercase tracking-[0.2em] text-primary mb-3",children:"By family"}),e.jsx("h2",{className:"font-display text-2xl md:text-3xl font-medium mb-6",children:"The pigment families"}),e.jsx(q,{codes:n,mediumKey:o})]}),e.jsxs("div",{className:"mb-16",children:[e.jsx("div",{className:"font-mono-tech text-[10px] uppercase tracking-[0.2em] text-primary mb-3",children:"Reference table"}),e.jsxs("h2",{className:"font-display text-2xl md:text-3xl font-medium mb-6",children:["All pigments in the ",o==="watercolour"?"watercolour":"oil"," range"]}),e.jsx(G,{products:t||[],mediumKey:o})]}),e.jsxs("div",{className:"mb-4",children:[e.jsx("div",{className:"font-mono-tech text-[10px] uppercase tracking-[0.2em] text-primary mb-3",children:"Connected tools"}),e.jsx("h2",{className:"font-display text-2xl md:text-3xl font-medium mb-6",children:"Explore the index"}),e.jsx(U,{})]})]}),e.jsx(_,{className:"mt-16"})]})}

6export{te as default};