[{"data":1,"prerenderedAt":107},["ShallowReactive",2],{"blog-colorize-vs-site-palette":3},{"post":4,"related":58,"previous":103,"next":105},{"slug":5,"title":6,"description":7,"excerpt":8,"date":9,"updated":10,"status":11,"author":12,"authorTitle":13,"category":14,"categoryName":15,"categoryAccent":16,"tags":17,"image":21,"cover":22,"imageAlt":13,"featured":23,"readingMinutes":24,"wordCount":25,"headings":26,"html":55,"canonicalUrl":13,"sourceFile":56,"path":57},"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","2026-08-23T09:00:00.000Z","published","Colorize","","comparisons","Comparisons","#34D399",[18,19,20],"brand colors","workflow","comparison","/social/blog/colorize-vs-site-palette.png","/social/blog/colorize-vs-site-palette-cover.png",false,9,2013,[27,31,34,37,40,43,46,49,52],{"id":28,"text":29,"level":30},"the-short-answer","The short answer",2,{"id":32,"text":33,"level":30},"what-it-costs","What it costs",{"id":35,"text":36,"level":30},"signing-in-is-not-optional","Signing in is not optional",{"id":38,"text":39,"level":30},"you-do-not-have-to-pick-a-surface","You do not have to pick a surface",{"id":41,"text":42,"level":30},"what-each-one-counts-as-a-palette","What each one counts as a palette",{"id":44,"text":45,"level":30},"exports-and-handoff","Exports and handoff",{"id":47,"text":48,"level":30},"saving-and-sharing","Saving and sharing",{"id":50,"text":51,"level":30},"doing-it-programmatically","Doing it programmatically",{"id":53,"text":54,"level":30},"which-one-to-use","Which one to use","\u003Cp>\u003Ca href=\"https://palette.site/\" target=\"_blank\" rel=\"noopener\">Site Palette\u003C/a> and \u003Ca href=\"/\">Colorize\u003C/a> 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 rendered in front of you. Colorize is a URL box: you paste an address from anywhere, and it pulls the brand colors, the logo, the stylesheet palette and a screenshot palette as four separate sets. If you want the toolbar workflow instead, the extension is there too.\u003C/p>\n\u003Cp>Neither is a worse version of the other. They answer different questions, and the one you want depends on whether you are looking at one page right now or at a list of forty sites you have never opened.\u003C/p>\n\u003Ch2 id=\"the-short-answer\">\u003Ca class=\"heading-anchor\" href=\"#the-short-answer\" aria-label=\"Link to this section\">#\u003C/a>The short answer\u003C/h2>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth scope=\"col\">\u003C/th>\u003Cth scope=\"col\">Site Palette\u003C/th>\u003Cth scope=\"col\">Colorize\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Where it runs\u003C/td>\u003Ctd>Browser extension, on the tab you are viewing\u003C/td>\u003Ctd>URL box on the web \u003Cstrong>and\u003C/strong> a browser extension\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Install required\u003C/td>\u003Ctd>Yes\u003C/td>\u003Ctd>No, unless you want the extension\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Account\u003C/td>\u003Ctd>Required (sign-in is step one)\u003C/td>\u003Ctd>None to extract\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Result\u003C/td>\u003Ctd>One coherent palette, roughly six colors\u003C/td>\u003Ctd>Four sets: brand, logo, code, screenshot\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Source of the colors\u003C/td>\u003Ctd>The rendered page\u003C/td>\u003Ctd>Rendered page plus HTML, CSS and JS\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Exports\u003C/td>\u003Ctd>Figma plugin, Sketch, Adobe \u003Ccode>.ase\u003C/code>, SVG\u003C/td>\u003Ctd>CSS, SASS, SCSS, SVG, \u003Ccode>.ase\u003C/code>, \u003Ccode>.act\u003C/code>, \u003Ccode>.aco\u003C/code>, Sketch, GIMP, and more\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Price\u003C/td>\u003Ctd>$3/mo, $30/yr or $99 lifetime (1-day trial)\u003C/td>\u003Ctd>Free\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/div>\n\u003Ch2 id=\"what-it-costs\">\u003Ca class=\"heading-anchor\" href=\"#what-it-costs\" aria-label=\"Link to this section\">#\u003C/a>What it costs\u003C/h2>\n\u003Cp>This is the part most comparisons get wrong, including an earlier version of this one, so it is worth stating plainly.\u003C/p>\n\u003Cp>Site Palette is free to \u003Cem>install\u003C/em>. It is not free to \u003Cem>use\u003C/em> past the first day. Per \u003Ca href=\"https://palette.site/help\" target=\"_blank\" rel=\"noopener\">its own help pages\u003C/a>, you get a one-day trial covering the full feature set, after which the extractor sits behind a paid plan. At the time of writing that plan is offered as introductory pricing:\u003C/p>\n\u003Cul>\u003Cli>\u003Cstrong>$3 per month\u003C/strong> billed monthly\u003C/li>\u003Cli>\u003Cstrong>$30 per year\u003C/strong>, which is the $2.50/month the pricing page advertises\u003C/li>\u003Cli>\u003Cstrong>$99 once\u003C/strong> for a lifetime licence\u003C/li>\u003C/ul>\n\u003Cp>Two details worth knowing before you commit. The trial is twenty-four hours, not the fourteen or thirty days the word "trial" usually implies. Install it on a Friday evening and get busy, and you have spent it. And the help pages state that no subscription is refundable, of any type. That is an unusual policy and a fair reason to spend the trial day deliberately rather than casually.\u003C/p>\n\u003Cp>Colorize is free, with no trial attached to that word. There is no plan to choose, no card to enter, and no expiry on the extractor, on the web or in the extension.\u003C/p>\n\u003Caside class=\"callout\">\n  \u003Cstrong>Read the label.\u003C/strong> \"Free browser extension\" and \"free to install\"\n  are not the same claim as \"free to use.\" When a tool advertises the first,\n  find the pricing page before you build a workflow on it.\n\u003C/aside>\n\u003Ch2 id=\"signing-in-is-not-optional\">\u003Ca class=\"heading-anchor\" href=\"#signing-in-is-not-optional\" aria-label=\"Link to this section\">#\u003C/a>Signing in is not optional\u003C/h2>\n\u003Cp>Site Palette's documented getting-started flow begins before the extension does: you sign in on the website with a magic link, \u003Cem>then\u003C/em> you add the extension from the store. A trial and a subscription both need an identity to attach to, so the account is structural rather than a nicety. There is no anonymous path through the tool. The sign-in itself is pleasant, to be fair: magic link by email, no password to invent.\u003C/p>\n\u003Cp>Colorize asks for nothing to extract colors. Paste a URL, get the palette, close the tab. Colorize does have accounts, but they exist for one unrelated thing (issuing API keys), and the color tools never touch them. If you only want a palette, you will never see a login screen.\u003C/p>\n\u003Cp>That difference is small on your own machine and large everywhere else: a locked-down work laptop, a shared machine, a client's computer, or a quick answer you need in the ninety seconds before a call.\u003C/p>\n\u003Ch2 id=\"you-do-not-have-to-pick-a-surface\">\u003Ca class=\"heading-anchor\" href=\"#you-do-not-have-to-pick-a-surface\" aria-label=\"Link to this section\">#\u003C/a>You do not have to pick a surface\u003C/h2>\n\u003Cp>This is the practical advantage, and it is easy to undersell because it sounds like a distribution detail rather than a feature.\u003C/p>\n\u003Cp>Site Palette lives in the toolbar, and the toolbar is the only place it lives. Its website handles sign-in and your saved palettes; the extraction itself happens in the extension, on a page you have open. If the page is not in a tab, there is nothing to read.\u003C/p>\n\u003Cp>Colorize runs both ways, on the same free tier:\u003C/p>\n\u003Cul>\u003Cli>\u003Cstrong>The web app\u003C/strong> takes a URL. You can extract a site you have never visited, a competitor you would rather not load in a logged-in browser profile, or thirty companies from a spreadsheet, without opening any of them. That works in any browser, including one you cannot install extensions into.\u003C/li>\u003Cli>\u003Cstrong>The \u003Ca href=\"/browser-extension\">browser extension\u003C/a>\u003C/strong> does the one-click job on the tab in front of you, reading the page's own sources locally and adding an eyedropper.\u003C/li>\u003C/ul>\n\u003Cp>So the answer to "which workflow does it support" is \u003Cem>both\u003C/em>, and you switch between them by task rather than by tool. The URL box for research and lists, the toolbar for the page you are reading right now.\u003C/p>\n\u003Caside class=\"callout\">\n  \u003Cstrong>The practical test.\u003C/strong> Are you looking at the page right now?\n  Either tool works. Do you have a list of sites and no intention of visiting\n  them one by one? Only the URL approach scales.\n\u003C/aside>\n\u003Cp>There is a third path that neither tool needs to run at all. For popular sites, \u003Ca href=\"/brand-colors\">the brand colors directory\u003C/a> already has the extraction done and sitting on a static page: hex codes, logo, screenshot and the full CSS palette, no tool involved.\u003C/p>\n\u003Cp>One honest concession: Site Palette ships for Firefox and Safari as well as Chrome. The Colorize extension is Chromium-only: Chrome, Brave, Edge, Arc, Opera and Vivaldi. If you live in Firefox or Safari and specifically want a toolbar button, that is a real point in Site Palette's favor. The Colorize web app still works in those browsers; the extension does not exist there yet.\u003C/p>\n\u003Ch2 id=\"what-each-one-counts-as-a-palette\">\u003Ca class=\"heading-anchor\" href=\"#what-each-one-counts-as-a-palette\" aria-label=\"Link to this section\">#\u003C/a>What each one counts as a palette\u003C/h2>\n\u003Cp>This is the real difference, and it is easy to miss because both tools hand you a row of swatches.\u003C/p>\n\u003Cp>Site Palette runs quantization over the rendered page and returns a small, coherent set, usually around six colors, offering several algorithms so you can pick whichever grouping reads best: Color Cube, Median Cut and a Material Design mode, plus a live viewport extract. That output is a design artifact: a palette someone can look at and use, chosen for coherence.\u003C/p>\n\u003Cp>Colorize keeps the sources apart instead of merging them:\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 named set from the logo and primary interface.\u003C/li>\u003Cli>\u003Cstrong>Logo colors\u003C/strong>, pulled from the mark itself rather than from the page around it.\u003C/li>\u003Cli>\u003Cstrong>Code colors\u003C/strong>, every value declared across the HTML, CSS and JavaScript, grouped by family. On a mature site this runs well past a hundred entries.\u003C/li>\u003Cli>\u003Cstrong>Screenshot colors\u003C/strong>, what a visitor actually sees, imagery and gradients included.\u003C/li>\u003C/ul>\n\u003Cp>That separation is the point. A color that appears in the stylesheet but never on the homepage is still part of the design system, and a color that dominates a hero photo is not a brand color no matter how much of the screen it occupies. Merging the two sets loses information that you often need. We wrote about why these methods disagree in \u003Ca href=\"/blog/how-to-extract-brand-colors-from-any-website\">how to extract brand colors from any website\u003C/a>.\u003C/p>\n\u003Cp>The tradeoff is honest in both directions. Six curated colors are easier to hand to a client than a hundred and fifty grouped by hue. If what you want is a palette to look at, the smaller set is friendlier. If what you want is to rebuild a design system without missing the shade used only in the disabled state, the long list is the one that helps.\u003C/p>\n\u003Ch2 id=\"exports-and-handoff\">\u003Ca class=\"heading-anchor\" href=\"#exports-and-handoff\" aria-label=\"Link to this section\">#\u003C/a>Exports and handoff\u003C/h2>\n\u003Cp>Site Palette's strongest card here is Figma. It ships an official plugin that imports a saved palette straight in as local variables, which is exactly where most product design work happens now. It also offers a Sketch template, Adobe \u003Ccode>.ase\u003C/code>, SVG, and handoffs to Google Art Palette and Coolors for tuning. Note that its own documentation lists the advanced export formats among the things a paid plan unlocks, so price the workflow, not just the extraction.\u003C/p>\n\u003Cp>Colorize covers more formats but stops at the file. Everything is generated in your browser, so the palette never touches a server on the way out:\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cspan class=\"code-lang\" aria-hidden=\"true\">css\u003C/span>\u003Cpre>\u003Ccode class=\"language-css\">:root {\n  --brand-primary: #6366f1;\n  --brand-accent: #22d3ee;\n  --surface: #030712;\n}\u003C/code>\u003C/pre>\u003C/div>\n\u003Cp>The list runs CSS variables, SASS, SCSS, SVG, Adobe Swatch Exchange (\u003Ccode>.ase\u003C/code>), Adobe Color Table (\u003Ccode>.act\u003C/code>), Adobe Color Swatch (\u003Ccode>.aco\u003C/code>), Sketch Palette, GIMP (\u003Ccode>.gpl\u003C/code>), Paint.NET, Paint Shop Pro, StarOffice and Skencil. If your tool predates Figma, there is probably a format for it.\u003C/p>\n\u003Cp>So: if the palette is going into Figma, Site Palette has the shorter road. If it is going into a stylesheet, an Adobe app, or something older than both, the longer format list wins, and it is not gated behind a plan.\u003C/p>\n\u003Ch2 id=\"saving-and-sharing\">\u003Ca class=\"heading-anchor\" href=\"#saving-and-sharing\" aria-label=\"Link to this section\">#\u003C/a>Saving and sharing\u003C/h2>\n\u003Cp>Site Palette has a real account layer, and it is the thing your subscription is most visibly buying. Palettes save to your profile, sync across devices, and each one gets a shareable link. There is a documented API at \u003Ccode>api.palette.site\u003C/code> for listing, fetching and deleting them.\u003C/p>\n\u003Cp>Colorize stores nothing from an extraction. Every run is fresh and disappears when you close the tab. That is a deliberate choice with a real cost: there is no "my palettes" page, and if you want to keep a result, you export it. For a recurring workflow across a team that wants one shared library, the saved profile is the better fit. For a one-off lookup, a sign-in and a subscription are a lot of ceremony for six hex codes.\u003C/p>\n\u003Ch2 id=\"doing-it-programmatically\">\u003Ca class=\"heading-anchor\" href=\"#doing-it-programmatically\" aria-label=\"Link to this section\">#\u003C/a>Doing it programmatically\u003C/h2>\n\u003Cp>If your goal is to extract colors from code, this is where the two diverge completely.\u003C/p>\n\u003Cp>Site Palette's published OpenAPI specification covers session handling and saved-palette management: sign in, fetch your profile, list a palette, delete a palette. There is no extraction endpoint in it. Extraction happens in the extension, on a page you have open.\u003C/p>\n\u003Cp>Colorize's generator is not an API either. It sits behind a human check and every run is metered, which is why \u003Ccode>/api/*\u003C/code> is disallowed in robots.txt. The programmatic path is the \u003Ca href=\"https://docs.prefetch.io/\" target=\"_blank\" rel=\"noopener\">Prefetch API\u003C/a>, the same service that powers the site, which takes a URL and returns colors, logo, fonts and company data with an API key. Point a script at that, not at the web tool.\u003C/p>\n\u003Cblockquote>\u003Cp>The rule of thumb: extension APIs are for what you already collected, and extraction APIs are for what you have not looked at yet. Check which one a tool actually offers before you plan a pipeline around it.\u003C/p>\u003C/blockquote>\n\u003Chr />\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>You are on a page and want its colors now.\u003C/strong> Either. Site Palette if you have already paid for it, the Colorize extension if you want the same click with the four-way split behind it.\u003C/li>\u003Cli>\u003Cstrong>You have a list of URLs.\u003C/strong> Colorize, because you never have to open them.\u003C/li>\u003Cli>\u003Cstrong>The palette is going into Figma.\u003C/strong> Site Palette, for the local variables plugin.\u003C/li>\u003Cli>\u003Cstrong>You are rebuilding a design system.\u003C/strong> Colorize, for the full declared palette rather than a curated six.\u003C/li>\u003Cli>\u003Cstrong>You want a shared library your team comes back to.\u003C/strong> Site Palette, if the subscription is worth it to you.\u003C/li>\u003Cli>\u003Cstrong>You are in Firefox or Safari and want a toolbar button.\u003C/strong> Site Palette; the Colorize extension is Chromium-only, though the web app works anywhere.\u003C/li>\u003Cli>\u003Cstrong>You need this once, today, on someone else's machine.\u003C/strong> Colorize: nothing to install, nothing to sign into, nothing to pay.\u003C/li>\u003Cli>\u003Cstrong>You need this in a script.\u003C/strong> Neither web tool. Use an extraction API.\u003C/li>\u003Cli>\u003Cstrong>The site is well known.\u003C/strong> Check \u003Ca href=\"/brand-colors\">the brand colors directory\u003C/a> first and skip the extraction entirely.\u003C/li>\u003C/ol>\n\u003Cp>Installing one does not stop you using the other, and the sensible setup for most people is an extension in the toolbar for the page in front of them and a URL box bookmarked for everything else. The only thing that changes that arithmetic is the bill: one of these two gives you both halves of that setup without one.\u003C/p>","content/blog/colorize-vs-site-palette.md","/blog/colorize-vs-site-palette",[59,74,89],{"slug":60,"title":61,"description":62,"excerpt":63,"date":10,"updated":13,"status":11,"author":12,"authorTitle":13,"category":64,"categoryName":65,"categoryAccent":66,"tags":67,"image":69,"cover":70,"imageAlt":13,"featured":71,"readingMinutes":72,"path":73},"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…","guides","Guides","#818CF8",[18,19,68],"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,"/blog/how-to-extract-brand-colors-from-any-website",{"slug":75,"title":76,"description":77,"excerpt":78,"date":9,"updated":13,"status":11,"author":12,"authorTitle":13,"category":79,"categoryName":80,"categoryAccent":81,"tags":82,"image":85,"cover":86,"imageAlt":13,"featured":23,"readingMinutes":87,"path":88},"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",[18,83,84],"logos","color theory","/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":90,"title":91,"description":92,"excerpt":93,"date":94,"updated":13,"status":11,"author":12,"authorTitle":13,"category":95,"categoryName":96,"categoryAccent":97,"tags":98,"image":99,"cover":100,"imageAlt":13,"featured":23,"readingMinutes":101,"path":102},"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",[68,18,84],"/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":75,"title":76,"description":77,"excerpt":78,"date":9,"updated":13,"status":11,"author":12,"authorTitle":13,"category":79,"categoryName":80,"categoryAccent":81,"tags":104,"image":85,"cover":86,"imageAlt":13,"featured":23,"readingMinutes":87,"path":88},[18,83,84],{"slug":60,"title":61,"description":62,"excerpt":63,"date":10,"updated":13,"status":11,"author":12,"authorTitle":13,"category":64,"categoryName":65,"categoryAccent":66,"tags":106,"image":69,"cover":70,"imageAlt":13,"featured":71,"readingMinutes":72,"path":73},[18,19,68],1787496473237]