Sitepeel
Add to Chrome

Free color palette generator

Get the color palette from any website.

Paste a link to get a site’s real colors, or press Generate for a new palette.

Try

Color palette extractor for any website

To get the color palette from a website, paste its link into Sitepeel’s free color palette extractor. It measures the colors the page really uses, groups them by role and shows how much of the screen each covers. Copy any hex code, or export the palette as CSS variables, Tailwind, SCSS or JSON.

Export the color scheme to CSS or Tailwind

Every palette, from a website or the generator, exports in the format you build with.

  • CSS variablesNamed like DESIGN.md tokens, such as --color-primary-500, with the other theme one switch away.
  • Tailwind v4 and v3An @theme block for v4 or a config for v3, with 50 to 950 shades of each brand color.
  • SCSS and JSON tokensSCSS variables, or JSON design tokens in the W3C format.
  • SVG for FigmaCopy it and paste into Figma: the colors land as swatches.
  • PNG imageA sharp picture of the palette with names and hex codes, ready to share.
  • The whole design systemColors with the type, spacing and components, as a DESIGN.md for your AI agent.

How to get the color palette of a website

  1. Paste the link

    Paste the website’s link and press Get palette.

  2. See its colors

    Each color in its role, how much of the screen it covers, a live preview and a contrast check.

  3. Copy or export

    Copy any color, or export CSS, Tailwind, SCSS, design tokens, SVG or PNG.

Also in the Chrome extension

Extract colors from any tab

Pick colors on the page you have open, including pages behind a login, and export the palette as CSS or JSON.

Add to ChromeSee the extension

FAQ

Questions about the color palette generator

What is a color palette generator?

A tool that makes sets of colors that work together. Press Generate for a new palette in a style like analogous, pastel or dark UI, or get the real palette of any website.

How do I get the color palette of a website?

Paste the link and press Get palette. You get the colors the page actually uses, grouped by role, ready to copy. Our guide shows how to extract a website’s colors.

How is a website’s palette found?

Sitepeel loads the page, measures the colors that are actually used and groups them by role: backgrounds, text, accents and borders. It also measures how much of the first screen each color covers.

Can I use the colors in Tailwind?

Yes. Export a Tailwind v4 theme or a v3 config, CSS variables, SCSS or JSON design tokens. Brand colors get a full 50 to 950 shade scale, and one switch adds a dark (or light) version of the theme.

Does Chrome have a built-in color picker?

Yes. In DevTools, click any color swatch in the Styles pane to open a picker with an eyedropper. It shows one color at a time; this tool gives you the whole palette at once.

Are the palettes accessible?

A website’s text colors are checked against the backgrounds they sit on (WCAG 2.2), and a pair that fails gets the nearest color that passes. Generated palettes get a contrast grid of every pair.

Can I get the whole design system?

Yes. The DESIGN.md generator collects the type, spacing and components along with the colors.

Is the color palette generator free?

Yes. It is free, with no sign-in and no install. Other tools are in color palette extractors compared.

Is it an alternative to ColorZilla?

ColorZilla picks one color at a time. This gives you the whole palette, grouped by role, ready for CSS or Tailwind. See ColorZilla alternatives compared.

More free tools

All free tools
01 · DesignDESIGN.md generatorTurn any website into a detailed DESIGN.md for AI coding agents.02 · CloneClone promptTurn any website into one prompt that rebuilds it in Antigravity, Cursor or Claude Code, assets and all.03 · ReviewAI slop checkerSee if a website looks AI-generated, what gives it away and how to fix it.04 · AssetsAsset extractorDownload every image, SVG, video, 3D model and animation from a website.05 · LayoutResponsive checkerSee a website on phones, tablets, laptops and monitors at once, and find what breaks.06 · CaptureWebsite screenshotFull-page screenshots of any website, framed and ready to share.07 · TypeWhat font is this?Find every font a website uses, with weights, sizes and where to get them.09 · StackWhat is it built with?See the framework, hosting, fonts, colors and tools behind any website.