Próbnik kolorów
Pobierz dowolny kolor ze zdjęcia i natychmiast uzyskaj kody HEX, RGB, HSL, HSV i CMYK.
Wgraj zdjęcie, aby pobrać kolor
Przeciągnij i upuść, wklej lub przeglądaj — PNG, JPG, WEBP lub GIF
Wskazówka: możesz też wkleić zdjęcie za pomocą Ctrl/Cmd + V
Kody koloru
Najbliższa nazwa koloru: Royal Blue
Harmonie kolorów
Sprawdzanie kontrastu (WCAG)
Przykładowy tekst
Zapisane kolory
Brak zapisanych kolorów — wybierz kolor i naciśnij „Zapisz kolor”.
Próbnik kolorów to narzędzie, które pozwala pobrać dokładny kolor z dowolnego obrazu i odczytać jego wartości w różnych formatach zapisu. Wystarczy wgrać zdjęcie, kliknąć pipetą wybrany piksel, a w mgnieniu oka poznasz kody HEX, RGB, HSL, HSV i CMYK dla tego koloru. To niezastąpione narzędzie przy projektowaniu stron internetowych, w programowaniu front-end, w przygotowaniu materiałów do druku oraz przy dbaniu o dostępność, gdzie liczy się odpowiedni kontrast tekstu i tła.
Nasz próbnik kolorów jest całkowicie darmowy i działa bezpośrednio w przeglądarce — Twoje zdjęcia nie są nigdzie wysyłane ani zapisywane na serwerze, więc masz pełną prywatność. Poza odczytem kodów HEX, RGB, HSL, HSV i CMYK narzędzie umożliwia automatyczne wyodrębnianie palety kolorów z obrazu, generowanie harmonii kolorystycznych (kolory dopełniające, analogiczne, triadyczne i inne) oraz sprawdzanie kontrastu zgodnie z wytycznymi WCAG. Wszystko w jednym miejscu, bez instalacji i bez rejestracji.
Jak pobrać kolor z obrazu
- 1
Wgraj lub przeciągnij obraz
Wybierz zdjęcie z dysku, przeciągnij je do okna narzędzia albo wklej ze schowka. Obsługiwane są formaty PNG, JPG, WEBP i GIF, a całość odbywa się lokalnie w Twojej przeglądarce.
- 2
Kliknij pipetą wybrany piksel
Najedź kursorem na obraz i kliknij dowolne miejsce. Pipeta pobierze dokładny kolor wskazanego piksela — możesz też przybliżyć obraz, aby precyzyjnie trafić w odpowiedni fragment.
- 3
Odczytaj i skopiuj kody koloru
Narzędzie od razu wyświetli wartości HEX, RGB, HSL, HSV i CMYK dla wybranego koloru. Jednym kliknięciem skopiujesz dowolny kod do schowka i wkleisz go w CSS, edytorze grafiki lub innym programie.
- 4
Wyodrębnij paletę z obrazu
Uruchom automatyczne wyodrębnianie palety, aby narzędzie znalazło dominujące kolory na zdjęciu. Otrzymasz gotowy zestaw próbek, który świetnie sprawdzi się jako baza kolorystyki projektu.
- 5
Wygeneruj harmonie kolorów
Na podstawie wybranego koloru narzędzie zaproponuje harmonie kolorystyczne — dopełniające, analogiczne, triadyczne, tetradyczne, dopełniające dzielone i monochromatyczne — które pomogą zbudować spójną kolorystykę.
- 6
Sprawdź kontrast WCAG i zapisz paletę
Zestaw kolor tekstu z kolorem tła, aby sprawdzić współczynnik kontrastu i zgodność z poziomami WCAG AA i AAA. Na koniec zapisz ulubione kolory i wyeksportuj paletę do formatu CSS, JSON lub PNG.
HEX, RGB, HSL, HSV i CMYK — wyjaśnienie
Ten sam kolor można zapisać na wiele sposobów, a każdy model kolorów ma swoje zastosowanie. HEX i RGB najlepiej sprawdzają się na ekranach i w internecie, HSL oraz HSV ułatwiają intuicyjną edycję odcienia i nasycenia, a CMYK jest niezbędny w druku. Poniższa tabela pokazuje, jak wygląda ten sam kolor w każdym z formatów i do czego każdy z nich pasuje najlepiej.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Strony internetowe i CSS |
| RGB | rgb(59, 130, 246) | Ekrany i grafika cyfrowa |
| HSL | hsl(217, 91%, 60%) | Intuicyjna edycja koloru |
| HSV | hsv(217, 76%, 96%) | Narzędzia projektowe i grafika |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Druk i poligrafia |
Projektowanie stron i UI
Projektanci stron i interfejsów mogą szybko pobrać kolory z inspiracji, makiet czy zdjęć produktowych i przenieść je do swoich projektów. Dzięki wyodrębnianiu palety i harmoniom kolorów łatwo zbudować spójną kolorystykę marki oraz utrzymać jednolity wygląd przycisków, nagłówków i tła w całym interfejsie.
Programowanie front-end
Deweloperzy front-end mogą kopiować gotowe kody HEX i RGB bezpośrednio do arkuszy stylów oraz zmiennych CSS. Zamiast zgadywać wartości, wystarczy pobrać kolor pipetą i wkleić go do właściwości takich jak color, background czy --brand-color, co przyspiesza pracę i eliminuje pomyłki.
Druk i branding
Przy przygotowaniu materiałów drukowanych — ulotek, wizytówek czy opakowań — kluczowy jest model CMYK. Narzędzie od razu podaje wartości CMYK dla wybranego koloru, dzięki czemu łatwiej zachować spójność barw marki między wersją ekranową a wydrukiem i uniknąć niespodzianek na etapie produkcji.
Dostępność (kontrast WCAG)
Odpowiedni kontrast między tekstem a tłem decyduje o czytelności strony dla wszystkich użytkowników, w tym osób słabowidzących. Wbudowane sprawdzanie kontrastu WCAG pokazuje współczynnik kontrastu i informuje, czy dana para kolorów spełnia wymagania na poziomach AA i AAA dla zwykłego oraz dużego tekstu.
Porównanie
Zobacz, jak nasz próbnik kolorów wypada w porównaniu z popularnym serwisem imagecolorpicker.com. Poniżej zestawiamy najważniejsze funkcje, które mają znaczenie przy codziennej pracy z kolorami.
| Modele kolorów | HEX, RGB, HSL, HSV i CMYK | Głównie HEX i RGB |
| CMYK do druku | Tak, gotowe wartości CMYK | Brak lub ograniczone |
| Sprawdzanie kontrastu WCAG | Tak, z poziomami AA i AAA | Nie |
| Harmonie kolorów | Tak, sześć rodzajów harmonii | Nie |
| Reklamy | Bez natrętnych reklam | Reklamy na stronie |
Najczęściej zadawane pytania
Jak pobrać kolor z obrazu?
Wgraj zdjęcie do narzędzia, a następnie kliknij pipetą wybrany piksel na obrazie. Narzędzie natychmiast pokaże kolor tego punktu wraz z kodami HEX, RGB, HSL, HSV i CMYK, które możesz jednym kliknięciem skopiować do schowka.
Czym jest kod koloru HEX?
Kod HEX to szesnastkowy zapis koloru używany głównie w internecie i CSS, na przykład #3B82F6. Składa się ze znaku # oraz sześciu znaków opisujących udział składowej czerwonej, zielonej i niebieskiej. Każda para znaków odpowiada jednej składowej w zakresie od 00 do FF.
Jak przekonwertować RGB na HEX?
Wartości RGB od 0 do 255 zamienia się na zapis szesnastkowy dla każdej ze składowych i łączy w jeden kod poprzedzony znakiem #. Nie musisz robić tego ręcznie — nasze narzędzie automatycznie wyświetla jednocześnie wartości RGB i HEX dla każdego pobranego koloru.
Jak stworzyć paletę ze zdjęcia?
Po wgraniu obrazu uruchom funkcję wyodrębniania palety. Narzędzie przeanalizuje zdjęcie i wskaże jego dominujące kolory, tworząc gotowy zestaw próbek. Paletę możesz następnie zapisać i wyeksportować do formatu CSS, JSON lub PNG.
Jak sprawdzić kontrast kolorów pod kątem dostępności?
Skorzystaj z wbudowanego narzędzia do sprawdzania kontrastu WCAG. Ustaw kolor tekstu i kolor tła, a otrzymasz współczynnik kontrastu oraz informację, czy para kolorów spełnia wymagania na poziomach AA i AAA dla zwykłego i dużego tekstu.
Czy narzędzie jest darmowe i prywatne?
Tak. Próbnik kolorów jest całkowicie darmowy i nie wymaga rejestracji. Cała analiza obrazu odbywa się lokalnie w Twojej przeglądarce — zdjęcia nie są przesyłane ani przechowywane na żadnym serwerze, więc Twoje dane pozostają prywatne.
