How to Extract Color Palette From a Website?

You land on a competitor's website or a beautiful Dribbble portfolio, and the aesthetic completely blows you away. It's not just the button color that looks great—it's the exact harmony between the dark background, the subtle gray text, and the vibrant primary accent. You don't just want one color; you want the entire color palette.

Extracting a complete color palette from a website is incredibly useful for competitor analysis, building mood boards, and finding UI inspiration. Rather than using a basic eyedropper tool 10 different times to guess the structure, modern designers use automated tools, CSS root variables, and image scanners to grab the entire 5-color scheme in seconds.

In this guide, we will show you exactly how to steal like an artist. We will cover the best Chrome extensions, the hidden CSS :root trick, and provide a raw JavaScript code snippet to scrape colors from any DOM. Want to try it instantly? Paste a screenshot of any website into our scanner below!

✨ Try It: Website Palette Extractor Simulator

Click any generated color swatch to instantly copy its HEX code. Note: Screenshot scanning happens 100% locally in your browser for total privacy.

✦ Why Extract a Full Palette? (The 60-30-10 Rule)

Picking a single primary color is easy, but making it look good is hard. Great web design relies on balance, commonly known as the 60-30-10 Rule. When you extract a palette from a beautifully designed website, you aren't just getting colors; you are getting a proven, balanced mathematical ratio.

• 60% Background Colors: Usually deep darks or stark whites. This is the canvas.
• 30% Secondary/UI Colors: Used for sidebars, footer sections, and borders.
• 10% Accent Colors: Highly saturated, contrasting colors used exclusively for Call-to-Action (CTA) buttons and links.

By extracting the whole palette, you ensure that you grab the exact soft gray they used for text that perfectly complements their vibrant accent color, maintaining complete visual harmony.

🔌 Method 1: Chrome Extensions (The Fastest Way)

🛠️ Method 2: The DevTools :root Trick (No Extensions)

If you don't want to install extensions, you can find the entire palette hidden in plain sight. Modern websites (especially those built with React, Vue, or Tailwind) use CSS Custom Properties (Variables) to manage their themes. These are almost always stored in the :root element.

1. Right-click anywhere on the target website and click Inspect to open Chrome DevTools.
2. In the Elements tab, scroll to the very top of the DOM tree and click on the <html> tag.
3. Look at the Styles pane on the right side.
4. Scroll down until you see the :root { ... } block.
5. Boom! You will likely see a perfectly organized list of the entire palette, looking something like:
   --color-primary: #3b82f6;
--color-bg-dark: #0f172a;

📸 Method 3: Screenshot Palette Generators

Sometimes, a website's CSS is too obfuscated, or you only want the colors from a specific hero image or promotional banner. In this case, visual extraction is best.

Simply take a screenshot of the website (Cmd+Shift+4 on Mac, Win+Shift+S on Windows). Then, upload that screenshot to a tool like:

• Canva Color Palette Generator: Upload any image, and Canva instantly picks 4 dominant colors and provides their HEX codes.
• Coolors.co: The best palette generator on the internet. Their "Image Picker" tool lets you upload a screenshot and physically drag markers around to refine the automatically generated palette.
• Our Tool Above: We built a local canvas-based scanner in the interactive section above. Paste a screenshot, and it will calculate RGB distances to give you 5 distinct UI colors!

💻 Method 4: The JavaScript Console Scraper

Open Chrome DevTools, click on the Console tab, paste this code, and press Enter:

// Script to extract all unique background colors from a website
const colors = new Set();
document.querySelectorAll('*').forEach(el => {
  const bg = window.getComputedStyle(el).backgroundColor;
  // Ignore transparent backgrounds
  if (bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
    colors.add(bg);
  }
});
console.log([...colors]);

This script will output an array of RGB values. You can easily modify it to grab the color property for text colors as well. This is exactly how the basic Chrome extensions work under the hood!

⚖️ Is it Legal to Copy a Website's Color Palette?

When designers learn how to extract palettes, their first question is usually: Can I get sued for using Apple or Stripe's exact color scheme?

The Short Answer: Yes, it is legal.
Under US Copyright Law, you cannot copyright a raw HEX code, nor can you copyright a basic combination of colors. Colors are considered "building blocks" of nature and design.

Best Practice: Steal the palette, but change the typography, the layout, and the context. Use their brilliant color math as a foundation for your own unique design.

❓ Frequently Asked Questions