How to Extract a Color Palette from Any Website

Need to discover the color palette used on a competitor’s website? Want to export colors to your Tailwind CSS project? Or maybe you’re analyzing the visual consistency of your own site? In this article, I’ll show you how to quickly extract all colors from any website.

Why Extract Colors from a Website?

Color palette analysis is useful in many situations:

Website redesign - maintaining consistency with existing branding
Competitor analysis - understanding color schemes used in your industry
UI audit - checking how many colors are actually in use
Migration to utility CSS - exporting to Tailwind or UnoCSS
Design system documentation - cataloging used values

Traditional Methods (and Their Drawbacks)

DevTools - Manual Copying

You can open DevTools (F12), browse element styles, and copy colors one by one. The problem? On an average website, you’ll find dozens of colors scattered across hundreds of CSS rules.

Color Picker Extensions

They let you pick a color under the cursor, but you have to click each element separately. You won’t see the full palette picture.

CSS File Analysis

You can search CSS with regex, but:

Colors are in different formats (HEX, RGB, HSL, OKLCH)
Many colors are variants (hover, active, disabled)
You don’t know which colors are actually used on the page

UPER SEO Auditor - Automatic Extraction

The UPER SEO Auditor extension automatically analyzes all colors used on a page and presents them in a clear format.

How Does It Work?

Installation - download the extension from Chrome Web Store
Open a page - navigate to the website you want to analyze
Launch the panel - click the extension icon or use the keyboard shortcut
Go to the Stack tab - you’ll find the Design System section there

Color Palette in UPER SEO Auditor

What Will You See?

The extension displays:

Number of unique colors - badge with counter
Color swatches - visual samples with preview
Values in different formats - HEX, RGB, HSL, OKLCH
Copy functionality - with a single click

Exporting the Color Palette

The biggest advantage is the ability to export the entire palette to popular formats.

Export to Tailwind CSS

Click the export button and select the Tailwind format:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#1E40AF',
        'primary-light': '#3B82F6',
        'primary-dark': '#1E3A8A',
        'secondary': '#10B981',
        'accent': '#F59E0B',
        'background': '#F8FAFC',
        'text': '#1E293B',
        'text-muted': '#64748B',
      }
    }
  }
}

Export to UnoCSS

For UnoCSS users, the format is slightly different:

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  theme: {
    colors: {
      'primary': '#1E40AF',
      'primary-light': '#3B82F6',
      'primary-dark': '#1E3A8A',
      'secondary': '#10B981',
      'accent': '#F59E0B',
    }
  }
})

Export to CSS Variables

Prefer pure CSS? Export as custom properties:

:root {
  --color-primary: #1E40AF;
  --color-primary-light: #3B82F6;
  --color-primary-dark: #1E3A8A;
  --color-secondary: #10B981;
  --color-accent: #F59E0B;
  --color-background: #F8FAFC;
  --color-text: #1E293B;
  --color-text-muted: #64748B;
}

Typography and Breakpoints Analysis

Besides colors, the Design System section also shows:

Fonts Used on the Page

Font names (system, Google Fonts, custom)
Font stack fallbacks
Number of different font families

Text Size Scale

All font-size values used on the page
Sorted from smallest to largest
Identification of non-standard sizes

CSS Breakpoints

Detected media queries
Breakpoint values (min-width, max-width)
Comparison with popular frameworks

Practical Applications

1. Creating Design Tokens

Exported colors can be used as a foundation for design tokens:

// tokens/colors.js
export const colors = {
  brand: {
    primary: '#1E40AF',
    secondary: '#10B981',
  },
  ui: {
    background: '#F8FAFC',
    surface: '#FFFFFF',
    border: '#E2E8F0',
  },
  text: {
    primary: '#1E293B',
    secondary: '#64748B',
    disabled: '#94A3B8',
  }
}

2. Color Consistency Audit

Too many colors signal design system problems. If a site uses 50+ unique colors, there’s probably no consistent palette.

Best practice: A website should use 8-15 base colors plus their variants.

3. Legacy CSS Migration

When migrating an old project to Tailwind:

Export colors from the old site
Define them in tailwind.config.js
Gradually replace hardcoded values with utility classes

Color Formats - Which to Choose?

The extension converts colors between formats:

Format	Example	Use Case
HEX	`#1E40AF`	Most universal
RGB	`rgb(30, 64, 175)`	When you need alpha
HSL	`hsl(224, 71%, 40%)`	Easy variant creation
OKLCH	`oklch(0.45 0.15 264)`	Modern, perceptually uniform

OKLCH - The Future of CSS Colors

The OKLCH (Oklab Lightness Chroma Hue) format is gaining popularity because:

Lightness variants look natural
Easier to create harmonious palettes
Supports wider gamut (P3, Rec2020)

/* Creating variants in OKLCH is intuitive */
:root {
  --primary: oklch(0.45 0.15 264);
  --primary-light: oklch(0.65 0.15 264); /* Only L changes */
  --primary-dark: oklch(0.25 0.15 264);
}

Summary

Extracting a color palette from a website is a task that can be done manually, but automation saves hours of work. UPER SEO Auditor not only shows all colors but lets you export them in a format ready to use in your project.

Key features:

Automatic detection of all colors
Conversion between formats (HEX, RGB, HSL, OKLCH)
Export to Tailwind CSS, UnoCSS, CSS Variables
Typography and breakpoints analysis
Identification of potential consistency issues

Try UPER SEO Auditor and see what your website’s color palette looks like.

Sources

Tailwind CSS - Customizing Colors https://tailwindcss.com/docs/customizing-colors
UnoCSS - Theme Configuration https://unocss.dev/config/theme
OKLCH Color Space https://oklch.com/
CSS Color Level 4 Specification https://www.w3.org/TR/css-color-4/