[{"data":1,"prerenderedAt":1669},["ShallowReactive",2],{"/blog/extract-colour-palette-image-free":3,"recommended-/blog/extract-colour-palette-image-free":349},{"id":4,"title":5,"author":6,"body":7,"category":334,"date":335,"description":336,"draft":337,"extension":338,"image":339,"meta":340,"navigation":341,"path":342,"seo":343,"stem":344,"tags":345,"__hash__":348},"blog/blog/extract-colour-palette-image-free.md","How to Extract a Colour Palette From Any Image (Free)",null,{"type":8,"value":9,"toc":317},"minimark",[10,14,17,20,25,28,44,48,51,91,95,98,103,112,116,119,123,135,139,142,147,151,157,178,182,185,227,231,239,252,256,261,264,269,272,277,285,290,293,298,305,310],[11,12,13],"p",{},"Colour consistency is the foundation of brand recognition. It’s what makes a Coca-Cola can instantly recognisable before you even read the logo, or why a Tiffany’s box sparks excitement before it’s even opened. But for digital marketers and designers, maintaining that consistency can be a technical headache.",[11,15,16],{},"We’ve all been there: you see a beautiful photograph, a competitor’s well-designed landing page, or a piece of inspiration on Pinterest, and you want to use those exact colours. You try to eyeball it, using a colour picker to guess the shade, but it never looks quite right. The red is too orange, or the blue lacks that specific depth.",[11,18,19],{},"Without the exact colour codes, you are essentially guessing. And in branding, guessing leads to inconsistency. To build a professional visual identity, you need precision. You need the ability to pull the exact DNA of a colour scheme from any visual reference instantly.",[21,22,24],"h2",{"id":23},"what-is-a-colour-palette-extractor","What Is a Colour Palette Extractor?",[11,26,27],{},"A colour palette extractor is a tool that programmatically analyses the pixel data of an image to identify its chromatic composition. Unlike a simple \"colour dropper\" tool, which picks a single pixel (which might be affected by shadow or compression artefacts), a palette extractor calculates the mathematical average of colour clusters to find the dominant hues.",[11,29,30,31,35,36,39,40,43],{},"It scans the image, groups similar pixels, and returns a palette of the 5–10 most significant colours used in that visual. Most importantly for web design and digital marketing, it instantly translates these visual colours into the three code languages your computer understands: ",[32,33,34],"strong",{},"HEX",", ",[32,37,38],{},"RGB",", and ",[32,41,42],{},"HSL",".",[21,45,47],{"id":46},"when-would-you-use-a-colour-palette-extractor","When Would You Use a Colour Palette Extractor?",[11,49,50],{},"While it might sound like a niche tool for graphic designers, a colour palette extractor is actually a daily utility for smart digital marketers. Here are six scenarios where this tool saves hours of work:",[52,53,54,61,67,73,79,85],"ol",{},[55,56,57,60],"li",{},[32,58,59],{},"Competitor Analysis:"," Take a screenshot of a competitor’s website or ad creative. Run it through the extractor to see exactly which hex codes they are using. Are they using a true black (#000000) or a softer charcoal (#333333)?",[55,62,63,66],{},[32,64,65],{},"Mood Boarding:"," You have a mood board of images that represent the \"vibe\" of your new campaign. Extract the palette from these images to generate a concrete style guide for your designers.",[55,68,69,72],{},[32,70,71],{},"Matching Brand Assets:"," You’ve joined a new company and have a logo file but no brand guidelines PDF. Extract the palette from the logo to ensure your slide decks match the official branding perfectly.",[55,74,75,78],{},[32,76,77],{},"Recreating Themes:"," You found a website theme you love. Instead of inspecting the code element by element, screenshot the page and extract the palette to get the entire colour scheme in one go.",[55,80,81,84],{},[32,82,83],{},"Nature Inspiration:"," Sometimes the best colour combinations occur naturally. A photo of a sunset, a forest, or a seascape can provide a perfectly balanced colour harmony that you can lift directly for a project.",[55,86,87,90],{},[32,88,89],{},"Client Work:"," A client sends you a photo and says, \"I want the website to feel like this.\" Don’t guess—extract the exact colours to start your design process on the right foot.",[21,92,94],{"id":93},"how-to-extract-a-colour-palette-in-3-steps","How to Extract a Colour Palette in 3 Steps",[11,96,97],{},"You don't need expensive software like Adobe Photoshop or Illustrator to do this. You can do it right in your browser using CampaignMorph’s free tool.",[99,100,102],"h3",{"id":101},"step-1-upload-your-image","Step 1: Upload Your Image",[11,104,105,106,111],{},"Navigate to the ",[107,108,110],"a",{"href":109},"/tools/color-palette-extractor","Color Palette Extractor",". Drag and drop your image file (JPEG, PNG, or WebP) onto the canvas, or click to browse your device. The tool processes the image locally in your browser, so your files are never uploaded to a server—perfect for confidential client work.",[99,113,115],{"id":114},"step-2-analyse-the-results","Step 2: Analyse the Results",[11,117,118],{},"The tool instantly processes the image and generates a row of colour swatches representing the dominant palette. You will typically see a mix of light, dark, and saturated colours that create the photo's visual balance.",[99,120,122],{"id":121},"step-3-copy-your-codes","Step 3: Copy Your Codes",[11,124,125,126,128,129,131,132,134],{},"Click on any colour swatch to copy its code. You can toggle between ",[32,127,34],{}," (e.g., #FF5733), ",[32,130,38],{}," (e.g., rgb(255, 87, 51)), or ",[32,133,42],{}," (e.g., hsl(9, 100%, 60%)) depending on what your design software requires.",[99,136,138],{"id":137},"ready-to-find-your-perfect-colours","Ready to find your perfect colours?",[11,140,141],{},"Upload any image and get the exact colour codes in seconds.",[11,143,144],{},[107,145,146],{"href":109},"Open Color Palette Extractor",[21,148,150],{"id":149},"understanding-your-extracted-colours","Understanding Your Extracted Colours",[11,152,153,154,43],{},"Once you have extracted a palette of 5 or 6 colours, how do you use them? You rarely want to use every colour equally. A professional brand palette typically follows a hierarchy, often referred to as the ",[32,155,156],{},"60-30-10 rule",[158,159,160,166,172],"ul",{},[55,161,162,165],{},[32,163,164],{},"Primary Colour (60%):"," This is usually a neutral colour—white, light grey, cream, or a dark charcoal. It serves as the background and canvas for your content. From your extracted palette, pick the lightest or darkest tone for this role.",[55,167,168,171],{},[32,169,170],{},"Secondary Colour (30%):"," This is your main \"brand\" colour. It’s used for headers, major graphics, and layout elements. It defines the look. Pick the most vibrant or distinct colour from your extraction for this.",[55,173,174,177],{},[32,175,176],{},"Accent Colour (10%):"," This is used sparingly for calls-to-action (buttons, links) and highlights. It needs to contrast sharply with the other two. Pick a colour from your palette that stands out against the secondary colour.",[21,179,181],{"id":180},"using-your-extracted-palette-in-design-tools","Using Your Extracted Palette in Design Tools",[11,183,184],{},"Now that you have your codes, here is how to apply them across your workflow:",[158,186,187,197,203,212],{},[55,188,189,192,193,196],{},[32,190,191],{},"Canva:"," When selecting a colour for text or elements, click the \"+\" icon in the colour menu and paste your ",[32,194,195],{},"HEX code"," directly into the search bar.",[55,198,199,202],{},[32,200,201],{},"Figma:"," Select an object, look at the \"Fill\" section in the right sidebar, and paste the HEX code. You can also save these to your document's local styles.",[55,204,205,208,209,211],{},[32,206,207],{},"PowerPoint:"," Go to Font Color or Shape Fill > More Colors > Custom. Here you can paste the HEX code or input the ",[32,210,38],{}," values if you are on an older version.",[55,213,214,217,218,222,223,226],{},[32,215,216],{},"CSS / Web Development:"," You can use any format, but HEX is standard for static colours ( ",[219,220,221],"code",{},"colour: #FF5733;","). If you plan to manipulate opacity later, copy the RGB values to use in an rgba format ( ",[219,224,225],{},"colour: rgba(255, 87, 51, 0.5);",").",[21,228,230],{"id":229},"from-extracted-palette-to-brand-identity","From Extracted Palette to Brand Identity",[11,232,233,234,238],{},"Extracting colours is just the first step. To build a cohesive brand, you need to document these decisions. We recommend reading our ",[107,235,237],{"href":236},"/blog/brand-visual-identity-guide","Brand Visual Identity Guide"," to learn how to formalise these colours into a style guide.",[11,240,241,242,246,247,251],{},"If you are struggling to narrow down your choices, check out ",[107,243,245],{"href":244},"/blog/how-to-choose-brand-colors","How to Choose Brand Colours"," for a psychological breakdown of what different hues communicate. And if you are confused by the different code formats, our ",[107,248,250],{"href":249},"/blog/hex-vs-rgb-vs-hsl-guide","HEX vs RGB vs HSL Guide"," will clarify everything.",[21,253,255],{"id":254},"frequently-asked-questions","Frequently Asked Questions",[11,257,258],{},[32,259,260],{},"Can I extract colours from a website screenshot?",[11,262,263],{},"Yes, absolutely. Take a screenshot of the website (Command+Shift+4 on Mac, or Snipping Tool on Windows), save it as an image, and upload it to the Colour Palette Extractor. It is often faster than inspecting the code.",[11,265,266],{},[32,267,268],{},"How many colours should a brand palette have?",[11,270,271],{},"Most professional brands use 3–5 core colours: one background/neutral, one primary brand colour, one secondary/support colour, and one accent colour for actions. Extracting too many colours can lead to a cluttered, \"rainbow\" look.",[11,273,274],{},[32,275,276],{},"How accurate is colour extraction from a photo?",[11,278,279,280,284],{},"It is mathematically precise, based on the image's pixels. However, be aware that lighting conditions in photos (shadows, filters, warm indoor light) affect the colour. The tool extracts the colour ",[281,282,283],"em",{},"as it appears in the image",", not necessarily the object's original colour in real life.",[11,286,287],{},[32,288,289],{},"Can I get the exact PANTONE colour from a photo?",[11,291,292],{},"Not directly. Tools extract digital colour values (RGB/HEX). Pantone is a proprietary ink-matching system for print. While you can find \"closest match\" converters online, digital extraction cannot guarantee a perfect Pantone match because screens emit light while ink reflects it.",[11,294,295],{},[32,296,297],{},"What is the difference between a colour picker and a colour palette extractor?",[11,299,300,301,304],{},"A colour picker (eyedropper) selects the exact colour of a single pixel you click on. A palette extractor analyses the ",[281,302,303],{},"entire"," image to find the mathematical averages and dominant themes, giving you a A cohesive set of colours rather than just one point.",[11,306,307],{},[32,308,309],{},"Ready to build your palette? Stop guessing and start designing with precision.",[11,311,312],{},[32,313,314],{},[107,315,316],{"href":109},"Launch the Color Palette Extractor Now →",{"title":318,"searchDepth":319,"depth":319,"links":320},"",2,[321,322,323,330,331,332,333],{"id":23,"depth":319,"text":24},{"id":46,"depth":319,"text":47},{"id":93,"depth":319,"text":94,"children":324},[325,327,328,329],{"id":101,"depth":326,"text":102},3,{"id":114,"depth":326,"text":115},{"id":121,"depth":326,"text":122},{"id":137,"depth":326,"text":138},{"id":149,"depth":319,"text":150},{"id":180,"depth":319,"text":181},{"id":229,"depth":319,"text":230},{"id":254,"depth":319,"text":255},"Marketing","2026-04-04","Extract the exact colour palette from any image instantly; get HEX, RGB and HSL codes for every dominant colour. Free, browser-based, no sign-up.",false,"md","/blog/extract-colour-palette-image-free.webp",{},true,"/blog/extract-colour-palette-image-free",{"title":5,"description":336},"blog/extract-colour-palette-image-free",[346,347],"Digital Marketing","Color Palette","X-Szxbx0n_vaPm2TmN5WvXPQzRc4bQ5muIBaYRoUO7g",[350,744,1244],{"id":351,"title":352,"author":6,"body":353,"category":334,"date":734,"description":735,"draft":337,"extension":338,"image":736,"meta":737,"navigation":341,"path":738,"seo":739,"stem":740,"tags":741,"__hash__":743},"blog/blog/choose-brand-colours-that-actually-work-psychology.md","How to Choose Brand Colours That Actually Work (With Psychology)",{"type":8,"value":354,"toc":724},[355,358,369,372,376,383,403,407,410,554,558,561,587,598,602,609,626,635,639,642,662,666,669,675,677,682,685,690,693,698,701,706,709,714,717],[11,356,357],{},"Choosing your brand colours often feels like a matter of personal taste. You might think, \"I like purple, so my logo should be purple.\" But in the world of marketing, colour is data, not just decoration.",[11,359,360,361,364,365,368],{},"Studies show that colour increases brand recognition by up to ",[32,362,363],{},"80%",". More importantly, up to ",[32,366,367],{},"85%"," of purchasing decisions are influenced by colour alone. When a customer scans a shelf or a search result, the colour is the very first signal their brain processes—faster than text, faster than shape.",[11,370,371],{},"The right colour palette can instantly make your brand feel trustworthy, exciting, or premium. The wrong one can make you look cheap, confusing, or invisible. Choosing your brand colours is a strategic business decision, and there is a science to getting it right.",[21,373,375],{"id":374},"why-brand-colours-matter-more-than-you-think","Why Brand Colours Matter More Than You Think",[11,377,378,379,382],{},"Psychologists have found that people form a first impression of a product or brand within ",[32,380,381],{},"90 seconds"," of initial viewing. Up to 90% of that assessment is based on colour alone.",[158,384,385,391,397],{},[55,386,387,390],{},[32,388,389],{},"Brand Recognition:"," Think of a soft drink can that is red. You immediately think \"Coca-Cola\". That is the power of owning a colour.",[55,392,393,396],{},[32,394,395],{},"Trust Signals:"," Would you trust a bank that used neon pink and lime green? Probably not. We have subconscious expectations for what \"reliability\" looks like.",[55,398,399,402],{},[32,400,401],{},"Differentiation:"," If every competitor in your niche uses blue, choosing orange instantly makes you the visible alternative.",[21,404,406],{"id":405},"colour-psychology-what-each-colour-communicates","Colour Psychology: What Each Colour Communicates",[11,408,409],{},"Every colour triggers specific psychological associations. While these can vary by culture, here are the standard meanings in Western marketing:",[158,411,412,430,449,465,481,497,513,529,538],{},[55,413,414,417,418,421,422,425,426,429],{},[32,415,416],{},"Red:"," Energy, urgency, passion, hunger. Used by ",[281,419,420],{},"Netflix"," (excitement), ",[281,423,424],{},"Coca-Cola"," (happiness), ",[281,427,428],{},"YouTube"," (action). Excellent for clearance sales and food brands.",[55,431,432,435,436,35,439,35,442,35,445,448],{},[32,433,434],{},"Blue:"," Trust, stability, logic, calm. The most popular colour in branding. Used by ",[281,437,438],{},"Facebook",[281,440,441],{},"PayPal",[281,443,444],{},"Samsung",[281,446,447],{},"Ford",". Standard for finance, tech, and healthcare.",[55,450,451,454,455,35,458,35,461,464],{},[32,452,453],{},"Green:"," Growth, health, nature, money. Used by ",[281,456,457],{},"Spotify",[281,459,460],{},"Whole Foods",[281,462,463],{},"Starbucks",". Essential for sustainability and wellness brands.",[55,466,467,470,471,35,474,35,477,480],{},[32,468,469],{},"Yellow/Gold:"," Optimism, warmth, caution, speed. Used by ",[281,472,473],{},"McDonald’s",[281,475,476],{},"IKEA",[281,478,479],{},"Snapchat",". High visibility, but can be fatiguing to eyes if overused.",[55,482,483,486,487,35,490,35,493,496],{},[32,484,485],{},"Orange:"," Friendliness, value, creativity, enthusiasm. Used by ",[281,488,489],{},"Amazon",[281,491,492],{},"Fanta",[281,494,495],{},"Harley-Davidson",". Often seen as a \"budget-friendly\" or \"fun\" alternative to aggressive red.",[55,498,499,502,503,35,506,35,509,512],{},[32,500,501],{},"Purple:"," Luxury, wisdom, creativity, royalty. Used by ",[281,504,505],{},"Cadbury",[281,507,508],{},"Hallmark",[281,510,511],{},"Twitch",". Bridges the gap between stimulating red and calm blue.",[55,514,515,518,519,35,522,35,525,528],{},[32,516,517],{},"Black:"," Elegance, power, sophistication, exclusivity. Used by ",[281,520,521],{},"Apple",[281,523,524],{},"Chanel",[281,526,527],{},"Nike",". The standard for luxury fashion and premium tech.",[55,530,531,534,535,537],{},[32,532,533],{},"White:"," Purity, simplicity, modernism, hygiene. Used by ",[281,536,521],{}," products, minimalist skincare brands. Requires careful use of whitespace.",[55,539,540,543,544,35,547,35,550,553],{},[32,541,542],{},"Pink:"," Care, femininity, playfulness, romance. Used by ",[281,545,546],{},"Barbie",[281,548,549],{},"Victoria's Secret",[281,551,552],{},"T-Mobile",". Increasingly used in tech to signal \"friendliness\" (e.g., Lyft).",[21,555,557],{"id":556},"industry-colour-conventions","Industry Colour Conventions",[11,559,560],{},"Before you pick a colour, look at your industry. There are usually unwritten rules:",[158,562,563,569,575,581],{},[55,564,565,568],{},[32,566,567],{},"Finance & Tech:"," Dominated by Blue (trust) and Grey (logic).",[55,570,571,574],{},[32,572,573],{},"Healthcare:"," Dominated by Blue (cleanliness) and Green (health).",[55,576,577,580],{},[32,578,579],{},"Fast Food:"," Dominated by Red and Yellow (appetite stimulation).",[55,582,583,586],{},[32,584,585],{},"Sustainability:"," Almost exclusively Green and Earth Tones.",[11,588,589,590,593,594,597],{},"You have two choices: ",[32,591,592],{},"Follow the convention"," to fit in and gain instant trust (e.g., a blue bank feels safe), or ",[32,595,596],{},"break the convention"," to stand out (e.g., a purple bank like Nubank signals disruption). Both are valid strategies, but be intentional about it.",[21,599,601],{"id":600},"how-to-build-a-3-colour-brand-palette","How to Build a 3-Colour Brand Palette",[11,603,604,605,608],{},"A brand needs more than just one colour. The most effective palettes follow the ",[32,606,607],{},"60-30-10 Rule"," used by interior designers:",[52,610,611,616,621],{},[55,612,613,615],{},[32,614,164],{}," This is the dominant colour of your visual space. In modern web design, this is usually a neutral—White, Light Grey, or Dark Charcoal. It sets the stage.",[55,617,618,620],{},[32,619,170],{}," This is your \"Brand\" colour. It is used for headers, logos, graphics, and backgrounds. It provides the personality.",[55,622,623,625],{},[32,624,176],{}," This is your \"Action\" colour. It is used for buttons, links, and alerts. It must contrast sharply with the other two to draw the eye.",[11,627,628,631,632,634],{},[32,629,630],{},"Pro Tip:"," If you are struggling to find colours that look good together, find a photo that embodies the \"vibe\" of your brand (e.g., a forest, a cityscape, a neon sign). Upload it to our ",[107,633,110],{"href":109}," to instantly pull a harmonious colour scheme from reality.",[21,636,638],{"id":637},"testing-your-brand-colours","Testing Your Brand Colours",[11,640,641],{},"Before you commit to a palette, you must stress-test it:",[158,643,644,650,656],{},[55,645,646,649],{},[32,647,648],{},"The Monochrome Test:"," Does your logo still look good in black and white? If it relies entirely on colour to be readable, it will fail on receipts or photocopies.",[55,651,652,655],{},[32,653,654],{},"The Contrast Test:"," Do your colours have enough contrast for readability? Web accessibility standards (WCAG) require a contrast ratio of at least 4.5:1 for normal text.",[55,657,658,661],{},[32,659,660],{},"The Dark Mode Test:"," Does your brand blue look vibrant on a dark background, or does it disappear? You may need a lighter variant for dark-mode interfaces.",[99,663,665],{"id":664},"found-your-perfect-colours","Found your perfect colours?",[11,667,668],{},"Save them in every format (HEX, RGB, HSL) instantly.",[11,670,671],{},[107,672,674],{"href":673},"/tools/color-converter","Open Color Converter",[21,676,255],{"id":254},[11,678,679],{},[32,680,681],{},"How many brand colours should I have?",[11,683,684],{},"Keep it simple. Start with 3 core colours: a background neutral, a primary brand colour, and an accent action colour. You can add shades (lighter/darker versions) of these later, but a core palette of 3 ensures consistency.",[11,686,687],{},[32,688,689],{},"Can I change my brand colours after launch?",[11,691,692],{},"Yes, but be careful. \"Rebranding\" is expensive and risks confusing current customers. If you must change, try to evolve the colour (e.g., making your blue brighter) rather than changing the hue entirely, unless you are signalling a complete strategic pivot.",[11,694,695],{},[32,696,697],{},"What colours should I avoid?",[11,699,700],{},"Avoid neon colours for body text (hard to read). Avoid vibrating colour combinations (like pure red text on pure blue background), which cause eye strain. Avoid pale yellow on white backgrounds (invisible).",[11,702,703],{},[32,704,705],{},"How do I make brand colours accessible?",[11,707,708],{},"Focus on contrast. Ensure your text colour stands out clearly against your background colour. Use free online contrast checkers to verify your palette meets WCAG AA standards.",[11,710,711],{},[32,712,713],{},"What colour makes people trust a brand?",[11,715,716],{},"Blue is universally cited as the colour of trust, intelligence, and stability. This is why it is the default choice for banks, insurance companies, and social networks handling personal data.",[11,718,719],{},[32,720,721],{},[281,722,723],{},"Colour is a tool, not just a decoration. Choose wisely, use consistently, and your brand will build recognition with every interaction.",{"title":318,"searchDepth":319,"depth":319,"links":725},[726,727,728,729,730,733],{"id":374,"depth":319,"text":375},{"id":405,"depth":319,"text":406},{"id":556,"depth":319,"text":557},{"id":600,"depth":319,"text":601},{"id":637,"depth":319,"text":638,"children":731},[732],{"id":664,"depth":326,"text":665},{"id":254,"depth":319,"text":255},"2026-04-08","Learn how to choose the perfect brand colour palette using colour psychology, industry norms and practical design rules. Free colour tools included.","/blog/choose-brand-colours-that-actually-work-psychology.webp",{},"/blog/choose-brand-colours-that-actually-work-psychology",{"title":352,"description":735},"blog/choose-brand-colours-that-actually-work-psychology",[346,742],"Brand Colors","Deo0k1PUEU054GNx-fLMxDFHiJAaLJWkCj-TXv9V5IA",{"id":745,"title":746,"author":6,"body":747,"category":334,"date":1235,"description":1236,"draft":337,"extension":338,"image":1237,"meta":1238,"navigation":341,"path":1239,"seo":1240,"stem":1241,"tags":1242,"__hash__":1243},"blog/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet.md","HEX vs RGB vs HSL: The Web Designer's Colour Format Cheat Sheet",{"type":8,"value":748,"toc":1223},[749,762,765,768,772,775,812,816,825,832,852,875,889,895,899,906,912,926,937,943,947,954,961,981,987,993,997,1004,1011,1015,1119,1123,1130,1133,1137,1140,1144,1146,1151,1162,1167,1179,1184,1191,1196,1207,1212,1218],[11,750,751,752,35,755,35,758,761],{},"It is every non-designer's frustration. You have a brand colour—let's say a nice, trustworthy blue. But when you look at your style guide, that single blue is described in four different ways: ",[219,753,754],{},"#4F46E5",[219,756,757],{},"rgb(79, 70, 229)",[219,759,760],{},"hsl(243, 75%, 59%)",", and maybe even a CMYK percentage.",[11,763,764],{},"Which one are you supposed to use? Why do we need so many different codes for the exact same colour? And what happens if you use the wrong one?",[11,766,767],{},"If you’ve ever felt confused by colour formats, you are not alone. This guide will end the confusion, explain exactly what each code means in plain English, and tell you when to use each one.",[21,769,771],{"id":770},"why-different-colour-formats-exist","Why Different Colour Formats Exist",[11,773,774],{},"The reason we have different codes isn't to be difficult—it's because different devices produce colour in different ways.",[158,776,777,786,795,803],{},[55,778,779,782,783,785],{},[32,780,781],{},"Screens use light:"," Your computer monitor creates colour by mixing Red, Green, and Blue light. This gave us the ",[32,784,38],{}," model.",[55,787,788,791,792,43],{},[32,789,790],{},"Printers use pigment:"," Printers create colour by mixing Cyan, Magenta, Yellow, and Black inks. This gave us ",[32,793,794],{},"CMYK",[55,796,797,800,801,43],{},[32,798,799],{},"Web developers needed shorthand:"," Writing out full RGB numbers is tedious, so developers adopted a hexadecimal shorthand. This gave us ",[32,802,34],{},[55,804,805,808,809,811],{},[32,806,807],{},"Humans need logic:"," None of the above models make intuitive sense to a human brain (e.g., \"make this red lighter\"). So, the ",[32,810,42],{}," format was created to align with how humans perceive colour.",[21,813,815],{"id":814},"hex-colour-codes-explained","HEX Colour Codes Explained",[11,817,818,821,822],{},[32,819,820],{},"Example:"," ",[219,823,824],{},"#FF5733",[11,826,827,828,831],{},"The HEX code is the standard for the web. It always starts with a hashtag (",[219,829,830],{},"#",") followed by six characters. These characters are a mix of numbers (0-9) and letters (A-F). It might look random, but it is actually a code for RGB values.",[158,833,834,840,846],{},[55,835,836,837,43],{},"The first two characters represent ",[32,838,839],{},"Red",[55,841,842,843,43],{},"The second two represent ",[32,844,845],{},"Green",[55,847,848,849,43],{},"The final two represent ",[32,850,851],{},"Blue",[11,853,854,855,858,859,862,863,866,867,870,871,874],{},"The scale runs from ",[32,856,857],{},"00"," (no colour) to ",[32,860,861],{},"FF"," (maximum colour). So, ",[219,864,865],{},"#FF0000"," is maximum Red, zero Green, zero Blue—pure bright red. ",[219,868,869],{},"#000000"," is zero of everything (Black), and ",[219,872,873],{},"#FFFFFF"," is maximum of everything (White).",[11,876,877,880,881,884,885,888],{},[32,878,879],{},"Modern Trick:"," You can now use an 8-digit HEX code (e.g., ",[219,882,883],{},"#FF573380","). The last two characters represent opacity (alpha). ",[219,886,887],{},"80"," puts the colour at roughly 50% transparency.",[11,890,891,894],{},[32,892,893],{},"When to use HEX:"," Web design (HTML/CSS), digital design tools (Figma, Sketch, Canva), and sharing brand colours quickly. It is the most copy-paste-friendly format.",[21,896,898],{"id":897},"rgb-colour-codes-explained","RGB Colour Codes Explained",[11,900,901,821,903],{},[32,902,820],{},[219,904,905],{},"rgb(255, 87, 51)",[11,907,908,909,43],{},"RGB stands for Red, Green, Blue. It is the most direct representation of how a screen works. Each channel is defined by a number from ",[32,910,911],{},"0 to 255",[158,913,914,920],{},[55,915,916,919],{},[219,917,918],{},"rgb(0, 0, 0)"," is Black (screen off).",[55,921,922,925],{},[219,923,924],{},"rgb(255, 255, 255)"," is White (screen fully on).",[11,927,928,929,932,933,936],{},"The major advantage of RGB in web design is the ",[32,930,931],{},"Alpha"," channel, written as ",[219,934,935],{},"rgba(255, 87, 51, 0.5)",". That fourth number (0.5) sets the transparency to 0.5. This allows you to create see-through backgrounds and overlays easily.",[11,938,939,942],{},[32,940,941],{},"When to use RGB:"," When you need transparency in CSS, or when working in video editing software and presentation software like PowerPoint, which often default to RGB sliders.",[21,944,946],{"id":945},"hsl-colour-codes-explained","HSL Colour Codes Explained",[11,948,949,821,951],{},[32,950,820],{},[219,952,953],{},"hsl(9, 100%, 60%)",[11,955,956,957,960],{},"HSL stands for ",[32,958,959],{},"Hue, Saturation, Lightness",". This is the most \"human\" format because it describes colour the way we speak about it.",[158,962,963,969,975],{},[55,964,965,968],{},[32,966,967],{},"Hue (0–360):"," Imagine a colour wheel. 0° is Red, 120° is Green, 240° is Blue. You just spin the wheel to pick the colour family.",[55,970,971,974],{},[32,972,973],{},"Saturation (0–100%):"," How \"vivid\" is the colour? 0% is grey (dull), 100% is full vivid colour.",[55,976,977,980],{},[32,978,979],{},"Lightness (0–100%):"," How much light is hitting the colour? 0% is Black, 100% is White, 50% is \"normal\".",[11,982,983,986],{},[32,984,985],{},"Why designers love HSL:"," If you want to create a hover effect for a button that is slightly darker, you don't need to guess new HEX numbers. You just lowered the Lightness value by 10%. It makes creating colour variations programmatic and logical.",[11,988,989,992],{},[32,990,991],{},"When to use HSL:"," CSS styling, creating colour themes, and when you need to generate tints and shades of a base colour.",[21,994,996],{"id":995},"cmyk-briefly-explained","CMYK Briefly Explained",[11,998,999,821,1001],{},[32,1000,820],{},[219,1002,1003],{},"C=0 M=84 Y=83 K=0",[11,1005,1006,1007,1010],{},"CMYK (Cyan, Magenta, Yellow, Key/Black) is for ",[32,1008,1009],{},"print only",". Screens emit light (additive), but ink absorbs light (subtractive). If you send an RGB file to a professional printer, the colours will look muddy and dull because inks cannot reproduce the bright neon intensity of a screen. Never use CMYK for web design.",[21,1012,1014],{"id":1013},"colour-format-comparison-table","Colour Format Comparison Table",[1016,1017,1018,1040],"table",{},[1019,1020,1021],"thead",{},[1022,1023,1024,1028,1031,1034,1037],"tr",{},[1025,1026,1027],"th",{},"Format",[1025,1029,1030],{},"Syntax Example",[1025,1032,1033],{},"Where Used",[1025,1035,1036],{},"Opacity Support",[1025,1038,1039],{},"Human Readable?",[1041,1042,1043,1063,1082,1101],"tbody",{},[1022,1044,1045,1050,1054,1057,1060],{},[1046,1047,1048],"td",{},[32,1049,34],{},[1046,1051,1052],{},[219,1053,824],{},[1046,1055,1056],{},"Web, Design Tools",[1046,1058,1059],{},"Yes (8-digit)",[1046,1061,1062],{},"No",[1022,1064,1065,1069,1073,1076,1079],{},[1046,1066,1067],{},[32,1068,38],{},[1046,1070,1071],{},[219,1072,905],{},[1046,1074,1075],{},"Web, Screens, Video",[1046,1077,1078],{},"Yes (via rgba)",[1046,1080,1081],{},"Moderate",[1022,1083,1084,1088,1092,1095,1098],{},[1046,1085,1086],{},[32,1087,42],{},[1046,1089,1090],{},[219,1091,953],{},[1046,1093,1094],{},"CSS, Theming",[1046,1096,1097],{},"Yes (via hsla)",[1046,1099,1100],{},"Yes (Very)",[1022,1102,1103,1107,1112,1115,1117],{},[1046,1104,1105],{},[32,1106,794],{},[1046,1108,1109],{},[219,1110,1111],{},"0, 84, 83, 0",[1046,1113,1114],{},"Print Only",[1046,1116,1062],{},[1046,1118,1081],{},[21,1120,1122],{"id":1121},"how-to-convert-between-formats","How to Convert Between Formats",[11,1124,1125,1126,1129],{},"You generally don't need to do the math yourself. CampaignMorph offers a free ",[107,1127,1128],{"href":673},"Color Converter"," tool. You can simply paste a HEX code, and it will instantly give you the RGB and HSL equivalents (and vice versa).",[11,1131,1132],{},"This is useful when you have a brand guideline that only lists HEX codes, but your developer needs an RGB value for a transparent overlay. Simply pop the code in the tool and get the translation.",[99,1134,1136],{"id":1135},"need-to-convert-a-colour-code","Need to convert a colour code?",[11,1138,1139],{},"Switch between HEX, RGB, HSL, and more instantly.",[11,1141,1142],{},[107,1143,674],{"href":673},[21,1145,255],{"id":254},[11,1147,1148],{},[32,1149,1150],{},"Is HEX the same as RGB?",[11,1152,1153,1154,1157,1158,1161],{},"They represent the exact same colour value, just written in different languages. HEX is Base-16 counting, while RGB is Base-10 (decimal) counting. ",[219,1155,1156],{},"#FF"," in HEX is equal to ",[219,1159,1160],{},"255"," in RGB.",[11,1163,1164],{},[32,1165,1166],{},"What colour format should I use in CSS?",[11,1168,1169,1170,1172,1173,1175,1176,1178],{},"It depends on preference, but ",[32,1171,34],{}," is the most common for static colours. ",[32,1174,38],{}," (specifically \u003C strong> RGBA ) is best when you need transparency. ",[32,1177,42],{}," is best if you plan to manually adjust lightness or saturation directly in the code.",[11,1180,1181],{},[32,1182,1183],{},"Can I use HSL values directly in CSS?",[11,1185,1186,1187,1190],{},"Yes! All modern browsers support HSL. You can write ",[219,1188,1189],{},"background-color: hsl(200, 50%, 50%);"," and it will work perfectly.",[11,1192,1193],{},[32,1194,1195],{},"What is the difference between RGB and CMYK?",[11,1197,1198,1199,1202,1203,1206],{},"Physics. RGB is ",[281,1200,1201],{},"light"," (screens); combining all colours makes white. CMYK is ",[281,1204,1205],{},"ink"," (print); Combining all colours produces black (a muddy dark brown). RGB has a wider range of colours (gamut) than CMYK, which is why bright screen colours look dull when printed.",[11,1208,1209],{},[32,1210,1211],{},"How do I convert a HEX code to RGB manually?",[11,1213,1214,1215,1217],{},"It involves complex math (converting base-16 to base-10). For example, to convert #FF, you calculate (15 × 16) + 15 = 255. It is much faster and less error-prone to use a free ",[107,1216,1128],{"href":673}," tool.",[11,1219,1220],{},[32,1221,1222],{},"Understanding these formats gives you full control over your design workflow. Whether you're building a website or designing a slide deck, knowing which code to use ensures your brand looks consistent everywhere.",{"title":318,"searchDepth":319,"depth":319,"links":1224},[1225,1226,1227,1228,1229,1230,1231,1234],{"id":770,"depth":319,"text":771},{"id":814,"depth":319,"text":815},{"id":897,"depth":319,"text":898},{"id":945,"depth":319,"text":946},{"id":995,"depth":319,"text":996},{"id":1013,"depth":319,"text":1014},{"id":1121,"depth":319,"text":1122,"children":1232},[1233],{"id":1135,"depth":326,"text":1136},{"id":254,"depth":319,"text":255},"2026-04-06","Confused by HEX, RGB, HSL and CMYK colour codes? This plain-English guide explains each format, when to use them, and how to convert between them for free.","/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet.webp",{},"/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet",{"title":746,"description":1236},"blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet",[346,347],"toA07RdSFMPdPY1X0JshGX2286QU7P4-ShIi7R5NQkk",{"id":1245,"title":1246,"author":6,"body":1247,"category":334,"date":1659,"description":1660,"draft":337,"extension":338,"image":1661,"meta":1662,"navigation":341,"path":1663,"seo":1664,"stem":1665,"tags":1666,"__hash__":1668},"blog/blog/how-to-write-meta-description.md","How to Write a Meta Description That Gets Clicked (With Examples)",{"type":8,"value":1248,"toc":1644},[1249,1252,1259,1262,1266,1269,1278,1282,1289,1296,1300,1303,1308,1311,1331,1349,1353,1357,1425,1429,1497,1501,1507,1521,1533,1537,1540,1551,1554,1558,1584,1588,1591,1597,1599,1604,1607,1612,1615,1620,1623,1628,1631,1636,1639],[11,1250,1251],{},"Your content might be ranking on page one, but if nobody clicks on it, that ranking is worthless. The meta description is your 160-character elevator pitch. It is the text that appears under your blue link in Google, and it is the deciding factor for millions of users every day.",[11,1253,1254,1255,1258],{},"Think of Google Search results as a busy high street. Your Title Tag is the shop sign, but your Meta Description is the person standing outside handing out flyers, convincing people why they should step inside ",[281,1256,1257],{},"your"," shop instead of the one next door.",[11,1260,1261],{},"In this guide, we'll cover exactly how to write meta descriptions that drive traffic, backed by real examples and a proven formula.",[21,1263,1265],{"id":1264},"what-is-a-meta-description","What Is a Meta Description?",[11,1267,1268],{},"A meta description is an HTML attribute that provides a brief summary of a web page. Search engines like Google often display the meta description in search results, which can influence click-through rates.",[11,1270,1271,1272,1275],{},"Code example:",[1273,1274],"br",{},[219,1276,1277],{},"\u003Cmeta name=\"description\" content=\"A brief summary of the page content goes here.\">",[21,1279,1281],{"id":1280},"does-the-meta-description-affect-seo-rankings","Does the Meta Description Affect SEO Rankings?",[11,1283,1284,1285,1288],{},"Google stated years ago that meta descriptions are ",[32,1286,1287],{},"not a direct ranking factor",". You cannot simply stuff keywords into your description and expect to jump to position #1.",[11,1290,1291,1292,1295],{},"However, they have a massive ",[32,1293,1294],{},"indirect"," impact. Google uses Click-Through Rate (CTR) as a quality signal. If more people click your result than the result above you, Google's algorithm notices. Over time, a high CTR can help move your page up the rankings. Therefore, a persuasive meta description is a powerful SEO tool.",[21,1297,1299],{"id":1298},"the-perfect-meta-description-formula","The Perfect Meta Description Formula",[11,1301,1302],{},"Writing a great description is part art, part science. Here is the formula that consistently performs best:",[11,1304,1305],{},[32,1306,1307],{},"[Primary Keyword] + [Key Benefit/Value Proposition] + [Secondary Info] + [Call to Action]",[11,1309,1310],{},"Let's break that down:",[52,1312,1313,1319,1325],{},[55,1314,1315,1318],{},[32,1316,1317],{},"Primary Keyword:"," Include it early. Google bolds the keywords in the description if they match the user's search, which draws the eye.",[55,1320,1321,1324],{},[32,1322,1323],{},"Key Benefit:"," Why should they click? What problem do you solve?",[55,1326,1327,1330],{},[32,1328,1329],{},"Call to Action (CTA):"," Tell them what to do. \"Learn more,\" \"Shop now,\" \"Read the guide.\"",[11,1332,1333,1336,1338],{},[32,1334,1335],{},"Example applying the formula:",[1273,1337],{},[281,1339,1340,1341,1344,1345,1348],{},"\"Looking for the best ",[32,1342,1343],{},"running shoes","? (Keyword) Our lightweight sneakers reduce joint pain by 30%. (Benefit) Free shipping on all orders. (Secondary Info) ",[32,1346,1347],{},"Shop the sale now."," (CTA)\"",[21,1350,1352],{"id":1351},"_10-real-meta-description-examples-with-analysis","10 Real Meta Description Examples With Analysis",[99,1354,1356],{"id":1355},"strong-examples-do-this","Strong Examples (Do This)",[52,1358,1359,1373,1386,1399,1412],{},[55,1360,1361,821,1364,1367,1369,1372],{},[32,1362,1363],{},"Tesla:",[281,1365,1366],{},"\"Model 3 is designed for electric-powered performance, with dual motor AWD, quick acceleration, long range and fast charging.\"",[1273,1368],{},[32,1370,1371],{},"Why it works:"," Pure benefit-driven. Hits all the key selling points (AWD, speed, range) efficiently.",[55,1374,1375,821,1378,1381,1383,1385],{},[32,1376,1377],{},"Ahrefs:",[281,1379,1380],{},"\"Everything you need to rank higher & get more traffic. Ahrefs is an all-in-one SEO toolset for growing search traffic and optimizing websites. Start a trial.\"",[1273,1382],{},[32,1384,1371],{}," Clear value proposition (\"rank higher\") and a direct CTA (\"Start a trial\").",[55,1387,1388,821,1391,1394,1396,1398],{},[32,1389,1390],{},"HelloFresh:",[281,1392,1393],{},"\"HelloFresh is America’s #1 Meal Kit! Enjoy healthy, easy, and delicious meals delivered to your door. Get $80 off your first month.\"",[1273,1395],{},[32,1397,1371],{}," Social proof (\"America's #1\") plus a hard-to-resist financial offer.",[55,1400,1401,821,1404,1407,1409,1411],{},[32,1402,1403],{},"Petco:",[281,1405,1406],{},"\"Shop Petco for a variety of pet food, supplies, and services. From grooming to training, we have everything you need for your pet. Order online today!\"",[1273,1408],{},[32,1410,1371],{}," breadth of service + convenience + CTA.",[55,1413,1414,821,1417,1420,1422,1424],{},[32,1415,1416],{},"CampaignMorph:",[281,1418,1419],{},"\"Resize, compress, and convert images for free. No sign-up required. Secure client-side processing means your files never leave your device. Try it now.\"",[1273,1421],{},[32,1423,1371],{}," Addresses pain points (free, no sign-up, security) immediately.",[99,1426,1428],{"id":1427},"weak-examples-avoid-this","Weak Examples (Avoid This)",[52,1430,1431,1445,1458,1471,1484],{},[55,1432,1433,821,1436,1439,1441,1444],{},[32,1434,1435],{},"Generic Corp:",[281,1437,1438],{},"\"Welcome to our home page. We are a company that sells widgets and we have been in business since 1990. Click here to enter.\"",[1273,1440],{},[32,1442,1443],{},"Why it fails:"," \"Welcome to...\" is wasted space. No benefit. \"Click here\" is weak.",[55,1446,1447,821,1450,1453,1455,1457],{},[32,1448,1449],{},"Keyword Stuffer:",[281,1451,1452],{},"\"Buy shoes, cheap shoes, running shoes, blue shoes, red shoes, nike shoes, adidas shoes, best shoes for sale online store.\"",[1273,1454],{},[32,1456,1443],{}," Looks like spam. Users won't trust it.",[55,1459,1460,821,1463,1466,1468,1470],{},[32,1461,1462],{},"The Cut-Off:",[281,1464,1465],{},"\"This is a comprehensive guide to SEO that will teach you everything you need to know about optimization including meta tags, title tags, link building, cont...\"",[1273,1467],{},[32,1469,1443],{}," Too long. The most important info might be hidden.",[55,1472,1473,821,1476,1479,1481,1483],{},[32,1474,1475],{},"No Description:",[281,1477,1478],{},"\"Aug 12, 2024 ... lorum ipsum dolor sit amet... navigation menu... footer link...\"",[1273,1480],{},[32,1482,1443],{}," Google scraped random text from the page because no description was provided.",[55,1485,1486,821,1489,1492,1494,1496],{},[32,1487,1488],{},"The Question Mark:",[281,1490,1491],{},"\"Do you want to know about SEO?\"",[1273,1493],{},[32,1495,1443],{}," Too short. It wastes 130 characters of available ad space.",[21,1498,1500],{"id":1499},"meta-description-length-the-exact-rules","Meta Description Length: The Exact Rules",[11,1502,1503,1504,43],{},"There isn't a strict character limit where Google stops reading, but there is a visual limit where Google stops ",[281,1505,1506],{},"displaying",[158,1508,1509,1515],{},[55,1510,1511,1514],{},[32,1512,1513],{},"Desktop:"," ~160 characters (approx 920 pixels)",[55,1516,1517,1520],{},[32,1518,1519],{},"Mobile:"," ~120 characters (approx 680 pixels)",[11,1522,1523,1524,1527,1528,1532],{},"To be safe on all devices, aim for ",[32,1525,1526],{},"120–150 characters",". Always check your length using a ",[107,1529,1531],{"href":1530},"/tools/text-counter","Character Counter"," tool before publishing.",[21,1534,1536],{"id":1535},"when-google-ignores-your-meta-description","When Google Ignores Your Meta Description",[11,1538,1539],{},"Sometimes you write the perfect description, but Google shows something else. This happens about 70% of the time. Google generates its own snippet when:",[158,1541,1542,1545,1548],{},[55,1543,1544],{},"Your description doesn't answer the user's specific long-tail query.",[55,1546,1547],{},"Your description is keyword-stuffed or low quality.",[55,1549,1550],{},"There is a snippet of text in your body content that Google thinks is more relevant.",[11,1552,1553],{},"Don't be discouraged. Writing a high-quality description increases the odds of Google using it.",[21,1555,1557],{"id":1556},"common-meta-description-mistakes","Common Meta Description Mistakes",[158,1559,1560,1566,1572,1578],{},[55,1561,1562,1565],{},[32,1563,1564],{},"Duplicate Descriptions:"," Every page must be unique. Don't copy-paste the same description across 100 product pages.",[55,1567,1568,1571],{},[32,1569,1570],{},"Passive Voice:"," \"The guide can be read here\" vs \"Read the guide.\" Be active.",[55,1573,1574,1577],{},[32,1575,1576],{},"Boring \"Corporate Speak\":"," Avoid jargon. Speak like a human.",[55,1579,1580,1583],{},[32,1581,1582],{},"Missing CTA:"," Always invite the click.",[99,1585,1587],{"id":1586},"write-perfect-descriptions-every-time","Write Perfect Descriptions Every Time",[11,1589,1590],{},"Use our generator to preview exactly how your description will look in Google.",[11,1592,1593],{},[107,1594,1596],{"href":1595},"/tools/meta-tag-generator","Use Meta Tag Generator",[21,1598,255],{"id":254},[11,1600,1601],{},[32,1602,1603],{},"How long should a meta description be in 2026?",[11,1605,1606],{},"Aim for 140 to 160 characters. This length maximizes the available space on desktop results without getting cut off, while capturing enough detail to be persuasive.",[11,1608,1609],{},[32,1610,1611],{},"What should I include in my meta description?",[11,1613,1614],{},"Include your primary keyword, a clear benefit or value proposition, and a strong call-to-action (CTA). Treat it like an advertisement for your content.",[11,1616,1617],{},[32,1618,1619],{},"Does Google always use my meta description?",[11,1621,1622],{},"No. Google rewrites meta descriptions roughly 70% of the time to better match the specific search query of the user. However, writing a high-quality description increases the chance of it being used.",[11,1624,1625],{},[32,1626,1627],{},"Should every page have a unique meta description?",[11,1629,1630],{},"Yes. Duplicate meta descriptions confuse search engines and miss the opportunity to pitch the unique value of each specific page. If you have thousands of pages, prioritize your top traffic drivers.",[11,1632,1633],{},[32,1634,1635],{},"What is a good Click-Through Rate (CTR) for organic search?",[11,1637,1638],{},"CTR varies wildly by ranking position. Ranking #1 can get 30%+ CTR. Ranking #10 might get 1-2%. A \"good\" CTR is one that beats the average for your specific ranking position.",[11,1640,1641],{},[32,1642,1643],{},"The meta description is a small piece of text with a big job. It's the bridge between a searcher and your website. By following the formula - Keyword + Benefit + CTA - and keeping within the length limits, you can turn more impressions into clicks and more clicks into customers.",{"title":318,"searchDepth":319,"depth":319,"links":1645},[1646,1647,1648,1649,1653,1654,1655,1658],{"id":1264,"depth":319,"text":1265},{"id":1280,"depth":319,"text":1281},{"id":1298,"depth":319,"text":1299},{"id":1351,"depth":319,"text":1352,"children":1650},[1651,1652],{"id":1355,"depth":326,"text":1356},{"id":1427,"depth":326,"text":1428},{"id":1499,"depth":319,"text":1500},{"id":1535,"depth":319,"text":1536},{"id":1556,"depth":319,"text":1557,"children":1656},[1657],{"id":1586,"depth":326,"text":1587},{"id":254,"depth":319,"text":255},"2026-03-21","Write meta descriptions that increase click-through rates from Google. Includes the exact formula, 10 real examples, character counting tips and a free generator.","/blog/how-to-write-meta-description.webp",{},"/blog/how-to-write-meta-description",{"title":1246,"description":1660},"blog/how-to-write-meta-description",[346,1667],"Meta Description","I0C-sIIx_7JW_R3eweBM4FE5b7mWQeA3mNvU2Dg27-4",1775799037670]