Próbnik kolorów

Wybierz dowolny odcień z koła barw i przekonwertuj go na formaty hex, rgb oraz hsl, używając tego darmowego narzędzia Color picker. Nie musisz się rejestrować, żeby zacząć.

Jak koło barw generuje formaty

Klikasz punkt na kole, a narzędzie liczy dokładne współrzędne w przestrzeni barwy, nasycenia i jasności. Potem przelicza te wartości przez standardowe macierze konwersji, żeby podać wynik w innych przestrzeniach barw. Od razu dostajesz surowy kod hex, trójkę rgb i wartości hsl. Cała ta matematyka dzieje się natychmiast w twojej przeglądarce.

Bazowy model traktuje kolor jako trójwymiarowy walec. Barwa owija się wokół okrągłej krawędzi. Nasycenie przesuwa się od szarego środka do wyrazistego zewnętrznego brzegu. Jasność skaluje się od czystej czerni na dole do idealnej bieli na górze. Przesunięcie jednego suwaka aktualizuje pozostałe, bo są ze sobą matematycznie powiązane. Możesz też wpisać dokładne liczby w pola, jeśli znasz już docelowe wartości.

Kiedy przydaje się darmowy Color picker

Projektanci używają tego do wyciągania dokładnych wartości z makiet, gdy klient prosi o konkretny odcień niebieskiego. Frontendowcy potrzebują go, żeby przełożyć wizualny wybór na poprawną zmienną css. Czasem po prostu szukasz komplementarnego odcienia do slajdu z prezentacją. Narzędzie łączy wizualną intuicję z twardymi wymaganiami kodu.

Szczególnie przydaje się przy budowie design systemów, gdy musisz upewnić się, że wskaźniki kontrastu się zgadzają. Wybierasz kolor bazowy, sprawdzasz jego wartość hex, a potem ręcznie kręcisz suwakiem jasności, dopóki tekst pozostaje czytelny na ciemnym tle.

• Wyciąganie dokładnych kodów hex z obrazka z wytycznymi brandowymi.
• Generowanie komplementarnych lub analogicznych palet do nowego motywu strony.
• Konwersja wartości rgb ze zrzutu ekranu na użyteczny kod hex.
• Testowanie kontrastu tekstu przez zmianę jasności, aż wskaźnik przejdzie.

Ograniczenia narzędzia Color picker online

To narzędzie działa wyłącznie w standardowej przestrzeni barw srgb. Nie wygeneruje wartości dla ekranów o szerokim gamucie, takich jak display-p3 czy rec2020. Jeśli projektujesz pod zaawansowane ekrany mobilne obsługujące szersze gamuty, kody hex i rgb, które tu dostaniesz, zostaną obcięte lub źle zmapowane po wyrenderowaniu na tych urządzeniach.

Nie wpiszesz tu też bezpośrednio wartości cmyk, żeby zobaczyć ją na kole. Konwersja z cmyk na rgb mocno zależy od konkretnego profilu icc docelowej drukarki. Narzędzie zakłada standardową, ogólną konwersję. To wystarczy do web designu, ale nie sprawdzi się w profesjonalnym druku. Zawsze weryfikuj fizyczne proofy.

Jak używać narzędzia Color picker

1. Kliknij w dowolne miejsce dużego kwadratu koloru, żeby ustawić bazowe nasycenie i jasność.
2. Przeciągnij pionowy suwak po prawej, aby dostosować ogólną barwę.
3. Doprecyzuj dokładne wartości, używając pól numerycznych dla hex, rgb lub hsl.
4. Skopiuj wygenerowany kod bezpośrednio z pola tekstowego obok wybranego formatu.
5. Ustaw suwak przezroczystości, jeśli potrzebujesz wartości rgba lub hsla z konkretnym kanałem alfa.

Porównanie formatów kolorów

Różne środowiska wymagają różnych formatów tekstowych. Wiedza o tym, którego użyć, zapobiega błędom renderowania.

Frequently asked questions

Czy ten Color picker jest naprawdę darmowy?

Tak. Narzędzie jest w pełni darmowe i nie wymaga rejestracji. Wygenerujesz tyle kodów kolorów, ile potrzebujesz, bez żadnego paywalla.

Jak pobrać kolor z obrazka?

To konkretne narzędzie opiera się na kole barw i suwakach, a nie na pipetcie z obrazka. Żeby pobrać kolor ze zdjęcia, musisz najpierw użyć systemowej pipety kolorów z ekranu albo dedykowanego narzędzia do ekstrakcji. Gdy masz już wstępną wartość, wklej wynikowy kod hex w pole tutaj, żeby go dopasować.

Dlaczego mój kod hex wygląda inaczej na telefonie?

Kalibracja ekranów mocno się różni między urządzeniami. Kod hex to absolutna wartość matematyczna w przestrzeni srgb, ale fizyczny wyświetlacz zmienia to, jak emitowane jest światło. Jeśli kolor wygląda źle, problem leży w profilu monitora, a nie w wygenerowanym kodzie.

Czy mogę tu przekonwertować cmyk na hex?

Możesz wpisać wartości cmyk, ale wynikowy kod hex to tylko przybliżenie. Cmyk to subtraktywny model koloru dla tuszu, a hex to addytywny model dla światła. Tej konwersji brakuje konkretnego profilu icc drukarki, który jest potrzebny do pełnej dokładności.

Czy narzędzie działa w mobilnych przeglądarkach?

Tak. Interfejs jest responsywny, a obszary dotykowe suwaków i kwadratu koloru są wystarczająco duże, żeby wygodnie klikać palcem. Skopiujesz wygenerowane kody do schowka tak samo jak na komputerze. Na mniejszych ekranach układ po prostu układa kontrolki pionowo, żeby elementy na siebie nie nachodziły.