https://www.jukeboxprint.com/react/prod/ColorTrendsPage-CcnAivD3.js

1import{j as e}from"./client-BDJMow-F.js";import{r as h}from"./tabler-icons-development-DI2L2NPt.js";import{T as R}from"./ToolsBreadcrumb-CWvUAVzG.js";import{e as B,g as I}from"./colorNames-1nPK6OR_.js";import{g as G}from"./index-hxsjS5DW.js";import"./island-loader-Bwoy5hNQ.js";import"./ciede2000-BDxdzK_s.js";const W="ColorTrendsPage-module__root___y1hgm",Y={root:W},d="--",P={count:0,todayCount:0,weekCount:0,uniqueHexes:0,mostExtractedHex:"",todayChange:0,weekChange:0,lastUpdated:"",top10:[]},z={top10:[]},w={warm:0,cool:0,dark:0,light:0,windowDays:30},H=a=>a.replace("#","").toLowerCase(),U=a=>`${(a*100).toFixed(1)}%`,F=a=>{const o=Math.round(a*100);return o===0?"No change":`${o>0?"↑":"↓"} ${Math.abs(o)}%`},V=["January","February","March","April","May","June","July","August","September","October","November","December"],Z={"-07:00":"PCT","-08:00":"PCT"},K=a=>{const o=/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::\d{2}(?:\.\d+)?)?([+-]\d{2}:\d{2})$/.exec(a);if(!o)return null;const[,m,x,t,p,k,b]=o,i=Number(x)-1;if(i<0||i>11)return null;const j=Number(p),g=j%12===0?12:j%12,C=Z[b]||`UTC${b}`;return`${V[i]} ${Number(t)}, ${m} at ${g}:${k} ${j<12?"AM":"PM"} ${C}`},T=a=>{const o=a?K(a):null;if(o)return o;const m=a?new Date(a):new Date;if(Number.isNaN(m.getTime()))return"";try{const x=new Intl.DateTimeFormat("en-US",{timeZone:"America/Vancouver",month:"long",day:"numeric",year:"numeric",hour:"numeric",minute:"2-digit",hour12:!0}).formatToParts(m),t={};for(const p of x)t[p.type]=p.value;return`${t.month} ${t.day}, ${t.year} at ${t.hour}:${t.minute} ${t.dayPeriod} PCT`}catch{return a}},Q=a=>{if(a.trend==="flat")return e.jsxs("div",{className:"rank-trend flat",children:[e.jsx("span",{className:"rank-trend-arrow",children:"−"})," No change"]});const o=a.trend==="up"?"Up":"Down",m=Math.abs(a.trendDelta);return e.jsxs("div",{className:`rank-trend ${a.trend}`,children:[e.jsx("span",{className:"rank-trend-arrow",children:a.trend==="up"?"↑":"↓"})," ",o," ",m," spot",m===1?"":"s"]})},X=a=>{if(!a||typeof a.count!="number"||a.count<=0)return P;const o=Array.isArray(a.top10)&&a.top10.length>0?a.top10:[];return{...P,...a,top10:o}},ee=a=>!a||!Array.isArray(a.top10)||a.top10.length===0?z:{top10:a.top10},se=a=>a?(a.warm||0)+(a.cool||0)+(a.dark||0)+(a.light||0)<=0?{...w,windowDays:a.windowDays||w.windowDays}:{...w,...a}:w,de=({statsEndpoint:a="",initialToday:o,initialAllTime:m,initialFamilies:x})=>{const[t,p]=h.useState(()=>X(o)),[k,b]=h.useState(()=>ee(m)),[i,j]=h.useState(()=>se(x)),g=o&&o.lastUpdated?o.lastUpdated:"",[C,$]=h.useState(()=>g?T(g):"today"),[S,A]=h.useState(g),[,_]=h.useState(0),L=h.useRef(null);h.useEffect(()=>{if(!a){const c=new Date().toISOString();A(c),$(T(c));return}let s=!1;const n=async()=>{try{const[c,v,N]=await Promise.allSettled([fetch(`${a}/stats/today`,{method:"GET"}).then(r=>r.ok?r.json():null),fetch(`${a}/stats/all-time`,{method:"GET"}).then(r=>r.ok?r.json():null),fetch(`${a}/stats/families`,{method:"GET"}).then(r=>r.ok?r.json():null)]);if(s)return;if(c.status==="fulfilled"&&c.value){const r=c.value;typeof r.count=="number"&&r.count>0&&(p(E=>({...E,...r})),r.lastUpdated&&(A(r.lastUpdated),$(T(r.lastUpdated))))}if(v.status==="fulfilled"&&v.value){const r=v.value;Array.isArray(r.top10)&&r.top10.length>0&&b({top10:r.top10})}if(N.status==="fulfilled"&&N.value){const r=N.value;(r.warm||0)+(r.cool||0)+(r.dark||0)+(r.light||0)>0&&j({...w,...r})}}catch{}},l=new Date().toISOString();return A(l),$(T(l)),n(),()=>{s=!0}},[a]),h.useEffect(()=>{let s=!1;return B().then(()=>{s||_(n=>n+1)}),()=>{s=!0}},[]),h.useEffect(()=>{if(typeof window>"u"||!L.current)return;const s=L.current.querySelectorAll(".reveal, .reveal-stagger");if(!("IntersectionObserver"in window)){s.forEach(l=>l.classList.add("is-visible"));return}const n=new IntersectionObserver(l=>{l.forEach(c=>{c.isIntersecting&&(c.target.classList.add("is-visible"),n.unobserve(c.target))})},{threshold:.12,rootMargin:"0px 0px -8% 0px"});return s.forEach(l=>n.observe(l)),()=>n.disconnect()},[]);const J={"@context":"https://schema.org","@type":"Dataset",name:"The Jukebox Color Index",description:"Real-time frequency data of colors extracted from photos uploaded to the Jukebox color palette generator.",url:"https://www.jukeboxprint.com/tools/color-palette-generator/trends",creator:{"@type":"Organization",name:"Jukebox Print",url:"https://www.jukeboxprint.com"},license:"https://www.jukeboxprint.com/terms",datePublished:"2026-01-01",dateModified:S?S.split("T")[0]:"2026-01-01",temporalCoverage:"2026-01-01/..",variableMeasured:["Hex color frequency","RGB channel distribution","Color temperature distribution","Color tone distribution"],isAccessibleForFree:!0,keywords:"color trends, popular colors, design trends, palette data, color analytics"},M=[{key:"warm",label:"Warm tones (red, orange, yellow)",color:"#c34a5e"},{key:"cool",label:"Cool tones (blue, green, purple)",color:"#7c9cbf"},{key:"dark",label:"Dark neutrals",color:"#1d1d1f"},{key:"light",label:"Light neutrals",color:"#d8d0ce",lightText:!0}],u=t.count>0,O=t.top10.length>0,q=k.top10.length>0,f=i.warm+i.cool+i.dark+i.light>0,y=s=>

1u?s.toLocaleString():d,D=Array.from({length:10},(s,n)=>n+1);return e.jsxs("div",{className:Y.root,ref:L,children:[e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(J)}}),e.jsx(R,{items:[{name:"Color Palette Generator",href:"/tools/color-palette-generator"},{name:"Trends"}]}),e.jsx("header",{className:"masthead",children:e.jsxs("div",{className:"masthead-grid",children:[e.jsxs("div",{className:"masthead-text",children:[e.jsx("h1",{className:"masthead-h1",children:"The most popular colors people are using right now"}),e.jsx("p",{className:"masthead-lede",children:"The most popular colors right now, tracked in real time across every photo run through our color palette generator. No saves, no pins, no surveys, just what real photographs are made of."}),e.jsxs("p",{className:"masthead-updated",children:[e.jsxs("svg",{className:"masthead-updated-icon",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[e.jsx("path",{d:"M21 12a9 9 0 1 1-3-6.7"}),e.jsx("polyline",{points:"21 4 21 9 16 9"}),e.jsx("polyline",{points:"12 7 12 12 15 14"})]}),"Last updated ",e.jsx("time",{dateTime:S,children:C})]})]}),e.jsx("div",{className:"masthead-cta",children:e.jsx("a",{href:"/tools/color-palette-generator",className:"masthead-upload-btn",children:"Upload image"})})]})}),e.jsxs("main",{className:"page-wrap",children:[e.jsx("section",{className:"card card-counter reveal",children:e.jsxs("div",{className:"counter",children:[e.jsxs("div",{children:[e.jsx("div",{className:"counter-headline",children:"Total palettes extracted"}),e.jsx("div",{className:"counter-number",children:y(t.count)}),e.jsx("p",{className:"counter-suffix",children:"That’s the total number of palettes designers have pulled from their photos using our tool."})]}),e.jsxs("div",{className:"counter-stats",children:[e.jsxs("div",{className:"counter-stat-tile",children:[e.jsx("div",{className:"counter-stat-label",children:"Today"}),e.jsx("div",{className:"counter-stat-value",children:y(t.todayCount)}),e.jsx("div",{className:`counter-stat-trend ${u?t.todayChange<0?"down":"up":""}`,children:u?`${F(t.todayChange)} vs yesterday`:d})]}),e.jsxs("div",{className:"counter-stat-tile",children:[e.jsx("div",{className:"counter-stat-label",children:"This week"}),e.jsx("div",{className:"counter-stat-value",children:y(t.weekCount)}),e.jsx("div",{className:`counter-stat-trend ${u?t.weekChange<0?"down":"up":""}`,children:u?`${F(t.weekChange)} vs last week`:d})]}),e.jsxs("div",{className:"counter-stat-tile",children:[e.jsx("div",{className:"counter-stat-label",children:"Unique colors"}),e.jsx("div",{className:"counter-stat-value",children:y(t.uniqueHexes)}),e.jsx("div",{className:"counter-stat-trend",children:u?"distinct hex codes":d})]}),e.jsxs("div",{className:"counter-stat-tile",children:[e.jsx("div",{className:"counter-stat-label",children:"Most-extracted hex"}),e.jsx("div",{className:"counter-stat-value",children:t.mostExtractedHex?t.mostExtractedHex.toLowerCase():d}),e.jsx("div",{className:"counter-stat-trend",children:t.mostExtractedHex?"all-time leader":d})]})]})]})}),e.jsxs("section",{className:"card card-today reveal",id:"today",children:[e.jsxs("div",{className:"section-header",children:[e.jsx("h2",{className:"section-h2",children:"Today’s top ten."}),e.jsx("span",{className:"section-meta",children:"Last 24 hours, ranked by frequency"})]}),e.jsx("div",{className:"rank-table reveal-stagger",children:O?t.top10.map(s=>{const n=H(s.hex),l={background:s.hex};n==="fafafa"&&(l.border="1px solid #e5e5ea");const c=Math.max(8,s.share*1e3),v=I(s.hex),N={"--row-bg":s.hex,"--row-fg":G(s.hex)};return e.jsxs("div",{className:"rank-row",style:N,children:[e.jsx("div",{className:"rank-num",children:e.jsxs("span",{children:[s.rank,"."]})}),e.jsx("div",{className:"rank-swatch",style:l}),e.jsxs("div",{className:"rank-name",children:[e.jsx("span",{className:"rank-name-text",children:v.name}),e.jsx("span",{className:"rank-name-hex",children:s.hex.toLowerCase()}),s.label&&e.jsx("div",{className:"rank-name-label",children:s.label})]}),e.jsx("div",{className:"rank-share",children:U(s.share)}),e.jsx("div",{className:"rank-bar-wrap",children:e.jsx("div",{className:"rank-bar",style:{width:`${c}%`,background:s.hex}})}),Q(s)]},`today-${s.rank}-${s.hex}`)}):D.map(s=>e.jsxs("div",{className:"rank-row rank-row-empty",children:[e.jsx("div",{className:"rank-num",children:e.jsxs("span",{children:[s,"."]})}),e.jsx("div",{className:"rank-swatch rank-swatch-empty"}),e.jsxs("div",{className:"rank-name",children:[e.jsx("span",{className:"rank-name-text",children:d}),e.jsx("span",{className:"rank-name-hex",children:d})]}),e.jsx("div",{className:"rank-share",children:d}),e.jsx("div",{className:"rank-bar-wrap"}),e.jsx("div",{className:"rank-trend flat",children:d})]},`today-placeholder-${s}`))})]}),e.jsxs("section",{className:"card card-hof reveal",id:"all-time",children:[e.jsxs("div",{className:"section-header",children:[e.jsx("h2",{className:"section-h2",children:"The all-time top ten."}),e.jsx("span",{className:"section-meta",children:"Cumulative leaders since the index opened"})]}),e.jsx("div",{className:"hof-grid reveal-stagger",children:q?k.top10.map(s=>{const n=H(s.hex),l={background:s.hex};n==="fafafa"&&(l.border="1px solid #e5e5ea");const c=I(s.hex);return e.jsxs("div",{className:"hof-card",children:[e.jsx("div",{className:"hof-swatch",style:l}),e.jsxs("div",{className:"hof-rank",children:[s.rank,"."]}

1),e.jsx("span",{className:"hof-name",children:c.name}),e.jsx("span",{className:"hof-hex",children:s.hex.toLowerCase()}),e.jsxs("div",{className:"hof-share",children:[U(s.share)," of all palettes"]})]},`hof-${s.rank}-${s.hex}`)}):D.map(s=>e.jsxs("div",{className:"hof-card hof-card-empty",children:[e.jsx("div",{className:"hof-swatch hof-swatch-empty"}),e.jsxs("div",{className:"hof-rank",children:[s,"."]}),e.jsx("span",{className:"hof-name",children:d}),e.jsx("span",{className:"hof-hex",children:d}),e.jsx("div",{className:"hof-share",children:d})]},`hof-placeholder-${s}`))})]}),e.jsxs("section",{className:"card card-families reveal",id:"families",children:[e.jsxs("div",{className:"section-header",children:[e.jsx("h2",{className:"section-h2",children:"What kinds of colors win."}),e.jsxs("span",{className:"section-meta",children:["Distribution of the last ",i.windowDays," days"]})]}),e.jsxs("div",{className:"families-grid",children:[e.jsx("div",{className:"families-prose",children:f&&u?e.jsxs(e.Fragment,{children:[e.jsxs("p",{children:["Across ",t.count.toLocaleString()," palettes, warm tones still hold the largest share. But the gap is narrowing. Cool tones gained ground over the last quarter, driven by a noticeable shift toward dusty blues and sage greens in product photography."]}),e.jsx("p",{children:"Dark colors lead in absolute frequency because deep neutrals show up in nearly every photograph. Mid-tones, however, are the colors most likely to appear in the brand-defining position of a palette, the second or third color rather than the first."})]}):e.jsx("p",{children:"No data yet — once palettes start flowing in, this section will fill out with the live tone distribution."})}),e.jsxs("div",{className:"families-chart",children:[e.jsx("div",{className:"families-bar-stack",children:M.map(s=>{const n=f?Math.round(i[s.key]*100):25,l={background:f?s.color:"#e5e5ea",flex:n,color:f?s.lightText?"#1d1d1f":"#ffffff":"#9a9aa2"};return e.jsx("div",{className:"families-bar-segment",style:l,children:f?`${n}%`:d},s.key)})}),e.jsx("div",{className:"families-legend",children:M.map(s=>e.jsxs("div",{className:"families-legend-row",children:[e.jsx("div",{className:"families-legend-dot",style:{background:s.color}}),e.jsx("div",{className:"families-legend-name",children:s.label}),e.jsx("div",{className:"families-legend-value",children:f?`${(i[s.key]*100).toFixed(1)}%`:d})]},s.key))})]})]})]}),e.jsx("section",{className:"card card-method reveal",id:"methodology",children:e.jsxs("div",{className:"method",children:[e.jsxs("div",{className:"method-body",children:[e.jsx("h3",{className:"method-h3",children:"How the data is gathered."}),e.jsx("p",{children:"Each color shown here was extracted from a photograph uploaded to the Jukebox color palette generator. The extraction uses k-means clustering with k-means++ initialization, run entirely in the user’s browser. The resulting hex codes are sent to our index."}),e.jsx("p",{children:"Photos themselves never leave the user’s device. We store only the resulting hex codes and a timestamp. Hexes are grouped by rounding each RGB channel to the nearest 10, which keeps near-identical colors from fragmenting the rankings."}),e.jsx("p",{children:"Trend movement (up, down, no change) compares a 24-hour rolling window against the previous 24 hours. The “all time” hall of fame uses cumulative frequency since January 2026."})]}),e.jsxs("div",{className:"method-citations",children:[e.jsx("h3",{className:"method-h3",children:"Citing this data."}),e.jsx("p",{children:"Journalists, designers, and researchers are welcome to cite The Jukebox Color Index. The data is free to reference under standard editorial fair use."}),e.jsxs("p",{children:[e.jsx("strong",{children:"Suggested citation"}),"Jukebox Print, “The Color Index,” accessed [date], jukeboxprint.com/tools/color-palette-generator/trends/."]}),e.jsxs("p",{children:[e.jsx("strong",{children:"Press contact"}),"For embargoed monthly recaps, exclusive cuts of the data, or interviews about color trends, email ",e.jsx("a",{href:"mailto:[email protected]",children:"[email protected]"}),"."]})]})]})})]})]})};export{de as default};