Jak pobrać paletę kolorów strony internetowej

Potrzebujesz poznać paletę kolorów używaną na stronie konkurencji? Chcesz wyeksportować kolory do swojego projektu w Tailwind CSS? A może analizujesz spójność wizualną własnej strony? W tym artykule pokażę, jak szybko pobrać wszystkie kolory ze strony internetowej.

Po co ekstrahować kolory ze strony?

Analiza palety kolorów przydaje się w wielu sytuacjach:

Redesign strony - zachowanie spójności z istniejącą identyfikacją
Analiza konkurencji - poznanie kolorystyki używanej w branży
Audyt UI - sprawdzenie ile kolorów jest faktycznie używanych
Migracja do utility CSS - eksport do Tailwind lub UnoCSS
Dokumentacja design system - katalogowanie używanych wartości

Tradycyjne metody (i ich wady)

DevTools - ręczne kopiowanie

Możesz otworzyć DevTools (F12), przejrzeć style elementów i kopiować kolory jeden po drugim. Problem? Na średniej stronie znajdziesz dziesiątki kolorów rozsianych po setkach reguł CSS.

Rozszerzenia typu “Color Picker”

Pozwalają pobrać kolor spod kursora, ale musisz klikać każdy element osobno. Nie zobaczysz pełnego obrazu palety.

Analiza pliku CSS

Możesz przeszukać CSS regex’em, ale:

Kolory są w różnych formatach (HEX, RGB, HSL, OKLCH)
Wiele kolorów to warianty (hover, active, disabled)
Nie wiesz, które kolory są faktycznie używane na stronie

UPER SEO Auditor - automatyczna ekstrakcja

Rozszerzenie UPER SEO Auditor automatycznie analizuje wszystkie kolory używane na stronie i prezentuje je w przejrzystej formie.

Jak to działa?

Instalacja - pobierz rozszerzenie z Chrome Web Store
Otwórz stronę - przejdź na stronę, którą chcesz przeanalizować
Uruchom panel - kliknij ikonę rozszerzenia lub użyj skrótu
Przejdź do zakładki Stack - znajdziesz tam sekcję Design System

Paleta kolorów w UPER SEO Auditor

Co zobaczysz?

Rozszerzenie wyświetla:

Liczbę unikalnych kolorów - badge z countrem
Próbki kolorów - wizualne swatche z podglądem
Wartości w różnych formatach - HEX, RGB, HSL, OKLCH
Możliwość kopiowania - jednym kliknięciem

Eksport palety kolorów

Największą zaletą jest możliwość eksportu całej palety do popularnych formatów.

Eksport do Tailwind CSS

Kliknij przycisk eksportu i wybierz format Tailwind:

// 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',
      }
    }
  }
}

Eksport do UnoCSS

Dla użytkowników UnoCSS format jest lekko inny:

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

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

Eksport do zmiennych CSS

Preferujesz czyste CSS? Eksportuj jako 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;
}

Analiza typografii i breakpointów

Oprócz kolorów, sekcja Design System pokazuje również:

Czcionki używane na stronie

Nazwy fontów (system, Google Fonts, custom)
Font stack fallbacks
Liczba różnych rodzin czcionek

Skala rozmiarów tekstu

Wszystkie wartości font-size używane na stronie
Sortowanie od najmniejszego do największego
Identyfikacja niestandardowych rozmiarów

Breakpointy CSS

Wykryte media queries
Wartości breakpointów (min-width, max-width)
Porównanie z popularnymi frameworkami

Praktyczne zastosowania

1. Tworzenie tokenów projektowych

Wyeksportowane kolory możesz użyć jako bazę dla tokenów projektowych:

// 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. Audyt spójności kolorów

Zbyt wiele kolorów to znak problemów z design system. Jeśli strona używa 50+ unikalnych kolorów, prawdopodobnie brakuje spójnej palety.

Dobra praktyka: Strona powinna używać 8-15 kolorów bazowych plus ich warianty.

3. Migracja legacy CSS

Przy migracji starego projektu do Tailwind:

Wyeksportuj kolory ze starej strony
Zdefiniuj je w tailwind.config.js
Stopniowo zamieniaj hardcoded wartości na klasy utility

Formaty kolorów - który wybrać?

Rozszerzenie konwertuje kolory między formatami:

Format	Przykład	Zastosowanie
HEX	`#1E40AF`	Najbardziej uniwersalny
RGB	`rgb(30, 64, 175)`	Gdy potrzebujesz alpha
HSL	`hsl(224, 71%, 40%)`	Łatwe tworzenie wariantów
OKLCH	`oklch(0.45 0.15 264)`	Nowoczesny, perceptualnie równomierny

OKLCH - przyszłość kolorów w CSS

Format OKLCH (Oklab Lightness Chroma Hue) zyskuje popularność, bo:

Warianty jasności wyglądają naturalnie
Łatwiej tworzyć harmonijne palety
Obsługuje szerszy gamut (P3, Rec2020)

/* Tworzenie wariantów w OKLCH jest intuicyjne */
:root {
  --primary: oklch(0.45 0.15 264);
  --primary-light: oklch(0.65 0.15 264); /* Tylko zmiana L */
  --primary-dark: oklch(0.25 0.15 264);
}

Podsumowanie

Ekstrakcja palety kolorów ze strony internetowej to zadanie, które można wykonać ręcznie, ale automatyzacja oszczędza godziny pracy. UPER SEO Auditor nie tylko pokazuje wszystkie kolory, ale pozwala je wyeksportować do formatu gotowego do użycia w projekcie.

Kluczowe funkcje:

Automatyczne wykrywanie wszystkich kolorów
Konwersja między formatami (HEX, RGB, HSL, OKLCH)
Eksport do Tailwind CSS, UnoCSS, CSS Variables
Analiza typografii i breakpointów
Identyfikacja potencjalnych problemów ze spójnością

Wypróbuj UPER SEO Auditor i zobacz, jak wygląda paleta kolorów Twojej strony.

Źródła

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/