[{"data":1,"prerenderedAt":1545},["ShallowReactive",2],{"/blog/match-your-brand-colours-across-every-platform-practical-guide":3,"recommended-/blog/match-your-brand-colours-across-every-platform-practical-guide":487},{"id":4,"title":5,"author":6,"body":7,"category":473,"date":474,"description":475,"draft":476,"extension":477,"image":478,"meta":479,"navigation":480,"path":481,"seo":482,"stem":483,"tags":484,"__hash__":486},"blog/blog/match-your-brand-colours-across-every-platform-practical-guide.md","How to Match Your Brand Colours Across Every Platform (A Practical Guide)",null,{"type":8,"value":9,"toc":458},"minimark",[10,14,17,20,25,28,57,61,64,173,177,184,187,225,228,232,235,240,247,279,286,290,293,298,302,340,344,347,367,371,376,379,384,393,398,405,410,421,426,433,441],[11,12,13],"p",{},"You pick the perfect brand blue. It looks stunning on your website. You then open Canva to design an Instagram post, and the blue looks slightly different. You send a brochure to print, and the blue looks completely wrong, flat and dull. You create a PowerPoint deck, different again.",[11,15,16],{},"This is the brand colour consistency problem, and it affects almost every marketer who works across multiple platforms and media. It erodes trust, looks unprofessional, and, over time, it blurs your brand recognition.",[11,18,19],{},"The good news: this problem has a clear technical solution, and it doesn't require a design degree to implement.",[21,22,24],"h2",{"id":23},"why-brand-colours-look-different-everywhere","Why Brand Colours Look Different Everywhere",[11,26,27],{},"The root of the problem is that different platforms and devices create colour in fundamentally different ways:",[29,30,31,39,45,51],"ul",{},[32,33,34,38],"li",{},[35,36,37],"strong",{},"Screens emit light (RGB)."," Your monitor creates colour by mixing Red, Green, and Blue light. Every screen calibrates this slightly differently, which is why the same HEX code can look different on a MacBook versus a cheap Windows laptop.",[32,40,41,44],{},[35,42,43],{},"Printers absorb light (CMYK)."," Inks work by absorbing light rather than emitting it. The CMYK colour \"gamut\" (range of possible colours) is smaller than RGB, meaning vivid, saturated screen colours simply cannot be reproduced exactly in print.",[32,46,47,50],{},[35,48,49],{},"Software handles colour profiles differently."," Some applications use sRGB (standard), others use Adobe RGB (wider gamut), and some don't embed a colour profile at all. When a file moves between applications, these differences cause colour shifts.",[32,52,53,56],{},[35,54,55],{},"Export settings matter."," Exporting a design with the wrong colour profile can shift every colour in the file.",[21,58,60],{"id":59},"the-colour-formats-you-need-for-every-platform","The Colour Formats You Need for Every Platform",[11,62,63],{},"Different platforms and tools use different colour formats. Here is your master reference table:",[65,66,67,83],"table",{},[68,69,70],"thead",{},[71,72,73,77,80],"tr",{},[74,75,76],"th",{},"Platform / Medium",[74,78,79],{},"Required Format",[74,81,82],{},"Notes",[84,85,86,98,109,120,130,141,152,162],"tbody",{},[71,87,88,92,95],{},[89,90,91],"td",{},"Website / CSS",[89,93,94],{},"HEX or RGB",[89,96,97],{},"HEX is standard; use rgba() for transparency",[71,99,100,103,106],{},[89,101,102],{},"Social Media Graphics (Canva/Figma)",[89,104,105],{},"HEX",[89,107,108],{},"Copy from your brand guidelines",[71,110,111,114,117],{},[89,112,113],{},"Email Templates",[89,115,116],{},"HEX + inline RGB",[89,118,119],{},"Not all email clients support modern CSS",[71,121,122,125,127],{},[89,123,124],{},"Digital Advertising",[89,126,94],{},[89,128,129],{},"Google Ads, Meta Ads — all use RGB/HEX",[71,131,132,135,138],{},[89,133,134],{},"Print (Brochures, Flyers)",[89,136,137],{},"CMYK",[89,139,140],{},"Request Pantone if an exact match is critical",[71,142,143,146,149],{},[89,144,145],{},"Microsoft Office (PowerPoint/Word)",[89,147,148],{},"RGB",[89,150,151],{},"Custom colour menu accepts RGB values",[71,153,154,157,159],{},[89,155,156],{},"Google Slides / Docs",[89,158,105],{},[89,160,161],{},"Use the # field in the custom colour picker",[71,163,164,167,170],{},[89,165,166],{},"Signage / Outdoor Advertising",[89,168,169],{},"Pantone or RAL",[89,171,172],{},"Ask your print supplier for their reference system",[21,174,176],{"id":175},"your-brand-colour-master-record","Your Brand Colour Master Record",[11,178,179,180,183],{},"The single most effective action you can take for colour consistency is to create and maintain a ",[35,181,182],{},"Brand Colour Master Record",". This is a simple document-it can be a page in a Notion workspace, a Google Doc, or a PDF-that lists every official brand colour in every format.",[11,185,186],{},"For each colour, record:",[29,188,189,195,201,207,213,219],{},[32,190,191,194],{},[35,192,193],{},"Colour Name",": e.g., \"Brand Blue\", \"Accent Orange\"",[32,196,197,200],{},[35,198,199],{},"HEX Code",": e.g., #4F46E5",[32,202,203,206],{},[35,204,205],{},"RGB Values",": e.g., rgb(79, 70, 229)",[32,208,209,212],{},[35,210,211],{},"HSL Values",": e.g., hsl(243, 75%, 59%)",[32,214,215,218],{},[35,216,217],{},"CMYK Approximation",": e.g., C:66 M:69 Y:0 K:10",[32,220,221,224],{},[35,222,223],{},"Pantone Reference",": (if applicable and budget allows)",[11,226,227],{},"Share this record with every designer, agency, or freelancer you work with. Make it the single source of truth. When everyone works from the same HEX codes, consistency follows naturally.",[21,229,231],{"id":230},"how-to-convert-formats-using-campaignmorph","How to Convert Formats Using CampaignMorph",[11,233,234],{},"If you only have a HEX code from an old brand guideline and need the RGB equivalent for a developer or the HSL value for a CSS theme, the Colour Converter handles it instantly.",[236,237,239],"h3",{"id":238},"heres-a-practical-example","Here's a practical example:",[11,241,242,243,246],{},"Your brand primary is ",[35,244,245],{},"#4F46E5",". You need it in every format for your brand record.",[248,249,250,259,265,276],"ol",{},[32,251,252,253,258],{},"Open the ",[254,255,257],"a",{"href":256},"/tools/color-converter","Colour Converter",".",[32,260,261,262,264],{},"Type ",[35,263,245],{}," in the HEX field.",[32,266,267,268,271,272,275],{},"The tool instantly returns: ",[35,269,270],{},"RGB:"," rgb(79, 70, 229) · ",[35,273,274],{},"HSL:"," hsl(243°, 75%, 59%)",[32,277,278],{},"Copy and paste each value into your Brand Colour Master Record.",[11,280,281,282,258],{},"Done in under 30 seconds. For a deeper understanding of what these formats mean, see our ",[254,283,285],{"href":284},"/blog/hex-vs-rgb-vs-hsl-web-designer-colour-format-cheat-sheet","HEX vs RGB vs HSL Guide",[236,287,289],{"id":288},"get-every-colour-format-in-one-click","Get every colour format in one click",[11,291,292],{},"Enter a HEX, RGB or HSL code and instantly convert it to all other formats.",[11,294,295],{},[254,296,297],{"href":256},"Open Colour Converter",[21,299,301],{"id":300},"practical-tips-for-cross-platform-colour-consistency","Practical Tips for Cross-Platform Colour Consistency",[248,303,304,310,316,322,328,334],{},[32,305,306,309],{},[35,307,308],{},"Set your monitor to sRGB:"," Go to your display settings and ensure your colour profile is set to sRGB. This is the standard for web and the most common export target. Designing on a wide-gamut display without sRGB calibration will make colours appear differently to most of your audience.",[32,311,312,315],{},[35,313,314],{},"Always work from your HEX master record:"," Never try to \"eyeball\" a colour match. Always type in the exact HEX code from your brand record.",[32,317,318,321],{},[35,319,320],{},"Export digital files in sRGB:"," When saving images from Photoshop, Figma, or Illustrator, always embed the sRGB colour profile. This ensures the colours render consistently on most screens.",[32,323,324,327],{},[35,325,326],{},"Request printer proofs:"," Before bulk printing, always request a physical proof. CMYK can never perfectly replicate RGB — getting a proof lets you adjust before committing thousands of pieces to print.",[32,329,330,333],{},[35,331,332],{},"Build brand colour swatches in every tool you use:"," In Canva, save your brand colours under \"Brand Kit.\" In Figma, create local colour styles. In PowerPoint, add them as custom theme colours. Doing this once eliminates the need to retype codes every session.",[32,335,336,339],{},[35,337,338],{},"Use the same source file for all social media exports."," If you create a Canva template, use it across all channels. Don't redesign from scratch each time, as each redesign introduces colour-matching risk.",[21,341,343],{"id":342},"when-colours-still-dont-match-exactly","When Colours Still Don't Match Exactly",[11,345,346],{},"Even with best practices, there will always be some variation, particularly between screen and print. Understanding when to accept this and when to pursue closer matching is important.",[29,348,349,355,361],{},[32,350,351,354],{},[35,352,353],{},"Digital-to-digital:"," Should match very closely (within visually imperceptible delta-E 1–2 range) if you are using the same HEX values.",[32,356,357,360],{},[35,358,359],{},"Digital-to-print:"," Some shift is unavoidable due to the RGB-to-CMYK gamut reduction. A minor desaturation or a slight shift in warmth is normal. If exact fidelity is critical (e.g., a luxury brand's signature colour), invest in Pantone Matching System (PMS) colours.",[32,362,363,366],{},[35,364,365],{},"Screen-to-screen:"," Varies by monitor calibration. Professional designers use calibrated monitors. For most marketing work, sRGB is sufficient.",[21,368,370],{"id":369},"frequently-asked-questions","Frequently Asked Questions",[11,372,373],{},[35,374,375],{},"1. Why does my brand colour look different on screen vs in print?",[11,377,378],{},"Because screens emit RGB light (additive colour) and printers use CMYK inks (subtractive colour). The CMYK colour gamut is smaller — it cannot reproduce the vivid saturated colours a screen emits. This is a physical limitation, not a mistake. You can minimise the difference by working in CMYK from the start for print materials.",[11,380,381],{},[35,382,383],{},"2. What is the best colour format for web design?",[11,385,386,388,389,392],{},[35,387,105],{}," is the most widely used and recommended for web design. It is compact, easy to share, and supported by every browser and design tool. Use ",[35,390,391],{},"rgba()"," when you specifically need opacity/transparency.",[11,394,395],{},[35,396,397],{},"3. Can I exactly match RGB colours in print?",[11,399,400,401,404],{},"Not exactly, but you can get close. The best way to match a specific brand colour in print is to use the ",[35,402,403],{},"Pantone Matching System (PMS)",". PMS assigns a unique number to thousands of specific ink colours. Providing your printer with a PMS reference ensures they mix ink to that exact specification.",[11,406,407],{},[35,408,409],{},"4. What is a colour profile (sRGB, Adobe RGB)?",[11,411,412,413,416,417,420],{},"A colour profile is a set of data that tells a device how to interpret and display colour values. ",[35,414,415],{},"sRGB"," is the standard profile for the web and most consumer displays. ",[35,418,419],{},"Adobe RGB"," has a wider gamut and is used in professional photography and print work. Always export web images in sRGB.",[11,422,423],{},[35,424,425],{},"5. How do I add my brand colours to Canva?",[11,427,428,429,432],{},"In Canva, go to ",[35,430,431],{},"Brand Kit"," (available in Canva Free and Pro). Click \"Add a colour\" and paste your HEX code. Your saved brand colours then appear as the first swatches whenever you open any colour picker in Canva, eliminating the need to retype codes every session.",[11,434,435],{},[35,436,437],{},[438,439,440],"em",{},"Colour consistency is not a detail; it is the foundation of brand recognition. Every touchpoint where your colour is wrong is a missed opportunity to reinforce your identity.",[11,442,443,449,450,454,455],{},[35,444,445,446,448],{},"Build your Brand Colour Master Record today using the ",[254,447,257],{"href":256},"**",". Then read our ",[254,451,453],{"href":452},"/blog/non-designers-guide-brand-visual-identity","Brand Visual Identity Guide"," ",[35,456,457],{},"for the next steps in building a fully cohesive brand system.",{"title":459,"searchDepth":460,"depth":460,"links":461},"",2,[462,463,464,465,470,471,472],{"id":23,"depth":460,"text":24},{"id":59,"depth":460,"text":60},{"id":175,"depth":460,"text":176},{"id":230,"depth":460,"text":231,"children":466},[467,469],{"id":238,"depth":468,"text":239},3,{"id":288,"depth":468,"text":289},{"id":300,"depth":460,"text":301},{"id":342,"depth":460,"text":343},{"id":369,"depth":460,"text":370},"Design","2026-04-16","Keep your brand colours consistent across web, print, social media and digital ads. Practical guide to colour format conversion — HEX, RGB, HSL and CMYK.",false,"md","/blog/match-your-brand-colours-across-every-platform-practical-guide.webp",{},true,"/blog/match-your-brand-colours-across-every-platform-practical-guide",{"title":5,"description":475},"blog/match-your-brand-colours-across-every-platform-practical-guide",[473,485],"Product Mockup","Mh-hcrt7XZQ0yNouUAKvUCTi2Rq5DsJyVtvLz8EBwsw",[488,914,1299],{"id":489,"title":490,"author":6,"body":491,"category":473,"date":905,"description":906,"draft":476,"extension":477,"image":907,"meta":908,"navigation":480,"path":909,"seo":910,"stem":911,"tags":912,"__hash__":913},"blog/blog/colour-theory-101-marketers-make-visuals-that-convert.md","Colour Theory 101 for Marketers: Make Visuals That Convert",{"type":8,"value":492,"toc":886},[493,499,506,509,513,516,536,546,550,553,557,564,570,574,581,586,590,597,602,606,609,614,618,621,626,630,637,642,646,649,663,667,670,696,700,703,710,725,736,740,743,750,757,761,764,790,793,797,800,804,806,811,814,819,822,827,830,835,838,843,846,851,865,870],[11,494,495,496,258],{},"Colour is the silent salesperson. Before a customer reads a single word of your copy, before they register your headline or your offer, their brain has already processed the colour of your visual and formed an emotion. That process takes approximately ",[35,497,498],{},"90 milliseconds",[11,500,501,502,505],{},"Research consistently shows that up to ",[35,503,504],{},"90% of snap judgements about products"," are based on colour alone, and that colour can increase brand recognition by up to 80%. Yet most marketers choose colours based on personal preference, or worse, \"what looks nice.\" Colour theory provides a rational, evidence-based framework for making visual decisions that actually move people to act.",[11,507,508],{},"You don't need an art degree to use it. This guide will equip you with the fundamentals—everything a marketer needs, nothing they don't.",[21,510,512],{"id":511},"the-colour-wheel-understanding-the-basics","The Colour Wheel: Understanding the Basics",[11,514,515],{},"The colour wheel is the foundational map of colour relationships. All of colour theory flows from it.",[29,517,518,524,530],{},[32,519,520,523],{},[35,521,522],{},"Primary Colours:"," Red, Yellow, Blue (in traditional pigment theory). In screen/light theory (relevant for digital marketing), the primaries are Red, Green, Blue (RGB).",[32,525,526,529],{},[35,527,528],{},"Secondary Colours:"," Colours formed by mixing two primaries - Orange (Red + Yellow), Green (Blue + Yellow), Purple (Red + Blue).",[32,531,532,535],{},[35,533,534],{},"Tertiary Colours:"," The in-between shades - Yellow-Orange, Red-Orange, Red-Purple, Blue-Purple, Blue-Green, Yellow-Green.",[11,537,538,541,542,545],{},[35,539,540],{},"Warm Colours"," (Reds, Oranges, Yellows) sit on one half of the wheel. They create feelings of energy, warmth, urgency, and appetite. ",[35,543,544],{},"Cool Colours"," (Blues, Greens, Purples) sit on the other half. They create feelings of calm, trust, logic, and cool detachment.",[21,547,549],{"id":548},"the-6-colour-harmony-rules","The 6 Colour Harmony Rules",[11,551,552],{},"Colour harmony is the practice of choosing colours that work well together. There are six core rules:",[236,554,556],{"id":555},"_1-complementary-colours","1. Complementary Colours",[11,558,559,560,563],{},"Complementary colours sit ",[35,561,562],{},"directly opposite each other"," on the colour wheel (e.g., Blue and Orange, Red and Green, Purple and Yellow). They create maximum contrast and visual tension.",[11,565,566,569],{},[35,567,568],{},"In Marketing:"," Ideal for high-energy, attention-grabbing designs. Sports brands, fast food, and sale promotions often use complementary schemes. Think of the New York Knicks' blue and orange, or Fanta's orange on blue.",[236,571,573],{"id":572},"_2-analogous-colours","2. Analogous Colours",[11,575,576,577,580],{},"Analogous colours are ",[35,578,579],{},"three colours sitting side by side"," on the wheel (e.g., Blue, Blue-Green, Green). They are harmonious, calming, and pleasing to the eye; there's no visual conflict.",[11,582,583,585],{},[35,584,568],{}," Perfect for wellness, nature, or lifestyle brands that want to feel cohesive and serene. Think Starbucks' use of greens. The risk is that they can feel low-energy if there's no contrast element.",[236,587,589],{"id":588},"_3-triadic-colours","3. Triadic Colours",[11,591,592,593,596],{},"A triadic scheme uses ",[35,594,595],{},"three colours evenly spaced around the wheel"," (e.g., Red, Yellow, Blue, or Orange, Green, Purple). It creates a vibrant, playful balance.",[11,598,599,601],{},[35,600,568],{}," Children's brands, creative agencies, and entertainment companies use triadic palettes. They feel fun and energetic without the harsh tension of complementary pairs.",[236,603,605],{"id":604},"_4-split-complementary-colours","4. Split-Complementary Colours",[11,607,608],{},"Instead of using the exact complement of a colour, you take the two colours adjacent to the complement. For example, instead of Blue + Orange, you use Blue + Yellow-Orange + Red-Orange.",[11,610,611,613],{},[35,612,568],{}," A safer version of the complementary scheme. It provides a strong visual contrast without the aggressive tension. Good for businesses that want to stand out without shouting.",[236,615,617],{"id":616},"_5-tetradic-square-colours","5. Tetradic (Square) Colours",[11,619,620],{},"Four colours forming a square or rectangle on the colour wheel - two complementary pairs. This scheme is rich and complex.",[11,622,623,625],{},[35,624,568],{}," Can work beautifully but requires care. One colour must dominate, or the design feels chaotic. Best left for experienced designers or very controlled brand applications.",[236,627,629],{"id":628},"_6-monochromatic-colours","6. Monochromatic Colours",[11,631,632,633,636],{},"A monochromatic scheme uses ",[35,634,635],{},"one hue at varying levels of saturation and lightness",". For example, a deep navy, a mid-blue, a sky blue, and a near-white, all derived from the same blue hue.",[11,638,639,641],{},[35,640,568],{}," Extremely clean, sophisticated, and easy to execute. It creates a strong visual identity and high brand recognition. Many premium SaaS and fintech brands use monochromatic schemes precisely because they feel polished and professional.",[21,643,645],{"id":644},"colour-temperature-and-emotion","Colour Temperature and Emotion",[11,647,648],{},"Beyond harmony rules, the overall \"temperature\" of your palette sends a message before any individual colour is identified.",[29,650,651,657],{},[32,652,653,656],{},[35,654,655],{},"Warm Palettes (Red, Orange, Yellow):"," Trigger a sense of urgency, appetite, energy, and excitement. Excellent for food and beverage, retail sales, fitness, and entertainment. The human eye is drawn to warm colours first - which is why \"Buy Now\" buttons are often red or orange.",[32,658,659,662],{},[35,660,661],{},"Cool Palettes (Blue, Green, Purple):"," Trigger calm, trust, intelligence, and health. Essential for finance, tech, healthcare, insurance, and professional services. These colours make people feel safe leaving their data with you.",[21,664,666],{"id":665},"saturation-and-brightness-in-marketing","Saturation and Brightness in Marketing",[11,668,669],{},"The \"mood\" of a colour is as much about its purity and brightness as its hue.",[29,671,672,678,684,690],{},[32,673,674,677],{},[35,675,676],{},"High Saturation (Vivid colours):"," Feel bold, youthful, urgent, and playful. Used by children's brands, discount retailers, and social platforms targeting younger demographics.",[32,679,680,683],{},[35,681,682],{},"Low Saturation (Muted, desaturated colours):"," Feel sophisticated, premium, calm, and mature. Used by luxury brands, wellness products, and editorial media.",[32,685,686,689],{},[35,687,688],{},"High Brightness (Light tones):"," Approachable, friendly, fresh. Used by new startups and consumer apps.",[32,691,692,695],{},[35,693,694],{},"Low Brightness (Dark tones):"," Premium, serious, exclusive. Used by luxury watches, prestige cars, and high-end food and drink.",[21,697,699],{"id":698},"contrast-and-accessibility-in-marketing","Contrast and Accessibility in Marketing",[11,701,702],{},"No matter how beautiful your palette is, if people can't read your content, it fails. Contrast is not just a design nicety — in many markets, it is a legal accessibility requirement.",[11,704,705,706,709],{},"The ",[35,707,708],{},"WCAG 2.1 AA standard"," (Web Content Accessibility Guidelines) requires:",[29,711,712,719],{},[32,713,714,715,718],{},"A minimum contrast ratio of ",[35,716,717],{},"4.5:1"," for normal body text.",[32,720,714,721,724],{},[35,722,723],{},"3:1"," for large text (18pt+ or 14pt bold).",[11,726,727,728,731,732,735],{},"Two quick practical tests: The ",[35,729,730],{},"Squint Test"," — squint your eyes until your design blurs. If the text and background melt into each other, contrast is too low. The ",[35,733,734],{},"Greyscale Test"," — convert your design to greyscale. Can you still read it clearly? If yes, your contrast works. If not, adjust.",[21,737,739],{"id":738},"colour-in-calls-to-action-and-conversion","Colour in Calls-to-Action and Conversion",[11,741,742],{},"Few topics in marketing generate more debate than \"what colour should my CTA button be?\" Dozens of case studies claim that red outperforms green or that orange outperforms blue. The truth is more nuanced.",[11,744,745,746,749],{},"The most important principle is ",[35,747,748],{},"contrast, not hue",". Your CTA button simply needs to stand out visually from its surrounding background. On a predominantly blue page, an orange button stands out. On a white page, a deep green button stands out. The specific colour is secondary — what matters is that it commands attention.",[11,751,752,753,756],{},"The secondary principle is ",[35,754,755],{},"temperature and urgency",". For time-limited offers and checkout buttons, warm colours (red, orange) can create subtle urgency. For trust-based actions (e.g., \"Book a Consultation,\" \"Sign Up Free\"), cool or neutral colours feel less pressuring.",[21,758,760],{"id":759},"cultural-colour-considerations","Cultural Colour Considerations",[11,762,763],{},"Colour meaning is not universal. If you operate globally, be aware of cultural differences:",[29,765,766,772,778,784],{},[32,767,768,771],{},[35,769,770],{},"White:"," Purity in Western cultures, but associated with mourning in China, Japan, and parts of South Asia.",[32,773,774,777],{},[35,775,776],{},"Red:"," Danger and urgency in the West; luck, prosperity, and celebration in China and India.",[32,779,780,783],{},[35,781,782],{},"Green:"," Has significant religious meaning in Islamic contexts (used prominently in flags). Exercise care when using green in Middle Eastern marketing.",[32,785,786,789],{},[35,787,788],{},"Purple:"," Royalty in Western contexts; mourning in parts of Brazil and Thailand.",[11,791,792],{},"Major global brands often adapt their colour usage by market. What resonates in one culture can actively offend in another.",[236,794,796],{"id":795},"ready-to-apply-colour-theory-to-your-brand","Ready to apply colour theory to your brand?",[11,798,799],{},"Convert, extract, and refine your colours with free browser tools.",[11,801,802],{},[254,803,297],{"href":256},[21,805,370],{"id":369},[11,807,808],{},[35,809,810],{},"1. What is the most effective colour for a call-to-action button?",[11,812,813],{},"There is no single \"best\" CTA colour. The most effective colour is the one that provides the highest contrast against the page background while fitting the brand's temperature. Orange and red are common choices because they contrast well against blue and white page designs.",[11,815,816],{},[35,817,818],{},"2. Does colour really affect purchasing decisions?",[11,820,821],{},"Yes, substantially. Research consistently shows that colour is the first sensory input processed when viewing a product or website, and that it influences perceived value, trust, and urgency. Up to 85% of purchasing decisions are influenced by colour.",[11,823,824],{},[35,825,826],{},"3. What colour combinations should I avoid?",[11,828,829],{},"Avoid: Red text on a blue background (vibrates and causes eye strain). Pure Yellow text on white (near-invisible). Very similar hues with low contrast (looks accidental). Neon colours for body text (impossible to read for extended periods). These combinations actively harm readability and user experience.",[11,831,832],{},[35,833,834],{},"4. What is a monochromatic colour scheme?",[11,836,837],{},"A monochromatic scheme uses a single hue (colour) but varies its saturation (purity) and lightness (how light or dark it is). For example, a palette of navy, mid-blue, light blue, and near-white is monochromatic. It feels clean, cohesive, and professional.",[11,839,840],{},[35,841,842],{},"5. How do I check if my colour contrast is accessible?",[11,844,845],{},"Use a free online contrast checker (search \"WCAG contrast checker\"). Enter your text colour and background colour, and the tool tells you whether you meet the AA or AAA standard. Many browser developer tools also have this built into the accessibility inspector.",[11,847,848],{},[35,849,850],{},"6. What is the difference between hue, saturation, and brightness?",[11,852,853,856,857,860,861,864],{},[35,854,855],{},"Hue"," is the \"name\" of the colour — Red, Blue, Green. ",[35,858,859],{},"Saturation"," is how vivid or grey it is — 100% is pure colour, 0% is completely grey. ",[35,862,863],{},"Brightness/Lightness"," is how light or dark it is — 100% is white, 0% is black. Together, these three properties completely describe any colour.",[11,866,867],{},[35,868,869],{},"Colour theory is not a creative luxury; it is a strategic toolkit. Whether you are designing a landing page, choosing packaging, or picking a button colour, applying these principles will result in more effective, more compelling, and more accessible marketing.",[11,871,872,873,875,876,880,881,885],{},"Explore related guides: ",[254,874,453],{"href":452}," and ",[254,877,879],{"href":878},"/blog/choose-brand-colours-that-actually-work-psychology","How to Choose Brand Colours",". Ready to put theory into practice? Use the ",[254,882,884],{"href":883},"/tools/color-palette-extractor","Colour Palette Extractor"," to build your first harmonious palette.",{"title":459,"searchDepth":460,"depth":460,"links":887},[888,889,897,898,899,900,901,904],{"id":511,"depth":460,"text":512},{"id":548,"depth":460,"text":549,"children":890},[891,892,893,894,895,896],{"id":555,"depth":468,"text":556},{"id":572,"depth":468,"text":573},{"id":588,"depth":468,"text":589},{"id":604,"depth":468,"text":605},{"id":616,"depth":468,"text":617},{"id":628,"depth":468,"text":629},{"id":644,"depth":460,"text":645},{"id":665,"depth":460,"text":666},{"id":698,"depth":460,"text":699},{"id":738,"depth":460,"text":739},{"id":759,"depth":460,"text":760,"children":902},[903],{"id":795,"depth":468,"text":796},{"id":369,"depth":460,"text":370},"2026-04-12","Learn colour theory fundamentals for marketing — the colour wheel, harmony rules, contrast, accessibility and psychology — all explained for non-designers.","/blog/colour-theory-101-marketers-make-visuals-that-convert.webp",{},"/blog/colour-theory-101-marketers-make-visuals-that-convert",{"title":490,"description":906},"blog/colour-theory-101-marketers-make-visuals-that-convert",[473,485],"s0IsY--DVD_KnIy87tGz01zh2fgZKh7A3MwJ6HL_lZM",{"id":915,"title":916,"author":6,"body":917,"category":473,"date":1288,"description":1289,"draft":476,"extension":477,"image":1290,"meta":1291,"navigation":480,"path":1292,"seo":1293,"stem":1294,"tags":1295,"__hash__":1298},"blog/blog/css-gradients-complete-beginner-guide-examples.md","CSS Gradients: The Complete Beginner's Guide With Examples",{"type":8,"value":918,"toc":1270},[919,922,925,929,945,960,964,967,978,982,987,996,999,1004,1010,1013,1018,1024,1027,1032,1038,1041,1045,1048,1057,1062,1068,1071,1075,1078,1083,1089,1093,1097,1104,1110,1114,1117,1123,1127,1130,1134,1137,1145,1162,1166,1169,1174,1178,1181,1183,1188,1191,1196,1202,1207,1222,1227,1242,1247,1250,1255,1265],[11,920,921],{},"In the early days of the web, if you wanted a gradient background, you had to design a thin image slice in Photoshop and repeat it across the page. It was slow and inflexible, increasing page load times.",[11,923,924],{},"Today, CSS gradients are a fundamental design element. They are generated by the browser itself, meaning they require no image files, scale infinitely to any screen size without pixelation, and can be edited instantly with code. From subtle button hovers to vibrant, modern hero backgrounds, mastering CSS gradients is essential for any digital marketer or web designer.",[21,926,928],{"id":927},"what-is-a-css-gradient","What Is a CSS Gradient?",[11,930,931,932,936,937,940,941,944],{},"In CSS, a gradient is technically treated as an image type (",[933,934,935],"code",{},"\u003Cimage>","), but it is created using a function. You define it within the ",[933,938,939],{},"background"," or ",[933,942,943],{},"background-image"," property.",[11,946,947,948,951,952,955,956,959],{},"A gradient creates a smooth transition between two or more colours. There are three main types you can create: ",[35,949,950],{},"Linear"," (straight lines), ",[35,953,954],{},"Radial"," (circular/outward), and ",[35,957,958],{},"Conic"," (rotated around a center).",[21,961,963],{"id":962},"linear-gradients-the-most-common-type","Linear Gradients - The Most Common Type",[11,965,966],{},"Linear gradients transition colours along a straight line. This is the standard \"top to bottom\" or \"left to right\" fade.",[11,968,969,972,975],{},[35,970,971],{},"Basic Syntax:",[973,974],"br",{},[933,976,977],{},"background: linear-gradient(direction, color1, color2);",[236,979,981],{"id":980},"examples","Examples:",[11,983,984],{},[35,985,986],{},"1. Top to Bottom (Default):",[988,989,994],"pre",{"className":990,"code":992,"language":993,"meta":459},[991],"language-text","background: linear-gradient(#ff6b6b, #feca57);\n","text",[933,995,992],{"__ignoreMap":459},[11,997,998],{},"This creates a sunset effect, fading from red to yellow downwards.",[11,1000,1001],{},[35,1002,1003],{},"2. Left to Right:",[988,1005,1008],{"className":1006,"code":1007,"language":993,"meta":459},[991],"background: linear-gradient(to right, #4F46E5, #9333EA);\n",[933,1009,1007],{"__ignoreMap":459},[11,1011,1012],{},"A modern tech gradient fades from indigo to purple across the screen.",[11,1014,1015],{},[35,1016,1017],{},"3. Diagonal (45 Degrees):",[988,1019,1022],{"className":1020,"code":1021,"language":993,"meta":459},[991],"background: linear-gradient(45deg, #11998e, #38ef7d);\n",[933,1023,1021],{"__ignoreMap":459},[11,1025,1026],{},"A dynamic angle is often used for buttons or hero sections.",[11,1028,1029],{},[35,1030,1031],{},"4. Hard Stops (Stripes):",[988,1033,1036],{"className":1034,"code":1035,"language":993,"meta":459},[991],"background: linear-gradient(to right, red 50%, blue 50%);\n",[933,1037,1035],{"__ignoreMap":459},[11,1039,1040],{},"Instead of a fade, this creates a sharp line: left half red, right half Blue. This happens because both colours \"meet\" exactly at the 50% mark.",[21,1042,1044],{"id":1043},"radial-gradients","Radial Gradients",[11,1046,1047],{},"Radial gradients start from a central point and radiate outwards, like a spotlight or a sun.",[11,1049,1050,1052,1054],{},[35,1051,971],{},[973,1053],{},[933,1055,1056],{},"background: radial-gradient(shape at position, color1, color2);",[11,1058,1059],{},[35,1060,1061],{},"Example: Spotlight Effect",[988,1063,1066],{"className":1064,"code":1065,"language":993,"meta":459},[991],"background: radial-gradient(circle, #ffffff, #000000);\n",[933,1067,1065],{"__ignoreMap":459},[11,1069,1070],{},"A white center fading to black edges, looking like a light shining in the dark.",[21,1072,1074],{"id":1073},"conic-gradients","Conic Gradients",[11,1076,1077],{},"Conic gradients are rotated around a center point, like the hands of a clock sweeping around. They are great for creating pie charts or colour wheels in pure CSS.",[11,1079,1080],{},[35,1081,1082],{},"Example: Colour Wheel",[988,1084,1087],{"className":1085,"code":1086,"language":993,"meta":459},[991],"background: conic-gradient(red, yellow, green, blue, red);\n",[933,1088,1086],{"__ignoreMap":459},[21,1090,1092],{"id":1091},"css-gradient-tricks-every-designer-should-know","CSS Gradient Tricks Every Designer Should Know",[236,1094,1096],{"id":1095},"_1-transparent-gradient-over-images","1. Transparent Gradient Over Images",[11,1098,1099,1100,1103],{},"Often, text is hard to read over a photo. Add a subtle black gradient overlay using ",[933,1101,1102],{},"rgba"," (Red, Green, Blue, Alpha) to darken just the bottom of the image.",[988,1105,1108],{"className":1106,"code":1107,"language":993,"meta":459},[991],"background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)), url('image.jpg');\n",[933,1109,1107],{"__ignoreMap":459},[236,1111,1113],{"id":1112},"_2-gradient-text-effect","2. Gradient Text Effect",[11,1115,1116],{},"You can clip a gradient to the text itself for a cool modern effect (WebKit browsers only).",[988,1118,1121],{"className":1119,"code":1120,"language":993,"meta":459},[991],"background: linear-gradient(to right, #30CFD0 0%, #330867 100%);\n-webkit-background-clip: text;\n-webkit-text-fill-color: transparent;\n",[933,1122,1120],{"__ignoreMap":459},[236,1124,1126],{"id":1125},"_3-subtle-ui-depth","3. Subtle UI Depth",[11,1128,1129],{},"Use a very subtle vertical gradient (e.g., white to off-white) on buttons or cards to give them a tactile, 3D feel without heavy drop shadows.",[21,1131,1133],{"id":1132},"using-the-campaignmorph-css-gradient-generator","Using the CampaignMorph CSS Gradient Generator",[11,1135,1136],{},"Writing gradient code by hand is tricky—it's hard to visualise the angles and hex codes. It is much easier to use a visual tool.",[11,1138,1139,1140,1144],{},"Using the ",[254,1141,1143],{"href":1142},"/tools/css-gradient-generator","CSS Gradient Generator",", you can:",[248,1146,1147,1150,1153,1156,1159],{},[32,1148,1149],{},"Pick your colours using a visual picker.",[32,1151,1152],{},"Drag a slider to rotate the angle (e.g., 135deg).",[32,1154,1155],{},"Add multiple colour stops for complex effects.",[32,1157,1158],{},"See the result instantly in the preview box.",[32,1160,1161],{},"Copy the finished CSS code with one click.",[236,1163,1165],{"id":1164},"design-beautiful-gradients-instantly","Design beautiful gradients instantly",[11,1167,1168],{},"Visually build linear and radial gradients and get the CSS code.",[11,1170,1171],{},[254,1172,1173],{"href":1142},"Open Gradient Generator",[21,1175,1177],{"id":1176},"gradients-and-brand-identity","Gradients and Brand Identity",[11,1179,1180],{},"Gradients are an excellent way to extend your brand palette. If you have a primary Blue and a secondary Green, a gradient blending the two creates a unique \"Brand Texture\" you can use for social media backgrounds, slide decks, and website headers.",[21,1182,370],{"id":369},[11,1184,1185],{},[35,1186,1187],{},"1. Are CSS gradients supported in all browsers?",[11,1189,1190],{},"Yes, all modern browsers (Chrome, Firefox, Safari, Edge) fully support linear and radial gradients. Conic gradients are also widely supported in modern versions. For very old browsers (like IE9), you would need a fallback solid background colour.",[11,1192,1193],{},[35,1194,1195],{},"2. Is it better to use CSS gradients or gradient images?",[11,1197,1198,1201],{},[35,1199,1200],{},"CSS gradients"," are superior. They require no HTTP request (faster load times), scale infinitely without blur, and take up virtually no file space. Only use image gradients if you need a specific artistic texture (like noise or grain) that CSS cannot easily do.",[11,1203,1204],{},[35,1205,1206],{},"3. How do I create a gradient text effect in CSS?",[11,1208,1209,1210,1213,1214,1217,1218,1221],{},"You use ",[933,1211,1212],{},"background-clip: text",". First, set the gradient as the background. Then set ",[933,1215,1216],{},"-webkit-background-clip: text",". Finally, set the text colour  ",[933,1219,1220],{},"transparent"," so the background shows through the letter shapes.",[11,1223,1224],{},[35,1225,1226],{},"4. Can I use gradients for CSS borders?",[11,1228,1229,1230,1233,1234,1237,1238,1241],{},"Yes, but it is tricky. The standard ",[933,1231,1232],{},"border-color"," doesn't support gradients. You typically use ",[933,1235,1236],{},"border-image"," or a wrapper ",[933,1239,1240],{},"div"," with padding and a gradient background to simulate a border.",[11,1243,1244],{},[35,1245,1246],{},"5. What is a hard colour stop in CSS?",[11,1248,1249],{},"Normally, gradients fade. A \"hard stop\" creates a sharp line. You achieve this by setting two colours at the exact same location percentage (e.g., Red at 50%, Blue at 50%).",[11,1251,1252],{},[35,1253,1254],{},"6. How do I make a 45-degree diagonal gradient?",[11,1256,1257,1258,1261,1262,258],{},"Use ",[933,1259,1260],{},"45deg"," as the first parameter in your linear-gradient function: ",[933,1263,1264],{},"linear-gradient(45deg, blue, red)",[11,1266,1267],{},[35,1268,1269],{},"Gradients add depth, polish, and modern flair to any design. CSS is a lightweight and powerful tool in your kit.",{"title":459,"searchDepth":460,"depth":460,"links":1271},[1272,1273,1276,1277,1278,1283,1286,1287],{"id":927,"depth":460,"text":928},{"id":962,"depth":460,"text":963,"children":1274},[1275],{"id":980,"depth":468,"text":981},{"id":1043,"depth":460,"text":1044},{"id":1073,"depth":460,"text":1074},{"id":1091,"depth":460,"text":1092,"children":1279},[1280,1281,1282],{"id":1095,"depth":468,"text":1096},{"id":1112,"depth":468,"text":1113},{"id":1125,"depth":468,"text":1126},{"id":1132,"depth":460,"text":1133,"children":1284},[1285],{"id":1164,"depth":468,"text":1165},{"id":1176,"depth":460,"text":1177},{"id":369,"depth":460,"text":370},"2026-04-14","Master CSS gradients from scratch — linear, radial and conic gradients explained with live examples, code snippets, and a free CSS gradient generator tool.","/blog/css-gradients-complete-beginner-guide-examples.webp",{},"/blog/css-gradients-complete-beginner-guide-examples",{"title":916,"description":1289},"blog/css-gradients-complete-beginner-guide-examples",[1296,473,1297],"CSS","Tutorial","0qJTmDqi699FqA6WTfbwnHfhNQo9tB3jKvWGfu31UoA",{"id":1300,"title":1301,"author":6,"body":1302,"category":473,"date":1535,"description":1536,"draft":476,"extension":477,"image":1537,"meta":1538,"navigation":480,"path":1539,"seo":1540,"stem":1541,"tags":1542,"__hash__":1544},"blog/blog/lorem-ipsum-explained.md","Lorem Ipsum Explained: Why Placeholder Text Matters in Design?",{"type":8,"value":1303,"toc":1525},[1304,1310,1313,1316,1320,1323,1330,1333,1340,1344,1347,1379,1383,1386,1418,1422,1425,1428,1432,1435,1441,1445,1448,1474,1476,1481,1484,1489,1492,1497,1504,1509,1512,1517,1520],[11,1305,1306,1307],{},"Open almost any design mockup, website wireframe, or template preview, and you'll see the same strange Latin-looking text: ",[438,1308,1309],{},"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit...\"",[11,1311,1312],{},"It appears in Figma files, PowerPoint decks, WordPress themes, and Adobe templates across the entire industry. But what is it? Where did it come from? And why do designers insist on using garbled Latin rather than real content?",[11,1314,1315],{},"Here's everything you need to know.",[21,1317,1319],{"id":1318},"what-is-lorem-ipsum","What Is Lorem Ipsum?",[11,1321,1322],{},"Lorem Ipsum is a form of placeholder text used in graphic design and web development since at least the 1960s. Its origins, however, stretch back over 2,000 years.",[11,1324,1325,1326,1329],{},"The standard Lorem Ipsum passage is derived from a work by the Roman philosopher and statesman Cicero, written in 45 BC: ",[438,1327,1328],{},"\"de Finibus Bonorum et Malorum\""," (\"On the Ends of Good and Evil\"). The text was scrambled and rearranged, deliberately made unreadable, to serve as neutral visual filler.",[11,1331,1332],{},"Lorem Ipsum rose to widespread use in the 1960s, when Letraset, a company that produced dry-transfer letter sheets for graphic designers, included it in its product catalogues. When digital desktop publishing tools like Aldus PageMaker arrived in the 1980s, Lorem Ipsum was baked in as the default filler, cementing its reign as the industry-standard placeholder text.",[11,1334,1335,1336,1339],{},"It is ",[35,1337,1338],{},"not"," real, readable Latin. It's a scrambled, grammatically nonsensical sequence of Latin words, which is, of course, the whole point.",[21,1341,1343],{"id":1342},"why-do-designers-use-lorem-ipsum","Why Do Designers Use Lorem Ipsum?",[11,1345,1346],{},"There is a specific, logical reason designers reach for Lorem Ipsum rather than real content during the design phase:",[29,1348,1349,1355,1361,1367,1373],{},[32,1350,1351,1354],{},[35,1352,1353],{},"It prevents distraction:"," When reviewers see real copy in a mockup, they focus on the words rather than the layout, typography, and visual hierarchy. Lorem Ipsum is meaningless, so nobody gets distracted debating word choices when the point is to evaluate the design.",[32,1356,1357,1360],{},[35,1358,1359],{},"It simulates realistic text density:"," Lorem Ipsum mimics how real paragraphs look, with varied sentence lengths, punctuation, and mixed characters, far better than simply typing \"text here text here text here.\"",[32,1362,1363,1366],{},[35,1364,1365],{},"It evaluates typography:"," By placing realistic-looking text in your layout, designers can evaluate font choices, line-height, letter spacing, and readability without the copy being ready.",[32,1368,1369,1372],{},[35,1370,1371],{},"It's universal and language-neutral:"," Design teams around the world use the same filler, which means no accidental language bias or culturally confusing content appears in early-stage mockups shared globally.",[32,1374,1375,1378],{},[35,1376,1377],{},"It signals \"work in progress\":"," Any team member who sees Lorem Ipsum immediately understands the content hasn't been written yet, so nobody mistakes a mockup for a final design.",[21,1380,1382],{"id":1381},"when-should-you-use-real-text-instead","When Should You Use Real Text Instead?",[11,1384,1385],{},"Lorem Ipsum is a tool for specific stages of the design process, not all stages. Here's when to switch to real copy:",[29,1387,1388,1394,1400,1406,1412],{},[32,1389,1390,1393],{},[35,1391,1392],{},"Final design reviews:"," Before a design is approved for development, replace Lorem Ipsum with actual content so stakeholders can evaluate the full picture.",[32,1395,1396,1399],{},[35,1397,1398],{},"User testing:"," Users being tested on a product should see realistic content to give you meaningful feedback on comprehension and navigation.",[32,1401,1402,1405],{},[35,1403,1404],{},"When copy length drives layout:"," If a headline varies wildly in length (3 words vs 12 words), you need real copy to see whether the design can accommodate real-world variation.",[32,1407,1408,1411],{},[35,1409,1410],{},"Landing pages and hero sections:"," When the design and the message are inseparable, such as on a conversion-focused landing page design with real copy from the start.",[32,1413,1414,1417],{},[35,1415,1416],{},"Client presentations:"," If a client is seeing a mockup for the first time, Lorem Ipsum can confuse or unsettle them. Use real or realistic copy for client-facing deliverables.",[21,1419,1421],{"id":1420},"how-to-generate-lorem-ipsum-for-free","How to Generate Lorem Ipsum for Free",[11,1423,1424],{},"You can generate Lorem Ipsum in any amount instantly, by paragraphs, words, or sentences, using the CampaignMorph Lorem Ipsum Generator.",[11,1426,1427],{},"Simply choose how much text you need, select whether you want whole paragraphs, individual sentences, or a specific word count, and copy the output directly into your design tool or document.",[236,1429,1431],{"id":1430},"generate-lorem-ipsum-text-instantly","Generate Lorem Ipsum Text Instantly",[11,1433,1434],{},"Choose paragraphs, sentences, or words. Copy with one click. No sign-up.",[11,1436,1437],{},[254,1438,1440],{"href":1439},"/tools/lorem-ipsum-generator","Open Lorem Ipsum Generator",[21,1442,1444],{"id":1443},"lorem-ipsum-alternatives","Lorem Ipsum Alternatives",[11,1446,1447],{},"Sometimes standard Lorem Ipsum feels too formal for a casual project, or you simply want some fun in your mockups. Here are some popular alternatives:",[29,1449,1450,1456,1462,1468],{},[32,1451,1452,1455],{},[35,1453,1454],{},"Hipster Ipsum:"," Artisanal placeholder text using trendy words like \"mixtape,\" \"sustainable,\" and \"cold-brew.\" Perfect for lifestyle and fashion brands.",[32,1457,1458,1461],{},[35,1459,1460],{},"Bacon Ipsum:"," Replaces Latin with meat-themed filler text. A favourite among developers with a sense of humour.",[32,1463,1464,1467],{},[35,1465,1466],{},"Corporate Ipsum:"," Generates authentic-sounding business jargon. Useful when the client insists on business-style filler or when you're presenting to a corporate audience.",[32,1469,1470,1473],{},[35,1471,1472],{},"Samuel L. Ipsum:"," Memorable quotes in the style of the famous actor. Best for entertainment and media projects.",[21,1475,370],{"id":369},[11,1477,1478],{},[35,1479,1480],{},"1. Is Lorem Ipsum real Latin?",[11,1482,1483],{},"Not exactly. It is derived from a real Latin text by the philosopher Cicero, but the standard Lorem Ipsum passage has been deliberately scrambled into a form that is grammatically incorrect and essentially unreadable. It is intentional to prevent the text from being read or interpreted.",[11,1485,1486],{},[35,1487,1488],{},"2. Can I use Lorem Ipsum in final designs?",[11,1490,1491],{},"It is strongly not recommended. Final designs, especially those presented to clients or used for user testing, should use real content. Lorem Ipsum in a final design signals an incomplete deliverable and can confuse or frustrate end clients and stakeholders.",[11,1493,1494],{},[35,1495,1496],{},"3. What is the standard Lorem Ipsum paragraph?",[11,1498,1499,1500,1503],{},"The classic opening sentence is: ",[438,1501,1502],{},"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\""," It is the most widely recognised form and has been in continuous use since the 1960s.",[11,1505,1506],{},[35,1507,1508],{},"4. Why is Lorem Ipsum used instead of real text?",[11,1510,1511],{},"Because it keeps reviewers focused on the visual design rather than the written content, real text invites people to edit the copy, debate the wording, or focus on meaning rather than layout. Lorem Ipsum sidesteps all of that, directing attention purely to the design.",[11,1513,1514],{},[35,1515,1516],{},"5. Are there Lorem Ipsum generators in different languages?",[11,1518,1519],{},"Yes. While the classic Lorem Ipsum is a scrambled form of Latin, many generators now offer placeholders in other scripts, including Chinese, Arabic, Cyrillic, and Japanese, useful for designing internationalised products where character width and rendering matter.",[11,1521,1522],{},[35,1523,1524],{},"Lorem Ipsum is one of those design tools so ubiquitous that most people use it without knowing where it came from or why it exists. Now you know both. Use it liberally in your early design phases, switch to real content for final reviews, and let CampaignMorph generate exactly the right amount of placeholder text for any project.",{"title":459,"searchDepth":460,"depth":460,"links":1526},[1527,1528,1529,1530,1533,1534],{"id":1318,"depth":460,"text":1319},{"id":1342,"depth":460,"text":1343},{"id":1381,"depth":460,"text":1382},{"id":1420,"depth":460,"text":1421,"children":1531},[1532],{"id":1430,"depth":468,"text":1431},{"id":1443,"depth":460,"text":1444},{"id":369,"depth":460,"text":370},"2026-03-29","What is Lorem Ipsum, where does it come from, and why do designers use it? Plus a free Lorem Ipsum generator for your next design project.","/blog/lorem-ipsum-explained.webp",{},"/blog/lorem-ipsum-explained",{"title":1301,"description":1536},"blog/lorem-ipsum-explained",[473,1543],"UX","bpTtsipbPbbczuSD_mpVaGRQedWjEIJLUgAGnrClLO8",1777796110807]