CodeKitHubCzym jest to narzędzie?
Narzędzie do wyboru kolorów przekształca wybór wizualny — ten odcień niebieskiego, ten konkretny piksel w logo — w kody numeryczne zrozumiałe dla oprogramowania. Ten sam kolor ma kilka równoważnych zapisów: HEX (#3b82f6) dominuje w CSS i specyfikacjach projektowych, RGB (59, 130, 246) odpowiada sposobowi, w jaki ekrany i kod przedstawiają kolor, a HSL (217°, 91%, 60%) opisuje odcień, nasycenie i jasność w sposób zrozumiały dla ludzi.
Drugą częścią narzędzia jest pipeta do obrazów. Prześlij zrzut ekranu, logo lub zdjęcie, a następnie kliknij w dowolnym miejscu, aby pobrać próbkę koloru pod kursorem — to standardowy sposób na uzyskanie odpowiedzi na pytanie „jaki to dokładnie kolor?”. Jeśli przeglądarka obsługuje interfejs API EyeDropper, wykorzystywana jest natywna lupa z funkcją powiększania; w pozostałych przeglądarkach narzędzie odczytuje wartość piksela z kopii obrazu przechowywanej na płótnie (canvas). W obu przypadkach przetwarzanie odbywa się lokalnie: obraz nigdy nie jest przesyłany.
Dlaczego warto go używać?
- Trzy formaty jednocześnie: każdy wybrany kolor jest wyświetlany jednocześnie w systemach HEX, RGB i HSL, a każdy z nich ma przycisk umożliwiający skopiowanie jednym kliknięciem — bez konieczności przeprowadzania osobnej konwersji.
- Wybierz obraz: prześlij dowolne zdjęcie i kliknij, aby pobrać próbkę dokładnego koloru piksela — idealne rozwiązanie do wyodrębniania kolorów marki z logo lub dopasowania koloru widocznego na zrzucie ekranu.
- Wykorzystuje natywną funkcję „EyeDropper” przeglądarki wraz z lupą, jeśli jest dostępna, a w pozostałych przypadkach stosuje precyzyjny odczyt pikseli z obszaru canvas.
- Próbka podglądu na żywo pozwala od razu sprawdzić aktualny kolor, dzięki czemu możesz zweryfikować wybór przed skopiowaniem.
- Bezpłatne, natychmiastowe i w pełni lokalne: kolory są obliczane, a obrazy odczytywane w Twojej przeglądarce — nic nie jest przesyłane, przechowywane ani rejestrowane.
Jak używać
- Wybierz kolor za pomocą pola koloru lub wklej/edytuj wartość bezpośrednio.
- Aby pobrać próbkę koloru z obrazka, prześlij zdjęcie i kliknij punkt, którego kolor chcesz pobrać.
- Odczytaj wartości HEX, RGB i HSL, wyświetlane wraz z próbką podglądu na żywo.
- Kliknij przycisk „Kopiuj” obok wybranego formatu — HEX dla CSS, RGB lub HSL dla kodu.
Przykład
Wejście
Clicking the blue area of an uploaded logoWynik
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Wszystkie trzy zapisy opisują ten sam kolor. W arkuszach stylów i narzędziach do projektowania używaj formatu HEX, w kodzie — RGB, gdy wymagane są wartości kanałów, a HSL — gdy chcesz uzyskać jaśniejsze lub ciemniejsze warianty poprzez zmianę tylko ostatniej liczby.
Jaki format kolorystyczny wybrać do danego zadania
Współczesny CSS akceptuje wszystkie trzy formaty wszędzie tam, gdzie dopuszczalne jest użycie koloru, więc wybór zależy od sposobu pracy, a nie od kompatybilności. Zespoły zazwyczaj ustalają standard HEX w tokenach projektowych, a następnie korzystają z HSL podczas testowania wariantów — zmieniają jasność o 10–15 punktów, aby uzyskać użyteczny stan najechania kursorem bez zmiany odcienia.
| Format | Przykład | Najlepsze dla |
|---|---|---|
| Szesnastkowy | #3b82f6 | CSS, narzędzia do projektowania, udostępnianie kolorów na czacie oraz specyfikacje |
| Czerwony, zielony, niebieski | Czerwony, zielony, niebieski (59, 130, 246) | Kod służący do obsługi kanałów, rysowania na płótnie oraz przezroczystości za pomocą funkcji rgba() |
| HSL | hsl(217, 91%, 60%) | Tworzenie wariantów jaśniejszych/ciemniejszych oraz wariantów wyświetlanych po najechaniu kursorem, tworzenie palet |
Od wybranego koloru do gotowego kodu CSS
Wybór koloru to zazwyczaj pierwszy krok w procesie stylizacji. Jeśli potrzebujesz tego samego koloru w innych systemach zapisu — np. CMYK do druku lub wartości OKLCH do CSS z szeroką gamą barw — narzędzie „Color Converter” przejmuje zadanie tam, gdzie kończy się działanie tego selektora.
Wybrany kolor często przekłada się bezpośrednio na efekt wizualny: narzędzie „Box Shadow Generator” wykorzystuje wartość HEX do tworzenia realistycznych cieni, a zaokrąglone karty utworzone za pomocą narzędzia „Border Radius Generator” dopełniają całości.
→ Konwerter kolorów · Generator cieni ramki · Generator promienia krawędzi
Najczęściej zadawane pytania
Jaka jest różnica między systemami HEX, RGB i HSL?
Są to trzy sposoby zapisu tego samego modelu kolorów. HEX przedstawia kanały czerwony, zielony i niebieski w postaci sześciu cyfr szesnastkowych (#3b82f6) i jest najczęściej stosowaną formą w CSS oraz narzędziach do projektowania. RGB przedstawia te same trzy kanały jako liczby dziesiętne w zakresie od 0 do 255. HSL opisuje kolor za pomocą odcienia (0–360°), nasycenia i jasności — co jest znacznie bardziej intuicyjne, gdy chcesz uzyskać „ten sam kolor, tylko jaśniejszy”. Konwersja między tymi formatami nigdy nie zmienia koloru.
Jak działa wybieranie koloru z obrazu?
Przesłany obraz jest rysowany na niewidocznym płótnie w przeglądarce. Po kliknięciu narzędzie odczytuje wartości czerwonych, zielonych i niebieskich składowych piksela w tej konkretnej pozycji i konwertuje je na formaty HEX, RGB oraz HSL. W przeglądarkach obsługujących interfejs API EyeDropper (Chrome i Edge na komputerach stacjonarnych) zamiast tego otwiera się natywna lupa, dzięki czemu można dokonać wyboru z pikselową precyzją w dowolnym miejscu na ekranie.
Czy moje zdjęcie zostało gdzieś przesłane?
Nie. Obraz jest otwierany bezpośrednio przez przeglądarkę i odczytywany lokalnie z obszaru canvas; żadne pliki ani dane dotyczące kolorów nie są nigdy przesyłane ani przechowywane. Możesz załadować stronę, przejść w tryb offline, a zarówno selektor kolorów, jak i narzędzie do pobierania kolorów z obrazu będą nadal działać — dzięki czemu rozwiązanie to jest bezpieczne w przypadku niepublikowanych projektów i wewnętrznych zrzutów ekranu.
Dlaczego wybrany kolor nie pokrywa się dokładnie z tym, co widzę na ekranie?
Dwa typowe powody. Wygładzanie krawędzi: piksele na krawędziach tekstu i kształtów są mieszane z tłem, więc kliknięcie w odległości jednego piksela od krawędzi daje kolor pośredni — zamiast tego należy pobrać próbkę z jednolitego środka obszaru. Zarządzanie kolorami: pliki JPG/PNG z nietypowymi profilami kolorów mogą być wyświetlane nieco inaczej na różnych ekranach; narzędzie podaje wartość piksela taką, jaka jest zapisana w pliku, a właśnie tej wartości potrzebujesz do pracy projektowej.
Który format powinienem skopiować dla CSS?
HEX to najbezpieczniejszy format domyślny — obsługują go wszystkie przeglądarki i narzędzia. Używaj HSL, gdy planujesz tworzyć warianty dla efektu najechania kursorem lub trybu ciemnego, ponieważ dostosowanie wyłącznie składowej jasności pozwala zachować spójność odcienia i nasycenia. RGB przydaje się głównie wtedy, gdy kod tworzy kolory na podstawie kanałów numerycznych lub gdy dodaje się przezroczystość — w takich przypadkach zapis rgba(59, 130, 246, 0,5) jest bardziej czytelny niż ośmiocyfrowy kod HEX.