[{"data":1,"prerenderedAt":104},["ShallowReactive",2],{"blog-how-to-extract-brand-colors-from-any-website":3},{"post":4,"related":55,"previous":101,"next":103},{"slug":5,"title":6,"description":7,"excerpt":8,"date":9,"updated":10,"status":11,"author":12,"authorTitle":10,"category":13,"categoryName":14,"categoryAccent":15,"tags":16,"image":20,"cover":21,"imageAlt":10,"featured":22,"readingMinutes":23,"wordCount":24,"headings":25,"html":52,"canonicalUrl":10,"sourceFile":53,"path":54},"how-to-extract-brand-colors-from-any-website","How to Extract Brand Colors From Any Website","Four ways to pull the exact hex codes off a live site (DevTools, the CSS, a screenshot, and an extractor) and which one is right for each job.","You need the exact colors a site uses, and you need them as hex codes rather than as a hunch. Maybe you're building a pitch deck for a client, matching an integration to a partner's brand, or…","2026-08-23T09:00:00.000Z","","published","Colorize","guides","Guides","#818CF8",[17,18,19],"brand colors","workflow","css","/social/blog/how-to-extract-brand-colors-from-any-website.png","/social/blog/how-to-extract-brand-colors-from-any-website-cover.png",true,4,951,[26,30,33,36,40,43,46,49],{"id":27,"text":28,"level":29},"the-four-methods-briefly","The four methods, briefly",2,{"id":31,"text":32,"level":29},"method-1-the-devtools-eyedropper","Method 1: the DevTools eyedropper",{"id":34,"text":35,"level":29},"method-2-read-the-stylesheet","Method 2: read the stylesheet",{"id":37,"text":38,"level":39},"what-this-method-misses","What this method misses",3,{"id":41,"text":42,"level":29},"method-3-sample-a-screenshot","Method 3: sample a screenshot",{"id":44,"text":45,"level":29},"method-4-use-an-extractor","Method 4: use an extractor",{"id":47,"text":48,"level":29},"which-one-to-use","Which one to use",{"id":50,"text":51,"level":29},"getting-the-codes-into-your-tools","Getting the codes into your tools","\u003Cp>You need the exact colors a site uses, and you need them as hex codes rather than as a hunch. Maybe you're building a pitch deck for a client, matching an integration to a partner's brand, or rebuilding a design system that only exists inside a stylesheet nobody wrote down. There are four ways to do it, they disagree with each other more often than you'd expect, and picking the wrong one is how you end up shipping a near-miss.\u003C/p>\n\u003Cp>Here's what each method actually gives you, and when the difference matters.\u003C/p>\n\u003Ch2 id=\"the-four-methods-briefly\">\u003Ca class=\"heading-anchor\" href=\"#the-four-methods-briefly\" aria-label=\"Link to this section\">#\u003C/a>The four methods, briefly\u003C/h2>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth scope=\"col\">Method\u003C/th>\u003Cth scope=\"col\">Gives you\u003C/th>\u003Cth scope=\"col\">Best for\u003C/th>\u003Cth scope=\"col\">Time\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>DevTools eyedropper\u003C/td>\u003Ctd>One color, exactly as rendered\u003C/td>\u003Ctd>Checking a single element\u003C/td>\u003Ctd>Seconds\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Reading the CSS\u003C/td>\u003Ctd>Every declared color, with names\u003C/td>\u003Ctd>Rebuilding a design system\u003C/td>\u003Ctd>10-30 min\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Screenshot sampling\u003C/td>\u003Ctd>What a visitor actually sees\u003C/td>\u003Ctd>Imagery, gradients, video\u003C/td>\u003Ctd>A minute\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>An extractor\u003C/td>\u003Ctd>All of the above, sorted\u003C/td>\u003Ctd>Anything at scale\u003C/td>\u003Ctd>Seconds\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/div>\n\u003Cp>The first three are manual and free. The fourth is what this site does, and the honest reason to reach for it is volume. One site is a five-minute job, and forty sites is a week.\u003C/p>\n\u003Ch2 id=\"method-1-the-devtools-eyedropper\">\u003Ca class=\"heading-anchor\" href=\"#method-1-the-devtools-eyedropper\" aria-label=\"Link to this section\">#\u003C/a>Method 1: the DevTools eyedropper\u003C/h2>\n\u003Cp>The fastest answer to "what is \u003Cem>that\u003C/em> color". Open DevTools, inspect the element, click the color swatch next to any color property, and use the picker that opens.\u003C/p>\n\u003Caside class=\"callout\">\n  \u003Cstrong>Watch the alpha channel.\u003C/strong> The eyedropper reports the pixel on\n  screen, which is the color \u003Cem>after\u003C/em> compositing. A button declared as\n  \u003Ccode>rgba(99, 102, 241, 0.9)\u003C/code> over a white page samples as\n  \u003Ccode>#7377F3\u003C/code>, a color that appears nowhere in the brand's guidelines\n  and will look wrong the moment you place it on a dark background.\n\u003C/aside>\n\u003Cp>So the eyedropper answers "what pixel is this", which is a different question from "what color did they specify". Most of the time you want the second one.\u003C/p>\n\u003Ch2 id=\"method-2-read-the-stylesheet\">\u003Ca class=\"heading-anchor\" href=\"#method-2-read-the-stylesheet\" aria-label=\"Link to this section\">#\u003C/a>Method 2: read the stylesheet\u003C/h2>\n\u003Cp>This is the method that gives you the brand's own vocabulary rather than your guess at it. Modern sites declare their palette as custom properties near the top of the document, and those names are the design system:\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cspan class=\"code-lang\" aria-hidden=\"true\">css\u003C/span>\u003Cpre>\u003Ccode class=\"language-css\">:root {\n  --color-brand-primary: #6366f1;\n  --color-brand-accent: #22d3ee;\n  --color-surface: #030712;\n  --color-text-muted: #9ca3af;\n}\u003C/code>\u003C/pre>\u003C/div>\n\u003Cp>To find them, open DevTools, select \u003Ccode><html>\u003C/code> in the elements panel, and scroll the Computed styles pane to the bottom, where every custom property in scope is listed with its resolved value. Or run this in the console to dump every variable the page defines:\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cspan class=\"code-lang\" aria-hidden=\"true\">js\u003C/span>\u003Cpre>\u003Ccode class=\"language-js\">const styles = getComputedStyle(document.documentElement)\nArray.from(styles)\n  .filter((name) => name.startsWith('--'))\n  .map((name) => `${name}: ${styles.getPropertyValue(name).trim()}`)\n  .forEach((line) => console.log(line))\u003C/code>\u003C/pre>\u003C/div>\n\u003Cp>You get names as well as values, and names are what tell you a color's \u003Cem>job\u003C/em>. \u003Ccode>--color-brand-primary\u003C/code> is a promise about where that color belongs; \u003Ccode>#6366f1\u003C/code> on its own is just a number.\u003C/p>\n\u003Ch3 id=\"what-this-method-misses\">\u003Ca class=\"heading-anchor\" href=\"#what-this-method-misses\" aria-label=\"Link to this section\">#\u003C/a>What this method misses\u003C/h3>\n\u003Cp>Three things, and they're the reason it isn't the whole answer:\u003C/p>\n\u003Cul>\u003Cli>\u003Cstrong>Colors inside images.\u003C/strong> A logo's exact orange lives in an SVG or a PNG, not in the CSS.\u003C/li>\u003Cli>\u003Cstrong>Gradients and overlays.\u003C/strong> What renders is a blend the stylesheet never names.\u003C/li>\u003Cli>\u003Cstrong>Colors declared in components you haven't loaded.\u003C/strong> A dark-mode-only or logged-in-only token won't be in scope on the homepage.\u003C/li>\u003C/ul>\n\u003Ch2 id=\"method-3-sample-a-screenshot\">\u003Ca class=\"heading-anchor\" href=\"#method-3-sample-a-screenshot\" aria-label=\"Link to this section\">#\u003C/a>Method 3: sample a screenshot\u003C/h2>\n\u003Cp>Take a full-page screenshot and run it through a color quantizer. This is the only method that captures what a visitor \u003Cem>actually sees\u003C/em>, including the colors in photography, in video posters, and in gradients that no stylesheet mentions.\u003C/p>\n\u003Cp>It's also the method most likely to hand you something useless. A hero photo of a blue sky will dominate the results and tell you a company's brand color is \u003Ccode>#8EC5E8\u003C/code>, which it is not. Screenshot sampling answers "what is this page made of", not "what does this brand stand for". Treat it as evidence, not as an answer.\u003C/p>\n\u003Ch2 id=\"method-4-use-an-extractor\">\u003Ca class=\"heading-anchor\" href=\"#method-4-use-an-extractor\" aria-label=\"Link to this section\">#\u003C/a>Method 4: use an extractor\u003C/h2>\n\u003Cp>An extractor runs all three passes at once and, crucially, keeps their results \u003Cem>separate\u003C/em> rather than averaging them into one pile. That separation is the whole value:\u003C/p>\n\u003Cdiv class=\"swatch-row\">\n  \u003Cspan class=\"swatch\" style=\"--swatch: #6366F1\">Brand\u003Cbr />#6366F1\u003C/span>\n  \u003Cspan class=\"swatch\" style=\"--swatch: #22D3EE; --swatch-ink: #030712\">Code\u003Cbr />#22D3EE\u003C/span>\n  \u003Cspan class=\"swatch\" style=\"--swatch: #030712\">Screenshot\u003Cbr />#030712\u003C/span>\n\u003C/div>\n\u003Cul>\u003Cli>\u003Cstrong>Brand colors.\u003C/strong> The small set from the logo and the primary interface. The three or four you'd actually name if someone asked.\u003C/li>\u003Cli>\u003Cstrong>Code colors.\u003C/strong> Everything declared in the stylesheets, grouped by family. The full system, including the shades you'd otherwise miss.\u003C/li>\u003Cli>\u003Cstrong>Screenshot colors.\u003C/strong> What rendered, including imagery and gradients.\u003C/li>\u003C/ul>\n\u003Cp>You can \u003Ca href=\"/\">run this on any URL\u003C/a> in a few seconds, or browse \u003Ca href=\"/brand-colors\">the brand colors of the world's most-visited sites\u003C/a>, which are already extracted and sitting there as copyable hex codes. If you find yourself doing it constantly, the \u003Ca href=\"/browser-extension\">browser extension\u003C/a> does it for the tab you're on without leaving the page.\u003C/p>\n\u003Ch2 id=\"which-one-to-use\">\u003Ca class=\"heading-anchor\" href=\"#which-one-to-use\" aria-label=\"Link to this section\">#\u003C/a>Which one to use\u003C/h2>\n\u003Col>\u003Cli>\u003Cstrong>One element, right now.\u003C/strong> Eyedropper. Just remember what alpha does.\u003C/li>\u003Cli>\u003Cstrong>Rebuilding a design system.\u003C/strong> Read the CSS. You want the names.\u003C/li>\u003Cli>\u003Cstrong>Matching a marketing asset to a live page.\u003C/strong> Screenshot sampling, because that's the comparison your eye will make.\u003C/li>\u003Cli>\u003Cstrong>More than a handful of sites.\u003C/strong> An extractor, because the manual methods don't scale and the arithmetic is brutal: thirty sites at five minutes each is most of a day.\u003C/li>\u003C/ol>\n\u003Cblockquote>\u003Cp>The mistake worth avoiding is treating any single number as \u003Cem>the\u003C/em> brand color. A brand is a small set of colors with defined roles and defined relationships. Pull the set, keep the roles, and the result holds up when you put it on a background nobody planned for.\u003C/p>\u003C/blockquote>\n\u003Chr />\n\u003Ch2 id=\"getting-the-codes-into-your-tools\">\u003Ca class=\"heading-anchor\" href=\"#getting-the-codes-into-your-tools\" aria-label=\"Link to this section\">#\u003C/a>Getting the codes into your tools\u003C/h2>\n\u003Cp>However you extracted them, you'll want them somewhere other than a browser tab. Hex is universal, but most design tools prefer their own format, and a palette exported as an \u003Ccode>.ase\u003C/code> or \u003Ccode>.gpl\u003C/code> file drops straight into Adobe apps, Figma, Sketch, GIMP and Procreate with the names intact.\u003C/p>\n\u003Cp>That last part matters more than it sounds. A swatch called \u003Ccode>brand/primary\u003C/code> survives being handed to someone else; a swatch called \u003Ccode>#6366F1\u003C/code> doesn't.\u003C/p>","content/blog/how-to-extract-brand-colors-from-any-website.md","/blog/how-to-extract-brand-colors-from-any-website",[56,72,87],{"slug":57,"title":58,"description":59,"excerpt":60,"date":61,"updated":9,"status":11,"author":12,"authorTitle":10,"category":62,"categoryName":63,"categoryAccent":64,"tags":65,"image":67,"cover":68,"imageAlt":10,"featured":69,"readingMinutes":70,"path":71},"colorize-vs-site-palette","Colorize vs Site Palette: Which Extractor to Use","Both tools pull colors off a live site. What differs is where you run them, what counts as a palette, and what you can take away.","Site Palette and Colorize solve the same sentence (\"get me the colors this website uses\") from opposite ends. Site Palette is a browser extension: you sign in, install it, and it quantizes what is…","2026-08-22T09:00:00.000Z","comparisons","Comparisons","#34D399",[17,18,66],"comparison","/social/blog/colorize-vs-site-palette.png","/social/blog/colorize-vs-site-palette-cover.png",false,9,"/blog/colorize-vs-site-palette",{"slug":73,"title":74,"description":75,"excerpt":76,"date":77,"updated":10,"status":11,"author":12,"authorTitle":10,"category":78,"categoryName":79,"categoryAccent":80,"tags":81,"image":83,"cover":84,"imageAlt":10,"featured":69,"readingMinutes":85,"path":86},"extract-brand-colors-from-modern-css","How to Extract Brand Colors From Modern CSS","Regex over stylesheets used to be a fine way to collect a site's colors. CSS Color 4 and 5 ended that. Here is what to read instead of source text.","For about fifteen years you could collect every color a website used with three regular expressions. One for hex, one for rgb() and rgba(), one for hsl() and hsla(). Between them they matched…","2026-08-21T09:00:00.000Z","engineering","Engineering","#22D3EE",[19,17,82],"color theory","/social/blog/extract-brand-colors-from-modern-css.png","/social/blog/extract-brand-colors-from-modern-css-cover.png",5,"/blog/extract-brand-colors-from-modern-css",{"slug":88,"title":89,"description":90,"excerpt":91,"date":61,"updated":10,"status":11,"author":12,"authorTitle":10,"category":92,"categoryName":93,"categoryAccent":94,"tags":95,"image":97,"cover":98,"imageAlt":10,"featured":69,"readingMinutes":99,"path":100},"extract-dominant-colors-from-a-logo","The Best Way to Extract Dominant Colors From a Logo","Median cut, octree and k-means were built to compress photographs. Point them at a logo and they return three whites and a gray. Here is what works instead.","Reach for a color extraction library and you will almost certainly get median cut, usually through ColorThief or one of its ports. Feed it a photograph and it does a genuinely good job. Feed it a logo…","color-theory","Color Theory","#E879F9",[17,96,82],"logos","/social/blog/extract-dominant-colors-from-a-logo.png","/social/blog/extract-dominant-colors-from-a-logo-cover.png",6,"/blog/extract-dominant-colors-from-a-logo",{"slug":57,"title":58,"description":59,"excerpt":60,"date":61,"updated":9,"status":11,"author":12,"authorTitle":10,"category":62,"categoryName":63,"categoryAccent":64,"tags":102,"image":67,"cover":68,"imageAlt":10,"featured":69,"readingMinutes":70,"path":71},[17,18,66],null,1787496473231]