← Nazaj na funkcije
Free

Barvna paleta

Barvna paleta pregleda vsak element in izvleče celoten nabor uporabljenih barv, razvrščenih po pogostosti.

Every well-designed website has a consistent color palette — usually 3-8 primary colors plus some neutrals. Color Palette extracts this palette automatically by scanning every element's computed color, background-color, border-color, and box-shadow values. The result is a frequency-sorted collection of every color on the page, giving you the complete picture of the site's color system. Dominant colors (the primary brand color, background color, text color) appear first with high usage counts. Accent colors and one-off values appear further down. This is invaluable for design research — visit any website and extract its exact color palette in seconds. It's also useful for auditing your own site: are there stray colors that don't belong to your design system? Are you using 5 slightly different shades of gray when the design spec defines only 3? Color Palette makes the entire color usage visible and countable.

Predogled v živo
example.com
Extracted Palette — 8 colors Export All
#7c3aed
42 uses
#0f0f1a
38 uses
#e8e8f0
31 uses
#4ade80
14 uses
#1a1a2e
28 uses
#ef4444
6 uses
#f59e0b
5 uses
#3b82f6
4 uses
Ključne lastnosti

Automatic Full-Page Extraction

Scans every visible element on the page and extracts colors from computed properties: color, background-color, border-color, box-shadow color, outline-color, and text-decoration-color. Every color used on the page is captured.

Frequency-Sorted Swatches

Colors are sorted by usage count — the most-used color appears first. Dominant brand colors and backgrounds rise to the top, while one-off accent colors appear last. Instantly see the page's primary, secondary, and accent colors.

Visual Color Swatches

Each color is rendered as a large visual swatch with its HEX code and usage count displayed below. The swatches are large enough to distinguish subtle shade differences (like #333 vs #2a2a2a).

One-Click Copy

Click any color swatch to copy its HEX value to your clipboard immediately. No need to open a color panel or secondary dialog — one click, copied, done.

Export Full Palette

Click "Export All" to copy the entire palette as a formatted list of HEX color codes. Paste into a design tool, CSS variables file, or color documentation. The list preserves the frequency sort order.

De-Duplicated & Normalized

Colors are normalized (rgb and hex representations of the same color are merged) and de-duplicated. The palette shows unique colors only, with combined usage counts for duplicate representations.

Pogosti primeri uporabe

Design Research & Inspiration

Visit websites with beautiful color schemes and extract their exact palette. Use the colors as a starting point for your own design — or simply document which color combinations work well together.

Brand Color Auditing

Run Color Palette on your own site to verify brand color consistency. Are there 4 slightly different blues where there should be 1? Are off-brand colors creeping in? The frequency sort makes inconsistencies obvious.

Creating CSS Custom Properties

Export the palette and convert it into CSS custom properties (--color-primary, --color-secondary, etc.). The frequency-sorted output tells you which colors deserve primary, secondary, and accent roles.

Competitor Color Analysis

Extract color palettes from competitor websites to understand their brand positioning. Warm colors vs cool colors, high contrast vs muted — the palette reveals intentional design choices.

Accessibility Color Review

See all text colors alongside background colors. Are any text-background combinations too low contrast? The palette gives you the full set of colors to check against WCAG contrast requirements.

Kako uporabljati
1

Activate Color Palette

Open the DevSuite Pro floating dock and click the Color Palette icon. The tool scans every element on the page and extracts all color values.

2

Browse Extracted Colors

A grid of color swatches appears, sorted by usage frequency. The most-used colors are at the top. Each swatch shows the HEX code and number of elements using that color.

3

Click to Copy Individual Colors

Click any swatch to copy its HEX value to your clipboard. A brief confirmation appears.

4

Export the Full Palette

Click "Export All" to copy every color as a formatted list. Paste into your CSS variables file, design tool, or documentation.

5

Compare Across Pages

Navigate to different pages on the same site and extract palettes to verify color consistency across the site.

Pripravljeni na poskus? Barvna paleta?

Namestite DevSuite Pro brezplačno in odklenite več kot 39 orodij za razvijalce za svoj brskalnik.

Dodaj v Chrome Dodaj v Edge Dodaj v FireFox