Zobacz paletę na stronie, wizytówce i logo naraz
See a palette on a website, business card, and logo at once
48 nazwanych, przemyślanych palet — każdy kolor ma swoje uzasadnienie. Wybierz jedną i zobacz ją od razu na trzech makietach, zamiast wyobrażać sobie efekt z samych kodów HEX.
48 named, considered palettes — every color comes with a reason. Pick one and see it applied instantly across three mockups, instead of imagining the effect from hex codes alone.
Wybierz paletę
Pick a palette
Wybierz kategorię i kliknij jedną z 48 nazwanych palet — makiety poniżej przekolorują się natychmiast.
Pick a category and click one of the 48 named palettes — the mockups below recolor instantly.
Sprawdź trzy konteksty naraz
Check three contexts at once
Strona WWW, wizytówka i mini-logo pokazują tę samą paletę w różnych zastosowaniach jednocześnie.
A website, a business card, and a mini logo show the same palette across different uses at once.
Skopiuj zmienne CSS
Copy the CSS variables
Gotowy blok :root ze zmiennymi kolorów — wklej go na start swojego projektu.
A ready :root block with color variables — paste it at the start of your project.
- Szybki wybór kolorystyki na etapie prototypu strony.
- Punkt startowy do dalszej pracy w Logo Makerze na iFox.pl.
- Inspiracja, gdy trudno zacząć od pustej palety kolorów.
- A quick color choice at the website-prototype stage.
- A starting point for further work in iFox.pl's Logo Maker.
- Inspiration when it's hard to start from a blank color palette.
Czym jest ten generator? To biblioteka 12 przemyślanych, nazwanych palet kolorów, z których każda ma opisany nastrój i uzasadnienie doboru poszczególnych kolorów — zamiast losowych zestawów HEX, dostajesz gotową narrację marki.
What is this tool? A library of 12 considered, named color palettes, each with a described mood and a rationale for its individual colors — instead of random hex sets, you get a ready brand narrative.
Skąd biorą się te palety?
Where do these palettes come from?
To ręcznie dobrane, kuratorowane zestawy kolorów zainspirowane konkretnymi nastrojami i miejscami — nie generowane losowo. Każdy kolor ma świadomie przypisaną rolę: tło, tekst, akcent, kolor główny.
These are hand-picked, curated color sets inspired by specific moods and places — not randomly generated. Every color has a deliberately assigned role: background, text, accent, primary color.
Czy biblioteka będzie się powiększać?
Will the library keep growing?
Tak, to zaprojektowane jako rosnąca kolekcja — kolejne palety będą dochodzić z czasem, każda z własną nazwą, nastrojem i uzasadnieniem kolorów.
Yes, this is designed as a growing collection — more palettes will be added over time, each with its own name, mood, and color rationale.
Jak przenieść wybraną paletę do Logo Makera?
How do I bring a chosen palette into the Logo Maker?
Skopiuj kody HEX kolorów głównego i akcentu z panelu poniżej, a następnie wklej je ręcznie w polach kolorów Logo Makera.
Copy the primary and accent color hex codes from the panel below, then paste them manually into the Logo Maker's color fields.
Czym różnią się role kolorów?
How do the color roles differ?
Tło i Powierzchnia budują głębię strony,
Główny niesie tożsamość marki, Akcent przyciąga uwagę do
przycisków i CTA, a Tekst/Tekst stonowany odpowiadają za
czytelność treści.
Background and Surface build page depth,
Primary carries brand identity, Accent draws attention to buttons
and CTAs, and Text/Muted text handle content readability.
Czy wszystkie kolory tekstu spełniają standardy dostępności?
Do all text colors meet accessibility standards?
Główny kolor tekstu — tak, we wszystkich 48 paletach kontrast wobec tła
przekracza 12:1, czyli znacznie powyżej progu WCAG AAA (7:1). Tekst stonowany
jest słabszy — w kilku paletach (np. Górski Poranek: 3,4:1) spełnia próg WCAG AA dla
dużego tekstu i elementów UI (3:1), ale nie dla drobnego tekstu akapitowego (4,5:1).
Używaj go do etykiet, dat i ikon, nie do głównej treści.
The main text color — yes, across all 48 palettes contrast against the
background exceeds 12:1, well above the WCAG AAA threshold (7:1). Muted text
is weaker — in a few palettes (e.g. Mountain Morning: 3.4:1) it meets the WCAG AA threshold
for large text and UI components (3:1), but not for small body text (4.5:1). Use it for
labels, dates, and icons, not for main content.
Czym jest "harmonia dopełniająca" albo "analogiczna"?
What is "complementary" or "analogous" harmony?
To standardowe pojęcia z teorii koloru. Barwy dopełniające leżą naprzeciwko siebie na kole barw (np. niebieski i pomarańczowy) i dają silny kontrast. Barwy analogiczne sąsiadują ze sobą (np. zielony i żółto-zielony) i dają spokojniejsze, bardziej jednolite wrażenie. Każda paleta w tej bibliotece ma podany swój typ.
These are standard color-theory terms. Complementary colors sit opposite each other on the color wheel (e.g. blue and orange) and create strong contrast. Analogous colors sit next to each other (e.g. green and yellow-green) and create a calmer, more unified feel. Every palette in this library states its type.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Wszystko dzieje się lokalnie w Twojej przeglądarce.
No. Everything happens locally in your browser.
Czym jest ten Kreator Palet Marki?
Wybór kolorystyki marki na podstawie samych kodów HEX jest zaskakująco trudny — te same kolory mogą wyglądać zupełnie inaczej na dużym tle strony niż na małym kwadracie w narzędziu do wyboru kolorów. Ten generator pokazuje każdą paletę od razu w trzech realnych kontekstach: sekcji strony internetowej, wizytówce i mini-logo — więc widzisz, jak kolory będą się zachowywać w praktyce, nie tylko obok siebie w rzędzie kwadracików.
Dlaczego palety mają nazwy i historie
Nazwany zestaw kolorów ("Mroczny Las", "Letnia Wycieczka w Lesie") jest łatwiejszy do zapamiętania i skojarzenia z konkretnym nastrojem marki niż ciąg kodów HEX. Opis przy każdym kolorze wyjaśnia jego rolę w tej konkretnej historii — dlaczego akurat ten odcień zieleni, a nie inny, i co ma symbolizować w zestawieniu z resztą palety.
Sześć ról kolorów w każdej palecie
- Tło — główne tło strony lub dokumentu.
- Powierzchnia — tło kart i wydzielonych bloków treści.
- Główny — kolor niosący tożsamość marki, używany w logo i nagłówkach.
- Akcent — kolor przycisków i wezwań do działania, ma przyciągać wzrok.
- Tekst — główny kolor treści, najwyższy kontrast wobec tła.
- Tekst stonowany — opisy, metadane, treści drugorzędne.
Praktyczne wskazówki
Sprawdź wybraną paletę zarówno na jasnym, jak i ciemnym tle ekranu użytkownika, jeśli Twoja strona wspiera tryb ciemny. Zwróć też uwagę na kontrast tekstu wobec tła — paleta, która wygląda pięknie estetycznie, może mieć problem z czytelnością, jeśli kolor tekstu jest zbyt blisko koloru tła pod względem jasności.
Wdrożenie w produkcji
Skopiowany blok zmiennych CSS wklej na początku swojego arkusza stylów, w selektorze
:root. Dalej używaj tych zmiennych (var(--color-primary) itd.)
zamiast wpisywać kody HEX bezpośrednio — ułatwi to późniejszą zmianę całej kolorystyki
w jednym miejscu.
What is this Brand Palette Creator?
Choosing a brand's color scheme from hex codes alone is surprisingly hard — the same colors can look completely different across a large page background than in a small square in a color picker. This generator shows each palette immediately in three real contexts: a website section, a business card, and a mini logo — so you see how the colors behave in practice, not just lined up next to each other as swatches.
Why palettes have names and stories
A named color set ("Dark Forest", "Summer Forest Hike") is easier to remember and associate with a specific brand mood than a string of hex codes. The description next to each color explains its role within that particular story — why this shade of green and not another, and what it's meant to signify alongside the rest of the palette.
Six color roles in every palette
- Background — the page or document's main background.
- Surface — the background of cards and separated content blocks.
- Primary — the color carrying brand identity, used in the logo and headings.
- Accent — the color of buttons and calls to action, meant to catch the eye.
- Text — the main content color, highest contrast against the background.
- Muted text — descriptions, metadata, secondary content.
Practical tips
Check your chosen palette on both light and dark screen backgrounds if your site supports dark mode. Also pay attention to text contrast against the background — a palette that looks aesthetically beautiful can have a readability problem if the text color sits too close to the background color in brightness.
Using it in production
Paste the copied CSS variable block at the start of your stylesheet, in the
:root selector. From there, use those variables
(var(--color-primary), etc.) instead of typing hex codes directly — this makes
it easy to change the entire color scheme later from one place.
Masz już paletę? Zbuduj z nią logo.
Already have a palette? Build a logo with it.
Logo Maker pozwala od razu wpisać wybrane kolory i wybrać ikonę pasującą do nastroju.
Logo Maker lets you enter the chosen colors right away and pick an icon matching the mood.