https://webzooo.com/assets/ChooseColorPalette-Bs0jg4im.js

1import{r as h,j as e,L as s}from"./react-vendor-De9fHIuN.js";import{E as p}from"./EditorialPageLayout-BQScfthQ.js";import{R as m}from"./RelatedGuides-z5UqF08s.js";import{b as x,d as g,ak as b}from"./index-Cx94C-ON.js";import"./SiteFooter-B2LJNZrA.js";import"./footer-dots-UTegXgL9.js";import"./button-D4ZvhJXX.js";import"./radix-base-Dh91VGHp.js";import"./radix-vendor-BQCqNqg0.js";import"./index-D3TFbZtg.js";import"./input-ByNtl6d_.js";import"./label-Bs9ubFll.js";import"./radix-label-DhIN3S0V.js";import"./textarea-Y4ZewLuk.js";import"./index-BNludUco.js";import"./loader-circle-BwnpLtSb.js";import"./learnArticles-DZK4JSZf.js";import"./query-vendor-CRtkK6HE.js";import"./postgrest-vendor-DPuxUKz0.js";const d=({mode:r,caption:t,count:i=4})=>{const[l,u]=h.useState([]);return h.useEffect(()=>{let o=!1;return(async()=>{let a=b.from("websites").select("slug, name, desktop_screenshot, anchor_hex").eq("published",!0).not("desktop_screenshot","is",null).not("anchor_hex","is",null);r==="anchor"?a=a.gte("anchor_chroma",.09).gte("anchor_lightness",.35).lte("anchor_lightness",.8):a=a.gte("anchor_lightness",.93).lte("anchor_chroma",.02);const{data:c}=await a.order("dominance_score",{ascending:!1,nullsFirst:!1}).limit(i);!o&&c&&u(c)})(),()=>{o=!0}},[r,i]),l.length===0?null:e.jsxs("figure",{className:"not-prose my-8",children:[e.jsx("ul",{className:"grid grid-cols-2 gap-3 sm:grid-cols-4 list-none p-0 m-0",children:l.map(o=>e.jsx("li",{className:"m-0",children:e.jsxs(s,{to:`/site/${o.slug}`,className:"group block",children:[e.jsx("div",{className:"relative aspect-[451/564] overflow-hidden rounded-[8px] border border-border bg-muted",children:e.jsx("img",{src:x(o.desktop_screenshot),srcSet:g(o.desktop_screenshot)||void 0,sizes:"(max-width: 640px) 50vw, 25vw",alt:`${o.name} website homepage design`,width:451,height:564,loading:"lazy",decoding:"async",className:"absolute top-0 left-0 w-full h-auto block transition-transform duration-300 group-hover:scale-[1.02]",style:{backgroundColor:o.anchor_hex??void 0}})}),e.jsxs("div",{className:"mt-2 flex items-center gap-2",children:[e.jsx("span",{"aria-hidden":"true",className:"h-3 w-3 shrink-0 rounded-full border border-border",style:{backgroundColor:o.anchor_hex??void 0}}),e.jsxs("span",{className:"text-xs text-muted-foreground truncate",children:[o.name,o.anchor_hex?` · ${o.anchor_hex.toUpperCase()}`:""]})]})]})},o.slug))}),e.jsx("figcaption",{className:"mt-3 text-xs text-muted-foreground",children:t})]})},n="https://webzooo.com/learn/how-to-choose-website-color-palette",y="2026-08-16",f=[{size:"Exactly two colours",share:"71.5%"},{size:"Three colours",share:"23.5%"},{size:"Four or more colours",share:"4.1%"}],w=["Choosing five colours because a generator handed you five. The generator has no idea how many roles your interface has.","Picking a saturation level that fails contrast. A colour that sings as a 200px swatch can be unreadable as text or as a button label.","Copying a palette without copying the proportions. The same three colours at 90/8/2 and at 33/33/33 are not the same design."],$=()=>{const r={"@context":"https://schema.org","@type":"BlogPosting",headline:"How to Choose a Color Palette for Your Website (With Real Examples)",description:"A practical method for choosing website colours, backed by what 4,000+ real sites actually do. Start with one colour, not five.",url:n,mainEntityOfPage:n,datePublished:y,dateModified:"2026-08-17",inLanguage:"en",author:{"@type":"Organization",name:"Webzooo",url:"https://webzooo.com"},publisher:{"@type":"Organization",name:"Webzooo",logo:{"@type":"ImageObject",url:"https://webzooo.com/logo.png"}},about:[{"@type":"Thing",name:"Website color palette"},{"@type":"Thing",name:"Color theory in web design"}]};return e.jsxs(p,{title:"How to Choose a Website Color Palette — Webzooo",description:"A practical method for choosing website colours, backed by what 4,000+ real sites actually do. Start with one colour, not five.",canonical:n,h1:"How to choose a color palette for your website (with real examples)",intro:"Colour-theory articles teach five-colour palettes. Almost no shipped website has one. Here is what the real numbers say, and a method that follows them.",breadcrumbs:[{label:"Learn",href:"/learn"}

1,{label:"Choosing a colour palette"}],jsonLd:r,children:[e.jsxs("section",{children:[e.jsxs("p",{children:["We catalogue 4,067 live websites, and we store the palette for every one of them. When we counted how many colours those palettes actually contain, the result was not what the tutorials describe: ",e.jsx("strong",{children:"71.5% use exactly two colours"}),". 23.5% use three. Only 4.1% use four or more."]}),e.jsx("div",{className:"not-prose overflow-x-auto",children:e.jsxs("table",{className:"w-full text-sm border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-border/60 text-left",children:[e.jsx("th",{className:"py-2 pr-4 font-semibold",children:"Palette size"}),e.jsx("th",{className:"py-2 font-semibold",children:"Share of 4,067 sites"})]})}),e.jsx("tbody",{children:f.map(t=>e.jsxs("tr",{className:"border-b border-border/40",children:[e.jsx("td",{className:"py-2 pr-4",children:t.size}),e.jsx("td",{className:"py-2 tabular-nums",children:t.share})]},t.size))})]})}),e.jsx("p",{children:"The five-colour palette is effectively nonexistent in production. So the method below is not “generate a palette”; it is “choose one colour, then justify every colour you add after it”."})]}),e.jsxs("section",{children:[e.jsx("h2",{children:"1. Start with one anchor colour, not a palette"}),e.jsx("p",{children:"The anchor is the single dominant colour a visitor would name if you asked what colour the site is. Everything else exists to support it: backgrounds recede behind it, text sits on it, accents point at it. Choosing an anchor is one decision instead of five, and it is the decision that carries the brand."}),e.jsxs("p",{children:["Pick it for a reason you can say out loud — an existing brand colour, a deliberate contrast with your category, or a mood you need to communicate. If you want the reasoning behind specific hues, our"," ",e.jsx(s,{to:"/learn/color-psychology",children:"colour psychology guide"})," covers what each family tends to signal on the web."]}),e.jsx(d,{mode:"anchor",caption:"Real sites from our library with a single strong anchor colour — swatch shows each site's dominant hex."})]}),e.jsxs("section",{children:[e.jsx("h2",{children:"2. Add a neutral, then stop"}),e.jsxs("p",{children:["Across the whole library, ",e.jsx("strong",{children:"white is 38.5% of all dominant colours"}),". That is the real shape of most “palettes”: one colour plus white, or one colour plus a near-black. The neutral does the heavy lifting — it holds the layout together and gives the anchor somewhere to stand out against."]}),e.jsx("p",{children:"At this point you have two colours, which is what 71.5% of real sites ship. If you stop here, you are in the majority and the design will read as coherent by default."}),e.jsx(d,{mode:"neutral",caption:"White-dominant sites: the anchor colour appears only where it has to, on top of a neutral canvas."})]}),e.jsxs("section",{children:[e.jsx("h2",{children:"3. Only add a third colour if it has a job"}),e.jsx("p",{children:"The third colour needs a named role, and usually there is exactly one available: the primary call to action, or a single accent used for state and emphasis. If you cannot say which element the colour owns, it does not belong in the palette — 23.5% of sites reach three colours, and almost always because something needed to be unmissable."}),e.jsx("p",{children:"If you find yourself wanting a fourth and fifth, ask whether they are colours or just shades of the anchor. Tints and shades of one hue are not new palette entries."})]}),e.jsxs("section",{children:[e.jsx("h2",{children:"4. Check it against your industry"}),e.jsxs("p",{children:["Colour use is not evenly spread across categories, so a palette that feels bold in one industry is the default in another. Compare your candidate against what your category actually does before committing — see"," ",e.jsx(s,{to:"/learn/saas-website-colors",children:"what colours SaaS websites actually use"}),", the industry breakdowns in"," ",e.jsx(s,{to:"/learn/color-psychology",children:"colour psych

1ology"}),", and"," ",e.jsx(s,{to:"/learn/color-trends-2026",children:"2026 colour trends"}),". Then browse the live examples by colour on ",e.jsx(s,{to:"/colors",children:"the colours index"}),"."]})]}),e.jsxs("section",{children:[e.jsx("h2",{children:"5. Test it in context, not on a swatch card"}),e.jsx("p",{children:"A hex code looks like a different colour depending on how much of the screen it occupies. The same value that feels rich as a 44px button can feel oppressive as a full-page background, and a pastel that looks gentle in a swatch row can turn muddy behind body text. Judge a palette on a real page at real proportions — full-page screenshots, not chips."}),e.jsx("p",{children:"This is the whole reason we store desktop and mobile full-page captures next to every hex value: so you can see a colour after it has survived contact with a layout."})]}),e.jsxs("section",{children:[e.jsx("h2",{children:"Common mistakes"}),e.jsx("ul",{className:"list-disc pl-6 space-y-2 text-foreground/80",children:w.map(t=>e.jsx("li",{children:t},t))})]}),e.jsxs("section",{children:[e.jsx("h2",{children:"Where to go next"}),e.jsxs("p",{children:["Browse real sites by any hex code on ",e.jsx(s,{to:"/colors",children:"the colours index"})," to see your candidate anchor in production, or install the"," ",e.jsx(s,{to:"/figma-plugin",children:"Figma plugin"})," to do the same thing without leaving the file you are designing in."]})]}),e.jsx(m,{slug:"/learn/how-to-choose-website-color-palette"})]})};export{$ as default};