Kolory ze zdjęcia i palety barw — jak dobrać kolory do projektu
Jak wyciągnąć kolory ze zdjęcia, czym różnią się zapisy HEX, RGB i HSL, jak zbudować spójną paletę (barwy dopełniające, analogiczne, triada) i jak sprawdzić, czy tekst będzie czytelny. Dla projektujących strony, grafiki i wnętrza.
Dobre zdjęcie to gotowa paleta: zachód słońca, liście, wnętrze kawiarni. Wystarczy z niego „wyciągnąć” kilka dominujących barw i zapisać je w postaci, którą zrozumie program graficzny lub arkusz stylów.
Zapis kolorów
| Zapis | Przykład | Gdzie się używa |
|---|---|---|
| HEX | #2E86AB | strony WWW, programy graficzne |
| RGB | rgb(46, 134, 171) | CSS, ekrany — składowe czerwona, zielona, niebieska 0–255 |
| HSL | hsl(198, 58%, 43%) | CSS — barwa, nasycenie, jasność; wygodny do tworzenia odcieni |
| CMYK | 73, 22, 0, 33 | druk |
Zapisy przeliczysz w konwerterze kolorów. Kolory ekranowe (RGB) nie zawsze dają się dokładnie wydrukować — barwy bardzo nasycone wyjdą na papierze bardziej matowe.
Kolory ze zdjęcia
Pobieranie kolorów z obrazu wskaże dominujące barwy i pozwoli kliknąć dowolny piksel, żeby poznać jego kolor. Wskazówki:
- Wybieraj 1–2 kolory główne, 1 akcent i 2–3 neutralne (tło, tekst).
- Bardzo jasne i bardzo ciemne piksele (odblaski, cienie) rzadko są dobrym kolorem do projektu — szukaj tonów pośrednich.
- Przed pobieraniem kolorów możesz zdjęcie lekko zmienić filtrami (np. podbić nasycenie), żeby paleta była wyraźniejsza.
Harmonie barw
Na kole barw (w HSL to kąt barwy od 0° do 360°) spójne zestawienia powstają według prostych zasad:
- dopełniające — kolory naprzeciwko siebie (różnica 180°): silny kontrast, np. granat i pomarańcz;
- analogiczne — sąsiednie (±30°): spokojne, naturalne, np. odcienie zieleni i turkusu;
- triada — co 120°: żywe, ale łatwo przesadzić;
- monochromatyczne — jedna barwa w różnych jasnościach: elegancko i bezpiecznie.
Gotowe zestawienia z wybranego koloru tworzy generator palet. Popularna zasada proporcji to 60–30–10: 60% koloru dominującego (tła), 30% uzupełniającego, 10% akcentu (przyciski, wyróżnienia).
Czytelność
Ładna paleta to nie wszystko — tekst musi mieć wystarczający kontrast z tłem. Jasnoszary tekst na białym albo biały na żółtym bywa nieczytelny dla wielu osób. Każdą parę sprawdzisz w testerze kontrastu, a wymagania opisuje poradnik kontrast kolorów i dostępność.
Kolory w plikach graficznych
Przy zapisie zdjęć w JPG z mocną kompresją jednolite plamy koloru mogą „falować” (artefakty), a przy przejściach tonalnych pojawiają się pasy. Logo i grafiki z płaskimi kolorami lepiej zapisywać w PNG lub SVG — więcej w poradniku JPG, PNG czy WebP.
Narzędzia do tego poradnika
kolorypaleta barwHEXRGBHSLprojektowanie