Color Picker

Color Picker Web to najlepszy darmowy internetowy wybierak kolorów w 2026 roku. Obsługuje ponad 20 formatów kolorów, w tym HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB i inne. Zawiera interaktywne koło kolorów, sprawdzanie kontrastu WCAG, symulator daltonizmu, generator palet, wybierak kolorów z obrazów oraz 6 typów harmonii — wszystko całkowicie za darmo, bez konieczności rejestracji.

Aby znaleźć kod koloru HEX z obrazu, użyj narzędzia Image Color Picker na stronie Color Picker Web. Prześlij dowolne zdjęcie, najeźdź kursorem na obszar, który chcesz pobrać, i kliknij, aby wyodrębnić dokładne kody HEX, RGB i HSL z dowolnego piksela. Możesz także automatycznie wygenerować pełną paletę kolorów z obrazu za jednym kliknięciem.

Narzędzie do wybierania kolorów pozwala na wybieranie, konwertowanie i analizowanie kolorów. Pokazuje wartości kolorów w wielu formatach (HEX, RGB, HSL, CMYK), generuje uzupełniające palety kolorów, sprawdza współczynniki kontrastu dostępności WCAG, symuluje daltonizm i wyodrębnia kolory z przesłanych obrazów. Jest niezbędne dla projektantów stron internetowych, programistów i projektantów marek.

Aby przeliczyć HEX na RGB, użyj powyższego narzędzia do konwersji. Wpisz dowolny kod HEX (np. #9333ea) i otrzymaj natychmiastowy wynik RGB (147, 51, 234). Ręcznie: podziel HEX na 3 pary (93, 33, ea), przelicz każdą z systemu szesnastkowego na dziesiętny. R=147, G=51, B=234. Color Picker Web robi to natychmiast dla wszystkich 20+ formatów.

Zgodnie z WCAG 2.2, minimalny współczynnik kontrastu kolorów dla zwykłego tekstu wynosi 4,5:1 (poziom AA) i 7:1 (poziom AAA). Dla dużego tekstu (18 pt i więcej lub 14 pt i więcej pogrubionego), minimalny współczynnik wynosi 3:1 dla AA i 4,5:1 dla AAA. Komponenty interfejsu użytkownika i ikony wymagają co najmniej 3:1 kontrastu w stosunku do sąsiednich kolorów. Użyj powyższego Narzędzia Sprawdzania Kontrastu WCAG, aby przetestować swoje kolory.

Aby wybrać kolor ze strony internetowej: (1) Użyj narzędzi deweloperskich przeglądarki — kliknij prawym przyciskiem myszy dowolny element, wybierz 'zbadaj' i kliknij próbnik koloru w panelu CSS. (2) Użyj rozszerzenia przeglądarki, takiego jak ColorZilla. (3) Zrób zrzut ekranu i prześlij go do narzędzia Image Color Picker w Color Picker Web, aby pobrać kolor dowolnego piksela. DevTools w Chrome mają również wbudowany kroplomierz w panelu wyboru koloru.

HSL oznacza Odcień, Nasycenie i Jasność. Odcień (0°–360°) to rodzaj koloru na kole barw. Nasycenie (0%–100%) określa, jak intensywny lub szary jest kolor. Jasność (0%–100%) określa, jak ciemny lub jasny wydaje się kolor. Przykład: hsl(270, 81%, 56%) to średni fiolet. HSL jest najlepszym formatem do animacji CSS i dynamicznego tematowania kolorów, ponieważ każdą właściwość można regulować niezależnie.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Narzędzie do wybierania kolorów to cyfrowa aplikacja, która pozwala użytkownikom wybierać dowolny kolor i uzyskiwać jego dokładny kod w różnych formatach — HEX, RGB, HSL, CMYK i innych. Jest ono codziennie używane przez projektantów UI/UX do wybierania kolorów interfejsu, przez programistów stron internetowych do kodowania wartości kolorów w CSS, przez projektantów marek do zachowania spójności kolorów, przez fotografów do ekstrakcji kolorów z obrazów oraz przez artystów cyfrowych do tworzenia palet. Color Picker Web jest najbardziej wszechstronnym darmowym narzędziem do wybierania kolorów dostępnym w 2026 roku, obsługującym ponad 20 formatów kolorów, sprawdzanie dostępności WCAG, symulację daltonizmu i 18 języków.

Kod koloru HEX to 6-znakowa reprezentacja szesnastkowa koloru używana w projektowaniu stron internetowych i CSS. Zaczyna się od symbolu #, po którym następują trzy pary znaków (00–FF), z których każda reprezentuje intensywność kanałów czerwonego, zielonego i niebieskiego. Na przykład: #FF0000 to czysta czerwień (R=255, G=0, B=0), #FFFFFF to biały (wszystkie kanały na maksimum), a #000000 to czarny (wszystkie kanały na zero). Skrócone 3-znakowe kody HEX, takie jak #F00, rozwija się do #FF0000. HEX to najbardziej uniwersalnie obsługiwany format koloru w HTML, CSS, SVG oraz narzędziach do projektowania, takich jak Figma.

Aby dobrać kolory na stronę internetową: (1) Zacznij od głównego koloru swojej marki i stwórz pełną 9-stopniową skalę kolorów (50–900) używając regulacji HSL. (2) Zastosuj zasadę 60-30-10 — 60% neutralne tło, 30% kolor drugorzędny, 10% akcent dla przycisków CTA. (3) Sprawdź wszystkie kombinacje tekst/tło pod kątem kontrastu WCAG AA (minimum 4,5:1 dla normalnego tekstu). (4) Generuj harmonijne kolory akcentowe za pomocą narzędzia Color Harmony — schematy triadyczne lub podzielone komplementarne najlepiej sprawdzają się na stronach internetowych. (5) Przetestuj każdą kombinację kolorów za pomocą symulatora daltonizmu, aby zapewnić dostępność dla wszystkich użytkowników.

Aby wybrać kolory marki: (1) Zbadaj psychologię kolorów — niebieski buduje zaufanie, zielony sygnalizuje rozwój, czerwony tworzy poczucie pilności, fiolet sugeruje luksus i kreatywność. (2) Analizuj swoją branżę — marki technologiczne preferują odcienie niebieskiego i szarości, marki zdrowotne używają zieleni, marki luksusowe stosują złoto, czarny lub głęboki fiolet. (3) Wybierz podstawowy kolor marki, który odzwierciedla główną emocję twojej marki. (4) Stwórz pełną paletę kolorów z podstawowego koloru, używając metody HSL. (5) Wybierz kolor wtórny i akcentowy, korzystając z teorii harmonii. (6) Sprawdź, czy wszystkie kombinacje spełniają standardy dostępności WCAG. Udokumentuj jako tokeny projektowe dla spójności na wszystkich platformach.

HEX, RGB i HSL to trzy sposoby reprezentowania tego samego koloru: HEX (#9333ea) to kompaktowy 6-cyfrowy format szesnastkowy, idealny do CSS i HTML — najbardziej powszechnie obsługiwany. RGB (rgb(147, 51, 234)) definiuje kolor przez wartości kanałów Czerwonego, Zielonego i Niebieskiego od 0 do 255 — najlepsze dla canvas w JavaScript, SVG i renderowania na ekranie. HSL (hsl(270, 81%, 56%)) definiuje kolor za pomocą kąta odcienia (0–360°), nasycenia (0–100%) i jasności (0–100%) — najbardziej intuicyjne dla projektantów, ponieważ każdą właściwość można regulować niezależnie, co czyni je idealnym do animacji CSS i dynamicznego tematowania. Wszystkie trzy opisują identyczne kolory, ale służą różnym procesom pracy.

RGB i CMYK są zasadniczo różnymi modelami kolorów dla różnych typów wyjść. RGB (Czerwony, Zielony, Niebieski) to addytywny model kolorów używany w ekranach cyfrowych — łączenie kolorów dodaje światło, a zmieszanie wszystkich kanałów na maksimum daje biały kolor. CMYK (Błękitny, Magenta, Żółty, Klucz/Czarny) to subtrakcyjny model kolorów używany w drukowaniu fizycznym — mieszanie tuszy pochłania światło, a połączenie wszystkich daje kolor czarny. Zawsze projektuj w RGB dla wyjścia cyfrowego/na ekran. Przekonwertuj na CMYK przed wysłaniem plików do drukarni komercyjnej. Konwersja nigdy nie jest idealna — niektóre kolory RGB (szczególnie jasne, nasycone kolory) nie mogą być odwzorowane w druku CMYK.

HSB (Barwa, Nasycenie, Jasność) i HSV (Barwa, Nasycenie, Wartość) to ten sam model kolorów pod różnymi nazwami. Barwa (0°–360°) identyfikuje rodzinę kolorów. Nasycenie (0–100%) kontroluje intensywność od szarości do w pełni żywego koloru. Jasność/Wartość (0–100%) kontroluje, ile światła wydaje się emitować kolor, od czerni (0%) do pełnej jasności (100%). HSB jest domyślnym modelem w Adobe Photoshop, Illustrator i w próbnika kolorów Figma, co czyni go niezbędnym dla projektantów korzystających z tych narzędzi. Różni się od HSL sposobem obliczania Jasności i Jasności — w HSL 50% jasności to czysty kolor, podczas gdy w HSB 100% jasności to czysty kolor.

LAB (CIELAB) i XYZ (CIEXYZ) to niezależne od urządzenia, percepcyjnie jednolite przestrzenie barw oparte na nauce o widzeniu człowieka. XYZ jest fundamentem całej współczesnej nauki o kolorze — odwzorowuje kolory w taki sposób, w jaki postrzega je ludzkie oko, wykorzystując trzy stożki (X, Y, Z odpowiadające mniej więcej czułości na czerwony, zielony i niebieski). LAB pochodzi od XYZ i jest zaprojektowany tak, aby równe odległości liczbowe odpowiadały równym postrzeganym różnicom kolorów, co czyni go idealnym do porównywania kolorów, przetwarzania obrazów, uczenia maszynowego i kontroli jakości druku. Oba są używane w profesjonalnym zarządzaniu kolorem, profilach ICC kolorów i zaawansowanych przepływach pracy edycji obrazów. CSS obsługuje teraz oba za pomocą składni color(xyz …) i lab(…) w nowoczesnych przeglądarkach.

Narzędzie Image Color Picker w Color Picker Web pozwala wyodrębniać dokładne kolory z dowolnego zdjęcia, zrzutu ekranu, logo lub dzieła sztuki. Prześlij dowolny plik graficzny, a następnie kliknij dowolny piksel, aby natychmiast uzyskać jego wartości HEX, RGB i HSL. Narzędzie automatycznie generuje również pełną paletę kolorów na podstawie dominujących barw w Twoim obrazie. Jest to przydatne do dopasowywania kolorów marki z istniejących materiałów, tworzenia palet z moodboardów, wyodrębniania kolorów ze zdjęć produktów oraz odtwarzania schematów kolorów ze stron konkurencji. Nie jest wymagane konto ani instalacja oprogramowania — działa w pełni w przeglądarce.

Color Picker Web obsługuje wszystkie sześć głównych typów harmonii kolorów opartych na teorii koła kolorów: Uzupełniający — dwa kolory bezpośrednio naprzeciwko siebie (180° od siebie), maksymalny kontrast. Podzielony-dopełniający — jeden kolor bazowy plus dwa kolory sąsiadujące z jego dopełnieniem (150° i 210°). Triada — trzy równomiernie rozłożone kolory (oddalone o 120°), zrównoważone i żywe. Analogiczny — trzy sąsiadujące kolory (30° od siebie), harmonijne i naturalne. Monochromatyczny — warianty jednego odcienia przy różnym nasyceniu i poziomach jasności. Tetriada — cztery kolory rozmieszczone równomiernie (90° od siebie), złożone i bogate. Wszystkie harmonie są obliczane matematycznie w czasie rzeczywistym w miarę wybierania kolorów.

Tak, Color Picker Web jest całkowicie darmowy w użyciu — każda funkcja, w tym wybieranie kolorów, generator palet, wybieranie kolorów z obrazów, sprawdzanie kontrastu zgodnie z WCAG, symulator daltonizmu, harmonie kolorów, generator odcieni i tonów oraz wszystkie 20+ konwersji formatów kolorów są dostępne bez żadnych kosztów. Nie jest wymagane konto, adres e-mail ani rejestracja. Nie ma reklam, ograniczeń w użytkowaniu ani wariantu premium — wszystkie funkcje są trwale darmowe. Narzędzie jest również dostępne w 18 językach: angielskim, hindi, hiszpańskim, rosyjskim, francuskim, niemieckim, włoskim, portugalskim, bengalskim, japońskim, koreańskim, malajskim, polskim, indonezyjskim, arabskim, bułgarskim, tureckim i szwedzkim.

Wymagania dotyczące kontrastu kolorów WCAG (Web Content Accessibility Guidelines) zapewniają, że tekst jest czytelny dla użytkowników z wadami wzroku, daltonizmem lub starszymi oczami. Wskaźnik kontrastu mierzy różnicę luminancji między kolorem tekstu a jego tłem — w zakresie od 1:1 (brak kontrastu) do 21:1 (maksymalny, czarny na białym). WCAG 2.2 poziom AA wymaga minimalnego współczynnika 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu. Poziom AAA wymaga 7:1 dla normalnego tekstu. Nieprzestrzeganie tych wymagań może skutkować odpowiedzialnością prawną na mocy ADA (USA), EAA (Europa) i Sekcji 508. W samych Stanach Zjednoczonych w 2023 roku złożono ponad 4600 pozwów o dostępność, a problemy z kontrastem były jednymi z najczęściej wskazywanych kwestii.

Color Picker Web symuluje 8 typów wad widzenia kolorów: Protanopia — ślepota na czerwone (1,3% mężczyzn). Protanomalia — zmniejszona wrażliwość na czerwień (1,3% mężczyzn). Deuteranopia — daltonizm zielony (1,2% mężczyzn). Deuteranomalia — zmniejszona wrażliwość na zieleń (5% mężczyzn, najczęstszy rodzaj). Tritanopia — niebieska ślepota (0,001% populacji). Tritanomalia — zmniejszona wrażliwość na niebieski (rzadko). Achromatopsja — całkowita ślepota barwna, widzi tylko odcienie szarości (0,003% populacji). Achromatomalia — zmniejszona percepcja kolorów we wszystkich kanałach (bardzo rzadko). Każda symulacja używa klinicznej macierzy transformacji kolorów zastosowanej do wybranego koloru w czasie rzeczywistym.

Psychologia kolorów w projektowaniu interfejsów użytkownika bada, jak kolory wpływają na emocje, percepcję i zachowanie użytkowników. Kluczowe skojarzenia: Niebieski — zaufanie, niezawodność, spokój (używane przez Facebook, Twitter, PayPal, LinkedIn). Zielony — wzrost, zdrowie, natura, sukces (używane przez Spotify, WhatsApp, marki pełnowartościowej żywności). Czerwony — pilność, pasja, energia, apetyt (używane w banerach sprzedażowych, markach żywności, wezwaniach do działania). Fioletowy — luksus, kreatywność, mądrość (używane przez Cadbury, Hallmark, marki kosmetyczne). Żółty — optymizm, ciepło, uwaga (używane do ostrzeżeń, wyróżnień w sprzedaży). Pomarańczowy — entuzjazm, przyjazność (używane przez Amazon, Fanta, Harley-Davidson). Psychologia koloru wpływa na wskaźniki konwersji, postrzeganie marki i utrzymanie użytkowników.

Tworzenie palety kolorów systemu projektowego obejmuje 5 kroków: (1) Zdefiniuj swój główny kolor marki i przekształć go na HSL. (2) Wygeneruj dziewięciostopniową skalę kolorów (50–900), systematycznie dostosowując jasność — jaśniejsze stopnie (50–300) do tła i wariantów jasnych, ciemniejsze stopnie (600–900) do tekstu i trybu ciemnego. (3) Powtórz proces dla kolorów wtórnych, akcentujących, sukcesu, ostrzeżenia, błędu i neutralnych. (4) Utwórz semantyczne tokeny (--color-primary, --color-primary-hover, --color-surface), które odnoszą się do stopni skali. (5) Sprawdź, czy każda kombinacja tekstu i tła spełnia wymagania WCAG AA. Użyj Color Picker Web do generowania skal, weryfikacji kontrastu i eksportu wartości HEX/HSL jako tokenów projektowych do Figma lub CSS.

Zasada 60-30-10 to klasyczna zasada projektowania przy tworzeniu zrównoważonych, wizualnie atrakcyjnych schematów kolorystycznych. 60% — dominujący/neutralny kolor (tła, ściany, duże powierzchnie) — zazwyczaj jasny neutralny, który nadaje ogólny ton. 30% — kolor wtórny (meble, nagłówki, panele boczne) — uzupełnia dominujący i dodaje głębi. 10% — kolor akcentowy (wezwania do działania, przyciski, wyróżnienia, ważne linki) — tworzy wizualne zainteresowanie i przyciąga uwagę do kluczowych działań. W projektowaniu stron internetowych przekłada się to na: 60% tła i powierzchni bazowych, 30% obszarów zawartości i elementów pomocniczych interfejsu, 10% przycisków głównych, stanów aktywnych i ważnych wyróżnień. Ten podział zapobiega wizualnemu przeciążeniu przy jednoczesnym utrzymaniu hierarchii.

Relatywna luminancja mierzy postrzeganą jasność koloru w skali od 0 (czarny) do 1 (biały). Obliczenia: (1) Przekształć każdy kanał RGB (0–255) na wartość dziesiętną (0–1) przez podzielenie przez 255. (2) Usuń korekcję gamma: jeśli wartość ≤ 0,04045, podziel przez 12,92; w przeciwnym razie zastosuj (wartość + 0,055) / 1,055 podniesione do potęgi 2,4. (3) Zastosuj ważoną formułę: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Wagi odzwierciedlają wrażliwość ludzkiego oka — największa wrażliwość na zielony, mniejsza na czerwony, najmniejsza na niebieski. (4) Współczynnik kontrastu = (L_jasniejszy + 0,05) / (L_ciemniejszy + 0,05). Przesunięcie 0,05 reprezentuje światło otoczenia na typowym wyświetlaczu. Color Picker Web wykonuje te obliczenia natychmiast.

HSL (Odcień, Nasycenie, Jasność) oraz HSB/HSV (Odcień, Nasycenie, Jasność/Wartość) oba używają Odcienia i Nasycenia, ale różnią się trzeciym kanałem. W HSL, Jasność 50% to czysty, w pełni nasycony kolor; 0% to czarny, a 100% to biały. Jest symetryczna. W HSB/HSV, Jasność/Wartość 100% to kolor czysty; 0% to zawsze czerń niezależnie od innych wartości. HSB jest bardziej intuicyjny do wyboru kolorów, ponieważ najpierw można wybrać żywy kolor przy 100% jasności, a następnie go przyciemnić — co czyni go domyślnym w Photoshopie, Figma i Illustratorze. HSL jest bardziej intuicyjny dla CSS, ponieważ można płynnie interpolować między ciemnymi a jasnymi wersjami tego samego odcienia.

Mieszanie kolorów addytywne (RGB) i mieszanie kolorów subtraktywne (CMYK) to dwa podstawowe modele kolorów. Addytywny (RGB) — używany przez urządzenia emitujące światło (ekrany, projektory, diody LED). Kolory powstają poprzez dodawanie światła. Połączenie wszystkich trzech kanałów na maksymalnym poziomie (R=255, G=255, B=255) daje biały. Brak światła (R=0, G=0, B=0) daje czarny. Subtraktywny (CMYK) — używane w druku. Tusze absorbują (odejmują) długości fali światła. Połączenie wszystkich tuszy w maksymalnym natężeniu absorbuje całe światło, wytwarzając czerń (w teorii — w praktyce dodaje się tusz Key/czarny, ponieważ mieszanie tuszy jest niedoskonałe). Praktyczne zastosowanie: projektuj prace cyfrowe w RGB, a następnie konwertuj do CMYK do druku — pamiętając, że niektóre żywe kolory RGB nie mogą być odtworzone w CMYK.

Temperatura barwowa opisuje ciepło lub chłód koloru, mierzone w kelwinach (K) dla źródeł światła i postrzegane percepcyjnie dla kolorów w projektowaniu. Ciepłe kolory (czerwienie, pomarańcze, żółcie — odcienie 0°–60° i 300°–360°) sprawiają wrażenie energicznych, pilnych i zachęcających. Posuwają się wizualnie do przodu — elementy w ciepłych kolorach wydają się bliższe. Chłodne kolory (błękity, zielenie, fiolety — odcienie 120°–240°) wywołują uczucie spokoju, zaufania i profesjonalizmu. Wizualnie cofają się — elementy w chłodnych kolorach wydają się być dalej. Neutralny (biele, szarości, beże, zielenie w odcieniach 90°–120°) są zrównoważone i wszechstronne. W projektowaniu interfejsów użytkownika ciepłe kolory pobudzają działanie (CTA), chłodne kolory budują zaufanie (nagłówki, tła), a kolory neutralne zapewniają strukturę. Sekcja „O kolorze” w Color Picker Web pokazuje postrzeganą temperaturę wybranego koloru.