Jak korzystać z pipety kolorów
- Wybierz kolor polem koloru – otworzy się systemowy wybór koloru – albo wklej kod w polu tekstowym: HEX z
#lub bez (3, 4, 6 albo 8 znaków),rgb()irgba(),hsl()ihsla()z przecinkami lub spacjami, zwykłą listę jak31, 78, 121albo jedną ze 148 nazw kolorów CSS (są angielskie:teal,navy,gold). - Pobierz kolor z obrazu: wczytaj, upuść lub wklej zdjęcie, logo albo zrzut ekranu i kliknij lub stuknij wybrane miejsce; lupa pokazuje piksele wokół znacznika. W Chrome, Edge i Operze na komputerze przycisk Pobierz z ekranu odczyta dowolny piksel na monitorze – także z innego programu.
- Skopiuj potrzebny format. Każda próbka w palecie po stuknięciu kopiuje swój kod HEX.
Obraz jest odczytywany na twoim urządzeniu i nigdzie nie jest wysyłany.
Formaty kolorów w skrócie
| Format | Przykład | Gdzie się go używa |
|---|---|---|
| HEX | #1f4e79 | CSS, HTML, programy graficzne, księgi znaku |
| RGB | rgb(31, 78, 121) | CSS, ekrany, edytory zdjęć |
| HSL | hsl(209, 59%, 30%) | CSS; łatwo ręcznie rozjaśnić albo przyciemnić kolor |
| HSV / HSB | hsv(209, 74%, 47%) | próbniki kolorów w Photoshopie, Figmie i podobnych programach |
| CMYK | cmyk(74%, 36%, 0%, 53%) | druk (tylko jako punkt wyjścia) |
HEX na RGB: HEX to RGB zapisane w systemie szesnastkowym. Każda para znaków to jeden kanał od 00 do ff (0–255), więc 1f = 1 × 16 + 15 = 31, 4e = 4 × 16 + 14 = 78, a 79 = 7 × 16 + 9 = 121. Siódmy i ósmy znak dodają przezroczystość (kanał alfa), a #abc to skrót od #aabbcc. Zamiana w drugą stronę, z RGB na HEX, działa tak samo: wpisz rgb(31, 78, 121), a dostaniesz #1f4e79.
HSL i HSV zaczynają od tego samego odcienia – kąta na kole barw (0° czerwony, 120° zielony, 240° niebieski) – przy kanałach R, G i B przeskalowanych do 0–1. Jasność to L = (max + min) / 2, a nasycenie w HSL to (max − min) / (1 − |2L − 1|). W HSV wartość to po prostu V = max, a nasycenie (max − min) / max. Dlatego czysta czerwień to hsl(0, 100%, 50%), ale hsv(0, 100%, 100%).
CMYK jest tu liczony wzorem z podręcznika: K = 1 − max, potem C = (1 − R − K) / (1 − K) i tak samo M i Y. Drukarnie przeliczają kolory profilami ICC dopasowanymi do papieru i farb, więc ich liczby będą inne – traktuj ten wynik jako punkt wyjścia.
Najbliższa nazwa CSS to kolor, do którego odległość w przestrzeni CIELAB (ΔE według CIE76) jest najmniejsza; różnica ΔE około 2,3 bywa podawana jako najmniejsza, jaką zauważa człowiek.
Przykład: #1f4e79
Domyślny granat dzieli się na 1f, 4e i 79, czyli RGB 31, 78, 121. Największy jest kanał niebieski (121 / 255 = 0,475), najmniejszy czerwony (0,122), więc V = 47%, nasycenie HSV = (121 − 31) / 121 = 74%, jasność = (0,475 + 0,122) / 2 = 30%, a nasycenie HSL = 59%. Odcień wychodzi 208,7°, pokazany jako 209. Luminancja względna wynosi 0,0712, więc kontrast z białym tekstem to 8,66:1 (poziom AAA), a z czarnym tylko 2,42:1. Najbliższa nazwa to steelblue, oddalona o ΔE 21 – to więc tylko przybliżony opis.
Kontrast i dostępność (WCAG 2.2)
Sprawdzenie kontrastu odpowiada definicjom z wytycznych W3C dotyczących dostępności treści internetowych (WCAG) 2.2. Każdy kanał jest linearyzowany (c / 12,92 do 0,04045, powyżej ((c + 0,055) / 1,055)2,4), luminancja względna to L = 0,2126 R + 0,7152 G + 0,0722 B, a współczynnik kontrastu to (Ljaśniejszy + 0,05) / (Lciemniejszy + 0,05) – od 1:1 do 21:1.
| Poziom | Zwykły tekst | Duży tekst |
|---|---|---|
| AA (kryterium 1.4.3) | 4,5:1 | 3:1 |
| AAA (kryterium 1.4.6) | 7:1 | 4,5:1 |
Duży tekst to co najmniej 18 punktów (24 piksele CSS) albo 14 punktów pogrubionych (około 18,7 piksela). Wyniki są obcinane, a nie zaokrąglane, do dwóch miejsc po przecinku, więc 4,499:1 nigdy nie pokaże się jako zaliczone, a kolor półprzezroczysty jest najpierw nakładany na biel lub czerń, z którą go porównujemy. W Polsce strony i aplikacje podmiotów publicznych muszą spełniać WCAG 2.1 na poziomie AA (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej), a progi kontrastu dla tekstu są w wersjach 2.1 i 2.2 takie same.
Rozjaśnienia, przyciemnienia i harmonie
Rozjaśnienia mieszają kolor z bielą w krokach po 20%, a przyciemnienia – z czernią, co daje gotową skalę na stany najechania, obramowania i tła. Harmonie zachowują nasycenie i jasność, a obracają odcień: kolor dopełniający leży 180° dalej, analogiczne 30° po obu stronach, triada to trzy kolory co 120°, a dopełnienie rozszczepione używa 150° i 210°.
A kolory farb RAL i NCS?
Ta pipeta pracuje na kolorach ekranowych. Wzorniki farb, takie jak RAL czy NCS, opisują kolory fizyczne, a ich odpowiedniki w RGB i HEX są zawsze tylko przybliżeniem – zależą od oświetlenia, połysku farby i ekranu. Do zamówienia farby używaj wzornika producenta; ta strona przyda się, gdy potrzebujesz koloru do projektu, prezentacji albo strony internetowej.
Wskazówki
- Ten sam kod HEX może wyglądać inaczej na dwóch ekranach (jasność, tryb nocny, monitory o szerokim gamucie), ale liczby się nie zmieniają.
- Zdjęcia rzadko mają jeden płaski kolor: zaznacz Średnia z 5 × 5 pikseli albo porównaj kilka miejsc.
- Do ozdobnych napisów przyda się generator czcionek, a do etykiet z kodem – generator kodów kreskowych.
Najczęstsze pytania
Jak zamienić HEX na RGB?
Podziel sześć znaków na trzy pary i odczytaj każdą jako liczbę szesnastkową: #1f4e79 → 1f = 31, 4e = 78, 79 = 121, czyli rgb(31, 78, 121). Wklej dowolny kod HEX powyżej, a od razu dostaniesz RGB, HSL, HSV i CMYK.
Czym różni się HSL od HSV (HSB)?
Oba używają tego samego kąta odcienia. HSL umieszcza czyste kolory przy jasności 50%, a 100% to zawsze biel; HSV umieszcza je przy wartości 100%, a do bieli dochodzi się, obniżając nasycenie. CSS używa HSL, a próbniki w Photoshopie i Figmie – HSV, nazywanego tam HSB.
Czy wartość CMYK nadaje się do druku?
Nie. Pochodzi z prostego wzoru, który nic nie wie o papierze, farbach ani maszynie drukarskiej. W profesjonalnym druku kolory przelicza się profilem ICC; daj drukarni wartość RGB lub HEX i poproś o próbny wydruk albo użyj wartości Pantone lub CMYK z księgi znaku.
Jak pobrać kolor ze zdjęcia albo z ekranu?
Naciśnij Pobierz z obrazu, wybierz plik (albo go upuść lub wklej zrzut ekranu), a potem kliknij lub stuknij wybrane miejsce; gdy obraz jest zaznaczony, strzałki przesuwają znacznik, a Enter pobiera kolor. Pobierz z ekranu działa w Chrome, Edge i Operze na komputerach; Firefox, Safari i przeglądarki mobilne jeszcze tego nie obsługują, więc tam przycisku nie ma.
Czy mój obraz jest gdzieś wysyłany?
Nie. Przeglądarka sama go dekoduje i odczytuje; nic nie trafia na serwer.
Ostatnia aktualizacja: 15 października 2026