Generator palet kolorów

Schematy harmonii

– Komplementarny: kombinacja koloru podstawowego i jego przeciwnej wartości na kółku kolorów (180°). Duży kontrast, intensywny efekt. Idealny do przycisków zachęcających do działania w kolorze marki. – Analogiczne: 3–5 odcieni znajdujących się w odległości do 30° od siebie; charakteryzują się spokojnością i harmonią, zazwyczaj należą do ciepłej lub chłodnej skali kolorów. Idealne do tła oraz ilustracji z jednym tematem kolorowym. – Triadyczny: trzy barwy równomiernie rozłożone w kątach 120° – intensywne i zrównoważone; typowy dla produktów dla dzieci oraz marków o wyraźnym stylu. – Komplement podzielony: podstawa + dwa kolorystyczne odcinki po obu stronach komplementu (150° i 210°). Bogatszy niż komplementarny, mniej napięty. – Tetradyczny / kwadratowy: 4 odcienie w kątach 90°. Trudniej jest ich równowagowanie – należy wybrać jeden jako dominujący. – Monochromatyczny: jedna barwa o zmiennym nasyceniu i jasności; elegancki i spójny; nie wykazuje wyraźnego akcentu, chyba że jest połączony z barwą neutralną.

Struktura palety do rzeczywistej pracy

Systemy projektowe zwykle wymagają:

– Główny (branda podstawowa)

• Sekundarny (brand wspierający) – Akcent (CTA, wyznaczenia) – Skala neutralna (tło, tekst, obramowania – 5–10 poziomów szarości) – Semantyczny (udanie, ostrzeżenie, błąd, informacja) – Powierzchnia (tło paneli, warstwy nadawane)

Paleta harmonii obejmuje kolory podstawowe, dodatkowe oraz akcentowe. Kolory neutralne oraz kolory semantyczne zazwyczaj opierają się na osobnych konwencjach – m.in. szarości o niskiej saturacji lub kolorów semantycznych zdefiniowanych standardowo.

Formaty eksportu

Właściwości dostosowane do CSS:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Konfiguracja wiatru wspierającego („tailwind configuration“):

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

Kontrast i dostępność

Systemy harmonii nie gwarantują dostępności. Sprawdź kombinacje palet kolorowych z punktu widzenia wymagań dotyczących kontrastu określonych w standardzie WCAG:

– Tekst ciała na tle o stosunku minima 4,5:1 (AA). – Duży tekst: 3:1. – Elementy nie tekstowe (przyciski, ikony, pierścienie uwagi): stosunek 3:1.

Połącz generator z narzędziem do sprawdzania kontrastu, aby znaleźć odpowiednie kombinacje.

※ Porady

– Zaczynaj od określonej koloru podstawowego, a nie z losowego – harmonie wydają się celowe, gdy podstawa ma sens (twoja marka, fotografia, która ci się podoba, lub odniesienie kulturowe). – Sprawdź paletę kolorów w rzeczywistym użyciu: na przycisku, na tekście, w wykresie. Dobry wygląd w próbkach nie gwarantuje poprawnej funkcjonalności w interfejsie użytkownika. – Niewielkie zmniejszenie nasycenia kolorów dla palet przeznaczonych do dużych powierzchni – pełnie nasyczone tło może powodować zmęczenie oka. – Unikaj nadmiernego stosowania akcentów: jeśli 80% elementów interfejsu użytkownika stanowi elementy główne i wtórne, używaj koloru akcentowego tylko w 10% punktów kontaktowych (CTA), aby osiągnąć maksymalny efekt przyciągania.