[{"data":1,"prerenderedAt":1728},["ShallowReactive",2],{"/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet":3,"recommended-/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet":532},{"id":4,"title":5,"author":6,"body":7,"category":517,"date":518,"description":519,"draft":520,"extension":521,"image":522,"meta":523,"navigation":524,"path":525,"seo":526,"stem":527,"tags":528,"__hash__":531},"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",null,{"type":8,"value":9,"toc":502},"minimark",[10,26,29,32,37,40,84,88,97,104,124,147,161,167,171,178,184,198,209,215,219,226,233,253,259,265,269,276,283,287,391,395,404,407,412,415,420,424,429,440,445,457,462,469,474,486,491,497],[11,12,13,14,18,19,18,22,25],"p",{},"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: ",[15,16,17],"code",{},"#4F46E5",", ",[15,20,21],{},"rgb(79, 70, 229)",[15,23,24],{},"hsl(243, 75%, 59%)",", and maybe even a CMYK percentage.",[11,27,28],{},"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,30,31],{},"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.",[33,34,36],"h2",{"id":35},"why-different-colour-formats-exist","Why Different Colour Formats Exist",[11,38,39],{},"The reason we have different codes isn't to be difficult—it's because different devices produce colour in different ways.",[41,42,43,55,65,74],"ul",{},[44,45,46,50,51,54],"li",{},[47,48,49],"strong",{},"Screens use light:"," Your computer monitor creates colour by mixing Red, Green, and Blue light. This gave us the ",[47,52,53],{},"RGB"," model.",[44,56,57,60,61,64],{},[47,58,59],{},"Printers use pigment:"," Printers create colour by mixing Cyan, Magenta, Yellow, and Black inks. This gave us ",[47,62,63],{},"CMYK",".",[44,66,67,70,71,64],{},[47,68,69],{},"Web developers needed shorthand:"," Writing out full RGB numbers is tedious, so developers adopted a hexadecimal shorthand. This gave us ",[47,72,73],{},"HEX",[44,75,76,79,80,83],{},[47,77,78],{},"Humans need logic:"," None of the above models make intuitive sense to a human brain (e.g., \"make this red lighter\"). So, the ",[47,81,82],{},"HSL"," format was created to align with how humans perceive colour.",[33,85,87],{"id":86},"hex-colour-codes-explained","HEX Colour Codes Explained",[11,89,90,93,94],{},[47,91,92],{},"Example:"," ",[15,95,96],{},"#FF5733",[11,98,99,100,103],{},"The HEX code is the standard for the web. It always starts with a hashtag (",[15,101,102],{},"#",") 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.",[41,105,106,112,118],{},[44,107,108,109,64],{},"The first two characters represent ",[47,110,111],{},"Red",[44,113,114,115,64],{},"The second two represent ",[47,116,117],{},"Green",[44,119,120,121,64],{},"The final two represent ",[47,122,123],{},"Blue",[11,125,126,127,130,131,134,135,138,139,142,143,146],{},"The scale runs from ",[47,128,129],{},"00"," (no colour) to ",[47,132,133],{},"FF"," (maximum colour). So, ",[15,136,137],{},"#FF0000"," is maximum Red, zero Green, zero Blue—pure bright red. ",[15,140,141],{},"#000000"," is zero of everything (Black), and ",[15,144,145],{},"#FFFFFF"," is maximum of everything (White).",[11,148,149,152,153,156,157,160],{},[47,150,151],{},"Modern Trick:"," You can now use an 8-digit HEX code (e.g., ",[15,154,155],{},"#FF573380","). The last two characters represent opacity (alpha). ",[15,158,159],{},"80"," puts the colour at roughly 50% transparency.",[11,162,163,166],{},[47,164,165],{},"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.",[33,168,170],{"id":169},"rgb-colour-codes-explained","RGB Colour Codes Explained",[11,172,173,93,175],{},[47,174,92],{},[15,176,177],{},"rgb(255, 87, 51)",[11,179,180,181,64],{},"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 ",[47,182,183],{},"0 to 255",[41,185,186,192],{},[44,187,188,191],{},[15,189,190],{},"rgb(0, 0, 0)"," is Black (screen off).",[44,193,194,197],{},[15,195,196],{},"rgb(255, 255, 255)"," is White (screen fully on).",[11,199,200,201,204,205,208],{},"The major advantage of RGB in web design is the ",[47,202,203],{},"Alpha"," channel, written as ",[15,206,207],{},"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,210,211,214],{},[47,212,213],{},"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.",[33,216,218],{"id":217},"hsl-colour-codes-explained","HSL Colour Codes Explained",[11,220,221,93,223],{},[47,222,92],{},[15,224,225],{},"hsl(9, 100%, 60%)",[11,227,228,229,232],{},"HSL stands for ",[47,230,231],{},"Hue, Saturation, Lightness",". This is the most \"human\" format because it describes colour the way we speak about it.",[41,234,235,241,247],{},[44,236,237,240],{},[47,238,239],{},"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.",[44,242,243,246],{},[47,244,245],{},"Saturation (0–100%):"," How \"vivid\" is the colour? 0% is grey (dull), 100% is full vivid colour.",[44,248,249,252],{},[47,250,251],{},"Lightness (0–100%):"," How much light is hitting the colour? 0% is Black, 100% is White, 50% is \"normal\".",[11,254,255,258],{},[47,256,257],{},"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,260,261,264],{},[47,262,263],{},"When to use HSL:"," CSS styling, creating colour themes, and when you need to generate tints and shades of a base colour.",[33,266,268],{"id":267},"cmyk-briefly-explained","CMYK Briefly Explained",[11,270,271,93,273],{},[47,272,92],{},[15,274,275],{},"C=0 M=84 Y=83 K=0",[11,277,278,279,282],{},"CMYK (Cyan, Magenta, Yellow, Key/Black) is for ",[47,280,281],{},"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.",[33,284,286],{"id":285},"colour-format-comparison-table","Colour Format Comparison Table",[288,289,290,312],"table",{},[291,292,293],"thead",{},[294,295,296,300,303,306,309],"tr",{},[297,298,299],"th",{},"Format",[297,301,302],{},"Syntax Example",[297,304,305],{},"Where Used",[297,307,308],{},"Opacity Support",[297,310,311],{},"Human Readable?",[313,314,315,335,354,373],"tbody",{},[294,316,317,322,326,329,332],{},[318,319,320],"td",{},[47,321,73],{},[318,323,324],{},[15,325,96],{},[318,327,328],{},"Web, Design Tools",[318,330,331],{},"Yes (8-digit)",[318,333,334],{},"No",[294,336,337,341,345,348,351],{},[318,338,339],{},[47,340,53],{},[318,342,343],{},[15,344,177],{},[318,346,347],{},"Web, Screens, Video",[318,349,350],{},"Yes (via rgba)",[318,352,353],{},"Moderate",[294,355,356,360,364,367,370],{},[318,357,358],{},[47,359,82],{},[318,361,362],{},[15,363,225],{},[318,365,366],{},"CSS, Theming",[318,368,369],{},"Yes (via hsla)",[318,371,372],{},"Yes (Very)",[294,374,375,379,384,387,389],{},[318,376,377],{},[47,378,63],{},[318,380,381],{},[15,382,383],{},"0, 84, 83, 0",[318,385,386],{},"Print Only",[318,388,334],{},[318,390,353],{},[33,392,394],{"id":393},"how-to-convert-between-formats","How to Convert Between Formats",[11,396,397,398,403],{},"You generally don't need to do the math yourself. CampaignMorph offers a free ",[399,400,402],"a",{"href":401},"/tools/color-converter","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,405,406],{},"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.",[408,409,411],"h3",{"id":410},"need-to-convert-a-colour-code","Need to convert a colour code?",[11,413,414],{},"Switch between HEX, RGB, HSL, and more instantly.",[11,416,417],{},[399,418,419],{"href":401},"Open Color Converter",[33,421,423],{"id":422},"frequently-asked-questions","Frequently Asked Questions",[11,425,426],{},[47,427,428],{},"Is HEX the same as RGB?",[11,430,431,432,435,436,439],{},"They represent the exact same colour value, just written in different languages. HEX is Base-16 counting, while RGB is Base-10 (decimal) counting. ",[15,433,434],{},"#FF"," in HEX is equal to ",[15,437,438],{},"255"," in RGB.",[11,441,442],{},[47,443,444],{},"What colour format should I use in CSS?",[11,446,447,448,450,451,453,454,456],{},"It depends on preference, but ",[47,449,73],{}," is the most common for static colours. ",[47,452,53],{}," (specifically \u003C strong> RGBA ) is best when you need transparency. ",[47,455,82],{}," is best if you plan to manually adjust lightness or saturation directly in the code.",[11,458,459],{},[47,460,461],{},"Can I use HSL values directly in CSS?",[11,463,464,465,468],{},"Yes! All modern browsers support HSL. You can write ",[15,466,467],{},"background-color: hsl(200, 50%, 50%);"," and it will work perfectly.",[11,470,471],{},[47,472,473],{},"What is the difference between RGB and CMYK?",[11,475,476,477,481,482,485],{},"Physics. RGB is ",[478,479,480],"em",{},"light"," (screens); combining all colours makes white. CMYK is ",[478,483,484],{},"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,487,488],{},[47,489,490],{},"How do I convert a HEX code to RGB manually?",[11,492,493,494,496],{},"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 ",[399,495,402],{"href":401}," tool.",[11,498,499],{},[47,500,501],{},"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":503,"searchDepth":504,"depth":504,"links":505},"",2,[506,507,508,509,510,511,512,516],{"id":35,"depth":504,"text":36},{"id":86,"depth":504,"text":87},{"id":169,"depth":504,"text":170},{"id":217,"depth":504,"text":218},{"id":267,"depth":504,"text":268},{"id":285,"depth":504,"text":286},{"id":393,"depth":504,"text":394,"children":513},[514],{"id":410,"depth":515,"text":411},3,{"id":422,"depth":504,"text":423},"Marketing","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.",false,"md","/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet.webp",{},true,"/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet",{"title":5,"description":519},"blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet",[529,530],"Digital Marketing","Color Palette","toA07RdSFMPdPY1X0JshGX2286QU7P4-ShIi7R5NQkk",[533,931,1356],{"id":534,"title":535,"author":6,"body":536,"category":517,"date":921,"description":922,"draft":520,"extension":521,"image":923,"meta":924,"navigation":524,"path":925,"seo":926,"stem":927,"tags":928,"__hash__":930},"blog/blog/choose-brand-colours-that-actually-work-psychology.md","How to Choose Brand Colours That Actually Work (With Psychology)",{"type":8,"value":537,"toc":911},[538,541,552,555,559,566,586,590,593,737,741,744,770,781,785,792,813,824,828,831,851,855,858,862,864,869,872,877,880,885,888,893,896,901,904],[11,539,540],{},"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,542,543,544,547,548,551],{},"Studies show that colour increases brand recognition by up to ",[47,545,546],{},"80%",". More importantly, up to ",[47,549,550],{},"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,553,554],{},"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.",[33,556,558],{"id":557},"why-brand-colours-matter-more-than-you-think","Why Brand Colours Matter More Than You Think",[11,560,561,562,565],{},"Psychologists have found that people form a first impression of a product or brand within ",[47,563,564],{},"90 seconds"," of initial viewing. Up to 90% of that assessment is based on colour alone.",[41,567,568,574,580],{},[44,569,570,573],{},[47,571,572],{},"Brand Recognition:"," Think of a soft drink can that is red. You immediately think \"Coca-Cola\". That is the power of owning a colour.",[44,575,576,579],{},[47,577,578],{},"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.",[44,581,582,585],{},[47,583,584],{},"Differentiation:"," If every competitor in your niche uses blue, choosing orange instantly makes you the visible alternative.",[33,587,589],{"id":588},"colour-psychology-what-each-colour-communicates","Colour Psychology: What Each Colour Communicates",[11,591,592],{},"Every colour triggers specific psychological associations. While these can vary by culture, here are the standard meanings in Western marketing:",[41,594,595,613,632,648,664,680,696,712,721],{},[44,596,597,600,601,604,605,608,609,612],{},[47,598,599],{},"Red:"," Energy, urgency, passion, hunger. Used by ",[478,602,603],{},"Netflix"," (excitement), ",[478,606,607],{},"Coca-Cola"," (happiness), ",[478,610,611],{},"YouTube"," (action). Excellent for clearance sales and food brands.",[44,614,615,618,619,18,622,18,625,18,628,631],{},[47,616,617],{},"Blue:"," Trust, stability, logic, calm. The most popular colour in branding. Used by ",[478,620,621],{},"Facebook",[478,623,624],{},"PayPal",[478,626,627],{},"Samsung",[478,629,630],{},"Ford",". Standard for finance, tech, and healthcare.",[44,633,634,637,638,18,641,18,644,647],{},[47,635,636],{},"Green:"," Growth, health, nature, money. Used by ",[478,639,640],{},"Spotify",[478,642,643],{},"Whole Foods",[478,645,646],{},"Starbucks",". Essential for sustainability and wellness brands.",[44,649,650,653,654,18,657,18,660,663],{},[47,651,652],{},"Yellow/Gold:"," Optimism, warmth, caution, speed. Used by ",[478,655,656],{},"McDonald’s",[478,658,659],{},"IKEA",[478,661,662],{},"Snapchat",". High visibility, but can be fatiguing to eyes if overused.",[44,665,666,669,670,18,673,18,676,679],{},[47,667,668],{},"Orange:"," Friendliness, value, creativity, enthusiasm. Used by ",[478,671,672],{},"Amazon",[478,674,675],{},"Fanta",[478,677,678],{},"Harley-Davidson",". Often seen as a \"budget-friendly\" or \"fun\" alternative to aggressive red.",[44,681,682,685,686,18,689,18,692,695],{},[47,683,684],{},"Purple:"," Luxury, wisdom, creativity, royalty. Used by ",[478,687,688],{},"Cadbury",[478,690,691],{},"Hallmark",[478,693,694],{},"Twitch",". Bridges the gap between stimulating red and calm blue.",[44,697,698,701,702,18,705,18,708,711],{},[47,699,700],{},"Black:"," Elegance, power, sophistication, exclusivity. Used by ",[478,703,704],{},"Apple",[478,706,707],{},"Chanel",[478,709,710],{},"Nike",". The standard for luxury fashion and premium tech.",[44,713,714,717,718,720],{},[47,715,716],{},"White:"," Purity, simplicity, modernism, hygiene. Used by ",[478,719,704],{}," products, minimalist skincare brands. Requires careful use of whitespace.",[44,722,723,726,727,18,730,18,733,736],{},[47,724,725],{},"Pink:"," Care, femininity, playfulness, romance. Used by ",[478,728,729],{},"Barbie",[478,731,732],{},"Victoria's Secret",[478,734,735],{},"T-Mobile",". Increasingly used in tech to signal \"friendliness\" (e.g., Lyft).",[33,738,740],{"id":739},"industry-colour-conventions","Industry Colour Conventions",[11,742,743],{},"Before you pick a colour, look at your industry. There are usually unwritten rules:",[41,745,746,752,758,764],{},[44,747,748,751],{},[47,749,750],{},"Finance & Tech:"," Dominated by Blue (trust) and Grey (logic).",[44,753,754,757],{},[47,755,756],{},"Healthcare:"," Dominated by Blue (cleanliness) and Green (health).",[44,759,760,763],{},[47,761,762],{},"Fast Food:"," Dominated by Red and Yellow (appetite stimulation).",[44,765,766,769],{},[47,767,768],{},"Sustainability:"," Almost exclusively Green and Earth Tones.",[11,771,772,773,776,777,780],{},"You have two choices: ",[47,774,775],{},"Follow the convention"," to fit in and gain instant trust (e.g., a blue bank feels safe), or ",[47,778,779],{},"break the convention"," to stand out (e.g., a purple bank like Nubank signals disruption). Both are valid strategies, but be intentional about it.",[33,782,784],{"id":783},"how-to-build-a-3-colour-brand-palette","How to Build a 3-Colour Brand Palette",[11,786,787,788,791],{},"A brand needs more than just one colour. The most effective palettes follow the ",[47,789,790],{},"60-30-10 Rule"," used by interior designers:",[793,794,795,801,807],"ol",{},[44,796,797,800],{},[47,798,799],{},"Primary Colour (60%):"," 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.",[44,802,803,806],{},[47,804,805],{},"Secondary Colour (30%):"," This is your \"Brand\" colour. It is used for headers, logos, graphics, and backgrounds. It provides the personality.",[44,808,809,812],{},[47,810,811],{},"Accent Colour (10%):"," 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,814,815,818,819,823],{},[47,816,817],{},"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 ",[399,820,822],{"href":821},"/tools/color-palette-extractor","Color Palette Extractor"," to instantly pull a harmonious colour scheme from reality.",[33,825,827],{"id":826},"testing-your-brand-colours","Testing Your Brand Colours",[11,829,830],{},"Before you commit to a palette, you must stress-test it:",[41,832,833,839,845],{},[44,834,835,838],{},[47,836,837],{},"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.",[44,840,841,844],{},[47,842,843],{},"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.",[44,846,847,850],{},[47,848,849],{},"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.",[408,852,854],{"id":853},"found-your-perfect-colours","Found your perfect colours?",[11,856,857],{},"Save them in every format (HEX, RGB, HSL) instantly.",[11,859,860],{},[399,861,419],{"href":401},[33,863,423],{"id":422},[11,865,866],{},[47,867,868],{},"How many brand colours should I have?",[11,870,871],{},"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,873,874],{},[47,875,876],{},"Can I change my brand colours after launch?",[11,878,879],{},"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,881,882],{},[47,883,884],{},"What colours should I avoid?",[11,886,887],{},"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,889,890],{},[47,891,892],{},"How do I make brand colours accessible?",[11,894,895],{},"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,897,898],{},[47,899,900],{},"What colour makes people trust a brand?",[11,902,903],{},"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,905,906],{},[47,907,908],{},[478,909,910],{},"Colour is a tool, not just a decoration. Choose wisely, use consistently, and your brand will build recognition with every interaction.",{"title":503,"searchDepth":504,"depth":504,"links":912},[913,914,915,916,917,920],{"id":557,"depth":504,"text":558},{"id":588,"depth":504,"text":589},{"id":739,"depth":504,"text":740},{"id":783,"depth":504,"text":784},{"id":826,"depth":504,"text":827,"children":918},[919],{"id":853,"depth":515,"text":854},{"id":422,"depth":504,"text":423},"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":535,"description":922},"blog/choose-brand-colours-that-actually-work-psychology",[529,929],"Brand Colors","Deo0k1PUEU054GNx-fLMxDFHiJAaLJWkCj-TXv9V5IA",{"id":932,"title":933,"author":6,"body":934,"category":517,"date":1346,"description":1347,"draft":520,"extension":521,"image":1348,"meta":1349,"navigation":524,"path":1350,"seo":1351,"stem":1352,"tags":1353,"__hash__":1355},"blog/blog/how-to-write-meta-description.md","How to Write a Meta Description That Gets Clicked (With Examples)",{"type":8,"value":935,"toc":1331},[936,939,946,949,953,956,965,969,976,983,987,990,995,998,1018,1036,1040,1044,1112,1116,1184,1188,1194,1208,1220,1224,1227,1238,1241,1245,1271,1275,1278,1284,1286,1291,1294,1299,1302,1307,1310,1315,1318,1323,1326],[11,937,938],{},"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,940,941,942,945],{},"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 ",[478,943,944],{},"your"," shop instead of the one next door.",[11,947,948],{},"In this guide, we'll cover exactly how to write meta descriptions that drive traffic, backed by real examples and a proven formula.",[33,950,952],{"id":951},"what-is-a-meta-description","What Is a Meta Description?",[11,954,955],{},"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,957,958,959,962],{},"Code example:",[960,961],"br",{},[15,963,964],{},"\u003Cmeta name=\"description\" content=\"A brief summary of the page content goes here.\">",[33,966,968],{"id":967},"does-the-meta-description-affect-seo-rankings","Does the Meta Description Affect SEO Rankings?",[11,970,971,972,975],{},"Google stated years ago that meta descriptions are ",[47,973,974],{},"not a direct ranking factor",". You cannot simply stuff keywords into your description and expect to jump to position #1.",[11,977,978,979,982],{},"However, they have a massive ",[47,980,981],{},"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.",[33,984,986],{"id":985},"the-perfect-meta-description-formula","The Perfect Meta Description Formula",[11,988,989],{},"Writing a great description is part art, part science. Here is the formula that consistently performs best:",[11,991,992],{},[47,993,994],{},"[Primary Keyword] + [Key Benefit/Value Proposition] + [Secondary Info] + [Call to Action]",[11,996,997],{},"Let's break that down:",[793,999,1000,1006,1012],{},[44,1001,1002,1005],{},[47,1003,1004],{},"Primary Keyword:"," Include it early. Google bolds the keywords in the description if they match the user's search, which draws the eye.",[44,1007,1008,1011],{},[47,1009,1010],{},"Key Benefit:"," Why should they click? What problem do you solve?",[44,1013,1014,1017],{},[47,1015,1016],{},"Call to Action (CTA):"," Tell them what to do. \"Learn more,\" \"Shop now,\" \"Read the guide.\"",[11,1019,1020,1023,1025],{},[47,1021,1022],{},"Example applying the formula:",[960,1024],{},[478,1026,1027,1028,1031,1032,1035],{},"\"Looking for the best ",[47,1029,1030],{},"running shoes","? (Keyword) Our lightweight sneakers reduce joint pain by 30%. (Benefit) Free shipping on all orders. (Secondary Info) ",[47,1033,1034],{},"Shop the sale now."," (CTA)\"",[33,1037,1039],{"id":1038},"_10-real-meta-description-examples-with-analysis","10 Real Meta Description Examples With Analysis",[408,1041,1043],{"id":1042},"strong-examples-do-this","Strong Examples (Do This)",[793,1045,1046,1060,1073,1086,1099],{},[44,1047,1048,93,1051,1054,1056,1059],{},[47,1049,1050],{},"Tesla:",[478,1052,1053],{},"\"Model 3 is designed for electric-powered performance, with dual motor AWD, quick acceleration, long range and fast charging.\"",[960,1055],{},[47,1057,1058],{},"Why it works:"," Pure benefit-driven. Hits all the key selling points (AWD, speed, range) efficiently.",[44,1061,1062,93,1065,1068,1070,1072],{},[47,1063,1064],{},"Ahrefs:",[478,1066,1067],{},"\"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.\"",[960,1069],{},[47,1071,1058],{}," Clear value proposition (\"rank higher\") and a direct CTA (\"Start a trial\").",[44,1074,1075,93,1078,1081,1083,1085],{},[47,1076,1077],{},"HelloFresh:",[478,1079,1080],{},"\"HelloFresh is America’s #1 Meal Kit! Enjoy healthy, easy, and delicious meals delivered to your door. Get $80 off your first month.\"",[960,1082],{},[47,1084,1058],{}," Social proof (\"America's #1\") plus a hard-to-resist financial offer.",[44,1087,1088,93,1091,1094,1096,1098],{},[47,1089,1090],{},"Petco:",[478,1092,1093],{},"\"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!\"",[960,1095],{},[47,1097,1058],{}," breadth of service + convenience + CTA.",[44,1100,1101,93,1104,1107,1109,1111],{},[47,1102,1103],{},"CampaignMorph:",[478,1105,1106],{},"\"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.\"",[960,1108],{},[47,1110,1058],{}," Addresses pain points (free, no sign-up, security) immediately.",[408,1113,1115],{"id":1114},"weak-examples-avoid-this","Weak Examples (Avoid This)",[793,1117,1118,1132,1145,1158,1171],{},[44,1119,1120,93,1123,1126,1128,1131],{},[47,1121,1122],{},"Generic Corp:",[478,1124,1125],{},"\"Welcome to our home page. We are a company that sells widgets and we have been in business since 1990. Click here to enter.\"",[960,1127],{},[47,1129,1130],{},"Why it fails:"," \"Welcome to...\" is wasted space. No benefit. \"Click here\" is weak.",[44,1133,1134,93,1137,1140,1142,1144],{},[47,1135,1136],{},"Keyword Stuffer:",[478,1138,1139],{},"\"Buy shoes, cheap shoes, running shoes, blue shoes, red shoes, nike shoes, adidas shoes, best shoes for sale online store.\"",[960,1141],{},[47,1143,1130],{}," Looks like spam. Users won't trust it.",[44,1146,1147,93,1150,1153,1155,1157],{},[47,1148,1149],{},"The Cut-Off:",[478,1151,1152],{},"\"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...\"",[960,1154],{},[47,1156,1130],{}," Too long. The most important info might be hidden.",[44,1159,1160,93,1163,1166,1168,1170],{},[47,1161,1162],{},"No Description:",[478,1164,1165],{},"\"Aug 12, 2024 ... lorum ipsum dolor sit amet... navigation menu... footer link...\"",[960,1167],{},[47,1169,1130],{}," Google scraped random text from the page because no description was provided.",[44,1172,1173,93,1176,1179,1181,1183],{},[47,1174,1175],{},"The Question Mark:",[478,1177,1178],{},"\"Do you want to know about SEO?\"",[960,1180],{},[47,1182,1130],{}," Too short. It wastes 130 characters of available ad space.",[33,1185,1187],{"id":1186},"meta-description-length-the-exact-rules","Meta Description Length: The Exact Rules",[11,1189,1190,1191,64],{},"There isn't a strict character limit where Google stops reading, but there is a visual limit where Google stops ",[478,1192,1193],{},"displaying",[41,1195,1196,1202],{},[44,1197,1198,1201],{},[47,1199,1200],{},"Desktop:"," ~160 characters (approx 920 pixels)",[44,1203,1204,1207],{},[47,1205,1206],{},"Mobile:"," ~120 characters (approx 680 pixels)",[11,1209,1210,1211,1214,1215,1219],{},"To be safe on all devices, aim for ",[47,1212,1213],{},"120–150 characters",". Always check your length using a ",[399,1216,1218],{"href":1217},"/tools/text-counter","Character Counter"," tool before publishing.",[33,1221,1223],{"id":1222},"when-google-ignores-your-meta-description","When Google Ignores Your Meta Description",[11,1225,1226],{},"Sometimes you write the perfect description, but Google shows something else. This happens about 70% of the time. Google generates its own snippet when:",[41,1228,1229,1232,1235],{},[44,1230,1231],{},"Your description doesn't answer the user's specific long-tail query.",[44,1233,1234],{},"Your description is keyword-stuffed or low quality.",[44,1236,1237],{},"There is a snippet of text in your body content that Google thinks is more relevant.",[11,1239,1240],{},"Don't be discouraged. Writing a high-quality description increases the odds of Google using it.",[33,1242,1244],{"id":1243},"common-meta-description-mistakes","Common Meta Description Mistakes",[41,1246,1247,1253,1259,1265],{},[44,1248,1249,1252],{},[47,1250,1251],{},"Duplicate Descriptions:"," Every page must be unique. Don't copy-paste the same description across 100 product pages.",[44,1254,1255,1258],{},[47,1256,1257],{},"Passive Voice:"," \"The guide can be read here\" vs \"Read the guide.\" Be active.",[44,1260,1261,1264],{},[47,1262,1263],{},"Boring \"Corporate Speak\":"," Avoid jargon. Speak like a human.",[44,1266,1267,1270],{},[47,1268,1269],{},"Missing CTA:"," Always invite the click.",[408,1272,1274],{"id":1273},"write-perfect-descriptions-every-time","Write Perfect Descriptions Every Time",[11,1276,1277],{},"Use our generator to preview exactly how your description will look in Google.",[11,1279,1280],{},[399,1281,1283],{"href":1282},"/tools/meta-tag-generator","Use Meta Tag Generator",[33,1285,423],{"id":422},[11,1287,1288],{},[47,1289,1290],{},"How long should a meta description be in 2026?",[11,1292,1293],{},"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,1295,1296],{},[47,1297,1298],{},"What should I include in my meta description?",[11,1300,1301],{},"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,1303,1304],{},[47,1305,1306],{},"Does Google always use my meta description?",[11,1308,1309],{},"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,1311,1312],{},[47,1313,1314],{},"Should every page have a unique meta description?",[11,1316,1317],{},"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,1319,1320],{},[47,1321,1322],{},"What is a good Click-Through Rate (CTR) for organic search?",[11,1324,1325],{},"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,1327,1328],{},[47,1329,1330],{},"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":503,"searchDepth":504,"depth":504,"links":1332},[1333,1334,1335,1336,1340,1341,1342,1345],{"id":951,"depth":504,"text":952},{"id":967,"depth":504,"text":968},{"id":985,"depth":504,"text":986},{"id":1038,"depth":504,"text":1039,"children":1337},[1338,1339],{"id":1042,"depth":515,"text":1043},{"id":1114,"depth":515,"text":1115},{"id":1186,"depth":504,"text":1187},{"id":1222,"depth":504,"text":1223},{"id":1243,"depth":504,"text":1244,"children":1343},[1344],{"id":1273,"depth":515,"text":1274},{"id":422,"depth":504,"text":423},"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":933,"description":1347},"blog/how-to-write-meta-description",[529,1354],"Meta Description","I0C-sIIx_7JW_R3eweBM4FE5b7mWQeA3mNvU2Dg27-4",{"id":1357,"title":1358,"author":6,"body":1359,"category":517,"date":1718,"description":1719,"draft":520,"extension":521,"image":1720,"meta":1721,"navigation":524,"path":1722,"seo":1723,"stem":1724,"tags":1725,"__hash__":1727},"blog/blog/html-vs-markdown-when-to-use.md","HTML to Markdown: When & Why to Use Each Format?",{"type":8,"value":1360,"toc":1706},[1361,1364,1367,1371,1377,1387,1390,1394,1400,1410,1413,1417,1523,1527,1530,1550,1554,1557,1583,1587,1598,1601,1605,1608,1614,1618,1621,1655,1657,1662,1665,1670,1677,1682,1685,1690,1693,1698,1701],[11,1362,1363],{},"You've written the perfect blog post in Google Docs. You copy it into your CMS, and suddenly the formatting is broken. Or you're trying to write documentation on GitHub, but your HTML tags aren't rendering. The problem is usually a format mismatch: HTML vs. Markdown.",[11,1365,1366],{},"These are the two dominant languages for formatting text on the web. Understanding the difference—and knowing how to convert between them—can save you hours of frustration.",[33,1368,1370],{"id":1369},"what-is-html","What Is HTML?",[11,1372,1373,1376],{},[47,1374,1375],{},"HTML (HyperText Markup Language)"," is the standard language of the web. Every web page you visit is built with HTML. It uses \"tags\" to tell the browser how to display content.",[11,1378,1379,1380,1383,1384,64],{},"Example: ",[15,1381,1382],{},"\u003Cstrong>Bold Text\u003C/strong>"," or ",[15,1385,1386],{},"\u003Ca href=\"url\">Link\u003C/a>",[11,1388,1389],{},"HTML is powerful and can create complex layouts, but writing raw HTML is tedious and hard to read for humans.",[33,1391,1393],{"id":1392},"what-is-markdown","What Is Markdown?",[11,1395,1396,1399],{},[47,1397,1398],{},"Markdown"," is a lightweight markup language invented by John Gruber in 2004. Its goal? To be as easy-to-read and easy-to-write as possible.",[11,1401,1402,1403,1406,1407,64],{},"Instead of bulky tags, Markdown uses simple symbols. To bold text, you just wrap it in asterisks: ",[15,1404,1405],{},"**Bold Text**",". To create a heading, you use a hash: ",[15,1408,1409],{},"# Heading",[11,1411,1412],{},"Markdown is now the standard for platforms like GitHub, Reddit, Notion, Obsidian, Slack, and Discord.",[33,1414,1416],{"id":1415},"html-vs-markdown-comparison-table","HTML vs Markdown Comparison Table",[288,1418,1419,1432],{},[291,1420,1421],{},[294,1422,1423,1426,1429],{},[297,1424,1425],{},"Element",[297,1427,1428],{},"HTML Syntax",[297,1430,1431],{},"Markdown Syntax",[313,1433,1434,1449,1464,1479,1493,1508],{},[294,1435,1436,1439,1444],{},[318,1437,1438],{},"Heading 1",[318,1440,1441],{},[15,1442,1443],{},"\u003Ch1>Title\u003C/h1>",[318,1445,1446],{},[15,1447,1448],{},"# Title",[294,1450,1451,1454,1459],{},[318,1452,1453],{},"Bold",[318,1455,1456],{},[15,1457,1458],{},"\u003Cstrong>Text\u003C/strong>",[318,1460,1461],{},[15,1462,1463],{},"**Text**",[294,1465,1466,1469,1474],{},[318,1467,1468],{},"Italic",[318,1470,1471],{},[15,1472,1473],{},"\u003Cem>Text\u003C/em>",[318,1475,1476],{},[15,1477,1478],{},"*Text*",[294,1480,1481,1484,1488],{},[318,1482,1483],{},"Link",[318,1485,1486],{},[15,1487,1386],{},[318,1489,1490],{},[15,1491,1492],{},"[Link](url)",[294,1494,1495,1498,1503],{},[318,1496,1497],{},"List Item",[318,1499,1500],{},[15,1501,1502],{},"\u003Cli>Item\u003C/li>",[318,1504,1505],{},[15,1506,1507],{},"- Item",[294,1509,1510,1513,1518],{},[318,1511,1512],{},"Image",[318,1514,1515],{},[15,1516,1517],{},"\u003Cimg src=\"url\" alt=\"alt\">",[318,1519,1520],{},[15,1521,1522],{},"![alt](url)",[33,1524,1526],{"id":1525},"when-to-use-html","When to Use HTML",[11,1528,1529],{},"Stick to HTML when you need precision and complexity:",[41,1531,1532,1538,1544],{},[44,1533,1534,1537],{},[47,1535,1536],{},"Web Development:"," Building actual website templates.",[44,1539,1540,1543],{},[47,1541,1542],{},"Email Marketing:"," HTML email templates require specific table-based coding.",[44,1545,1546,1549],{},[47,1547,1548],{},"Complex Layouts:"," If you need specific colors, fonts, or alignment (like centering text), Markdown can't do that natively. You need HTML/CSS.",[33,1551,1553],{"id":1552},"when-to-use-markdown","When to Use Markdown",[11,1555,1556],{},"Use Markdown for writing and content creation:",[41,1558,1559,1565,1571,1577],{},[44,1560,1561,1564],{},[47,1562,1563],{},"Blog Writing:"," CMS platforms like Ghost and Jekyll use Markdown because it's faster to write.",[44,1566,1567,1570],{},[47,1568,1569],{},"Documentation:"," README files on GitHub are always Markdown.",[44,1572,1573,1576],{},[47,1574,1575],{},"Note Taking:"," Tools like Notion and Obsidian use Markdown shortcuts.",[44,1578,1579,1582],{},[47,1580,1581],{},"Chat Apps:"," Slack, Discord, and WhatsApp use Markdown syntax for bold/italic.",[33,1584,1586],{"id":1585},"how-to-convert-html-to-markdown-and-back-for-free","How to Convert HTML to Markdown (and Back) for Free",[11,1588,1589,1590,1593,1594,1597],{},"Moving content between these formats manually is a nightmare. Replacing every ",[15,1591,1592],{},"\u003Ch2>"," with ",[15,1595,1596],{},"##"," takes forever.",[11,1599,1600],{},"Instead, use the CampaignMorph HTML-Markdown Converter. You can paste your messy HTML code on one side and get clean, readable Markdown on the other—or vice versa.",[408,1602,1604],{"id":1603},"convert-text-formats-instantly","Convert Text Formats Instantly",[11,1606,1607],{},"Switch between HTML and Markdown with zero errors. Free online tool.",[11,1609,1610],{},[399,1611,1613],{"href":1612},"/tools/html-markdown-converter","Launch Converter",[33,1615,1617],{"id":1616},"common-conversion-issues","Common Conversion Issues",[11,1619,1620],{},"Be aware of these limitations when converting:",[41,1622,1623,1629,1642],{},[44,1624,1625,1628],{},[47,1626,1627],{},"Tables:"," Markdown tables exist but are clunky. Complex HTML tables with merged cells often break when converted to Markdown.",[44,1630,1631,1634,1635,1383,1638,1641],{},[47,1632,1633],{},"Nested Divs:"," Markdown doesn't support ",[15,1636,1637],{},"\u003Cdiv>",[15,1639,1640],{},"\u003Cspan>"," tags. If your HTML relies heavily on these for layout, the converter might strip them out or leave them as raw HTML.",[44,1643,1644,1647,1648,1383,1651,1654],{},[47,1645,1646],{},"Attributes:"," Markdown links support the URL and title, but they don't support ",[15,1649,1650],{},"target=\"_blank\"",[15,1652,1653],{},"rel=\"nofollow\""," natively.",[33,1656,423],{"id":422},[11,1658,1659],{},[47,1660,1661],{},"Can I use Markdown in WordPress?",[11,1663,1664],{},"Yes. The modern Gutenberg editor in WordPress supports Markdown shortcuts (e.g., typing ## creates a heading). There are also plugins to enable full Markdown support.",[11,1666,1667],{},[47,1668,1669],{},"Is Markdown better than HTML for SEO?",[11,1671,1672,1673,1676],{},"Neither is \"better\" because search engines render both as HTML in the end. A browser converts Markdown to HTML before displaying it. Markdown is better for the ",[478,1674,1675],{},"writer's"," productivity.",[11,1678,1679],{},[47,1680,1681],{},"What is the easiest way to convert HTML to Markdown?",[11,1683,1684],{},"Use an automated converter tool. Paste your HTML source code, click convert, and copy the Markdown. Doing it manually is prone to syntax errors.",[11,1686,1687],{},[47,1688,1689],{},"Why does my Markdown not render correctly?",[11,1691,1692],{},"Markdown has different \"flavors\" (GitHub Flavored Markdown, CommonMark, etc.). Some support features like tables or strikethrough, while standard Markdown does not. Ensure your viewer supports the flavor you are writing.",[11,1694,1695],{},[47,1696,1697],{},"What is a Markdown editor?",[11,1699,1700],{},"A Markdown editor is a writing tool that renders Markdown syntax in real-time. Popular examples include Typora, iA Writer, Obsidian, and the editors built into platforms like GitHub and Notion. They let you see a formatted preview while you type in Markdown.",[11,1702,1703],{},[47,1704,1705],{},"HTML and Markdown are both valuable tools in a content creator's toolkit. The key is knowing which situation calls for which format. For fast, readable content writing, Markdown wins. For precise web layouts and emails, HTML wins. And when you need to move between the two, the CampaignMorph converter makes the transition effortless.",{"title":503,"searchDepth":504,"depth":504,"links":1707},[1708,1709,1710,1711,1712,1713,1716,1717],{"id":1369,"depth":504,"text":1370},{"id":1392,"depth":504,"text":1393},{"id":1415,"depth":504,"text":1416},{"id":1525,"depth":504,"text":1526},{"id":1552,"depth":504,"text":1553},{"id":1585,"depth":504,"text":1586,"children":1714},[1715],{"id":1603,"depth":515,"text":1604},{"id":1616,"depth":504,"text":1617},{"id":422,"depth":504,"text":423},"2026-03-25","Understand the difference between HTML and Markdown, when to use each, and how to convert between them for free. Ideal for content writers, developers and marketers.","/blog/html-vs-markdown-when-to-use.webp",{},"/blog/html-vs-markdown-when-to-use",{"title":1358,"description":1719},"blog/html-vs-markdown-when-to-use",[529,1726],"SEO","z9PyHZeo7itPusNq9dqD45g5_if4CASvDpXRB29n5iY",1775750160186]