# Color Picker Online

> Color picker z kołami HSV, HSL i malarskim RYB, gotowe harmonie barw i konwersja HEX, RGB, HSL, OKLCH, CMYK. Najbliższy token Tailwind. Za darmo.

URL: https://acrafto.com/pl/color-picker-online-konwerter-kolorow/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Wybierz kolor na kole, dopracuj go na płótnie nasycenia i jasności, a odczytaj go w każdym formacie, jakiego używa Twój projekt, od `#RRGGBB` po `oklch()`. Ten picker robi też to, co inne narzędzia pomijają: trzy geometrie koła, w tym tradycyjne malarskie koło RYB, harmonie, które same budują paletę, kanał przezroczystości oraz eksport całej palety jednym kliknięciem jako zmienne CSS, SCSS albo JSON. Wszystko liczone lokalnie w Twojej przeglądarce.

## RYB czy RGB? Trzy koła kolorów zamiast jednego

Przełącznik **Tryb koła** zmienia rozmieszczenie odcieni na kole:

- **HSV** i **HSL** to koła cyfrowe. Odcienie leżą tak, jak miesza je światło na ekranie. Różnią się kwadratowym polem: w HSV najjaśniejszy róg to czysty odcień, HSL umieszcza czyste odcienie w połowie jasności, a biel jest powyżej.
- **RYB (malarskie)** rozmieszcza odcienie tak, jak uczą się ich malarze: czerwony, żółty i niebieski jako barwy podstawowe, a między nimi pomarańczowy, zielony i fioletowy (zobacz [model RYB na angielskiej Wikipedii](https://en.wikipedia.org/wiki/RYB_color_model), po angielsku, bo polskiej wersji hasła nie ma). Różnicę widać głównie w harmoniach. Na kole RYB dopełnieniem czerwieni jest **zieleń**, a dopełnieniem błękitu **pomarańcz**, czyli klasyczne pary znane z plastyki. Koło cyfrowe paruje czerwień z cyjanem. Jeśli paleta “dopełniająca” ze zwykłego pickera kiedyś wyglądała nie tak, to właśnie dlatego.

## Harmonie kolorów, które same budują paletę

W polu **Harmonia kolorów** wybierz regułę. Koło zaznaczy kolory towarzyszące, a pod nim pojawi się gotowa paleta:

- **Dopełniające (komplementarne):** jeden kolor przeciwległy. Najsilniejszy kontrast, dobry do pojedynczego akcentu obok głównego koloru marki.
- **Rozdzielone dopełniające:** dwaj sąsiedzi koloru dopełniającego. Niemal tyle samo kontrastu, dużo łatwiej to zbalansować.
- **Triadyczne:** trzy odcienie rozłożone równomiernie po kole. Żywe, a przy tym stabilne, gdy jeden dominuje, a pozostałe dwa stosujesz oszczędnie.
- **Tetradyczne (kwadrat):** cztery odcienie. Bogate zestawienia do ilustracji i wykresów, trudne do zbalansowania w interfejsie aplikacji.
- **Analogiczne:** najbliżsi sąsiedzi. Spokojne zestawienie do teł i przejść.
- **Monochromatyczne:** jeden odcień w kilku poziomach jasności. Najbezpieczniejszy wybór dla stanów przycisków (hover, active, disabled).

Całą paletę skopiujesz jednym kliknięciem w formacie, jaki wybierzesz: zwykły **HEX**, **RGB**, **HSL**, **OKLCH**, gotowe do wklejenia **zmienne CSS** (`--color-1: …`), **zmienne SCSS** albo **JSON** do kodu. Czy kolory palety zachowują kontrast też dla osób, które gorzej rozróżniają odcienie, szybko sprawdzisz na zrzucie ekranu po [konwersji na odcienie szarości](https://acrafto.com/pl/konwersja-obrazow-na-odcienie-szarosci-online/).

## Konwersja HEX, RGB, HSL, OKLCH i CMYK: wklej cokolwiek, odczytaj wszystko

Pola wejściowe przyjmują niemal każdy zapis koloru: `#f80`, `#ff8800`, ośmiocyfrowy hex z przezroczystością, `rgb()` i `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` oraz nazwane kolory CSS, jak `rebeccapurple`. Bez względu na to, co wpiszesz, dostaniesz siedem spójnych wyników: **HEX, RGB, HSL, HSV, LCH, OKLCH i CMYK**, każdy z własnym przyciskiem kopiowania.

Suwak **Nieprzezroczystość (alfa)** pod podglądem przełącza wyniki na zapisy z przezroczystością: `#RRGGBBAA`, `rgba()` i `hsla()`. Podgląd rysuje się na szachownicy, więc przezroczystość widać od razu.

## Najbliższy token Tailwind CSS dla dowolnego koloru

Dwa znaczniki pod podglądem nazywają kolor za Ciebie: **najbliższa nazwana barwa CSS** (przydatna do szybkich prototypów) oraz **najbliższy token Tailwind**, na przykład `orange-500`. Dzięki temu zostajesz w swoim systemie projektowym i nie musisz wymyślać jednorazowych wartości. Kliknięcie znacznika go skopiuje.

Rozwiązuje to pytanie, które pada przy każdym przekazaniu projektu: grafik przesłał mi kod hex, która klasa Tailwind pasuje najlepiej? Dopasowanie liczone jest względem domyślnej palety Tailwind CSS 4 (zobacz [dokumentację Tailwind](https://tailwindcss.com/docs/colors), po angielsku), więc token od razu wkleisz do nazwy klasy.

## Którego formatu koloru użyć?

| Format | Pełna nazwa | Kiedy go użyć |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Domyślny wybór dla sieci.** Krótki, wszędzie wspierany, łatwy do skopiowania. Osiem cyfr dodaje przezroczystość. |
| **RGB** | Red, Green, Blue | **Tak myślą ekrany.** Trzy kanały światła od 0 do 255. Format, którego oczekuje większość API i kodu canvas. |
| **HSL** | Hue, Saturation, Lightness | **Do korekt na oko.** “Trochę jaśniej” albo “mniej nasycony” oznacza zmianę jednej liczby. |
| **HSV** | Hue, Saturation, Value | **Programy graficzne.** Model, na którym opiera się wybór koloru w Photoshopie i GIMP-ie. |
| **LCH** | Lightness, Chroma, Hue | **Percepcyjnie jednolity.** Te same kroki liczbowe wyglądają jak te same kroki wizualne, co HSL tylko udaje. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Nowoczesny wybór dla CSS.** Naprawia przesunięcia odcienia w błękitach, które trapią LCH. Wspierają go wszystkie aktualne przeglądarki, dobry do tokenów projektowych. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Orientacja dla druku.** Przybliżona konwersja do rozmowy z drukarnią, ostateczne wartości zależą od jej profilu kolorów. |

Dlaczego OKLCH jest percepcyjnie bardziej jednolity niż starsze modele, wyjaśnia twórca przestrzeni Oklab, Björn Ottosson, w [oryginalnym artykule](https://bottosson.github.io/posts/oklab/) (po angielsku). Składnię i wsparcie przeglądarek podsumowuje [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (po angielsku). Jak działa model druku, opisuje [polska Wikipedia w haśle CMYK](https://pl.wikipedia.org/wiki/CMYK).

## Drobiazgi, które oszczędzają czas

- **Historia zapisuje się sama.** Ostatnie 24 kolory przetrwają odświeżenie strony. Zostają tylko w pamięci Twojej przeglądarki i nigdzie się nie wysyłają.
- **Kroplomierz.** W przeglądarkach z API EyeDropper (Chrome i Edge) wybierzesz kolor z dowolnego miejsca na ekranie, nawet spoza okna przeglądarki. Kolor ze zdjęcia albo pliku z logo sprawdzisz w [internetowym kroplomierzu](https://acrafto.com/pl/kroplomierz-online-kolory-z-obrazu/).
- **Sterowanie klawiaturą.** Koło oraz pole nasycenia i jasności reagują na strzałki, więc kolor dopracujesz małymi krokami.
- **Gotowe kolory** to popularne barwy podstawowe, gdy potrzebujesz tylko szybkiego punktu startowego.

## Najczęstsze pytania

### Jak przekonwertować OKLCH na HEX?

Wklej wartość `oklch()` w pole OKLCH, a pozostałe wyniki, w tym HEX, przeliczą się od razu. Działa to też w drugą stronę: wpisz HEX i odczytaj odpowiadającą mu wartość `oklch()`. Jedno zastrzeżenie: OKLCH potrafi opisać też kolory spoza zakresu sRGB, a te są przycinane do tego, co pokaże sRGB. Bardzo nasycony `oklch()` nie będzie więc wyglądał tak samo jak jego wersja HEX na ekranie o szerokim gamucie.

### Czy mogę używać oklch() w produkcyjnym CSS?

Tak. Wszystkie aktualne wersje Chrome, Edge, Firefoksa i Safari obsługują `oklch()`, który stał się popularnym zapisem dla tokenów projektowych (Tailwind CSS 4 definiuje w nim całą paletę). Dla bardzo starych przeglądarek podaj w linii przed nim wartość zapasową HEX. To narzędzie daje Ci obie wartości.

### Dlaczego harmonie zmieniają się po przełączeniu na koło RYB?

Ponieważ to, co jest "naprzeciwko", zależy od rozmieszczenia odcieni na okręgu. Koło RYB rozkłada pigmentowe barwy podstawowe równomiernie, więc pary dopełniające odpowiadają temu, co znają malarze: czerwony i zielony, niebieski i pomarańczowy, żółty i fioletowy. Koła HSV i HSL rozkładają odcienie zgodnie z mieszaniem światła, dlatego parują czerwień z cyjanem. Żadne z nich nie jest błędne: RYB odpowiada tradycji plastycznej, HSV i HSL temu, co robią ekrany.

### Czy mogę ufać wartościom CMYK do druku?

Traktuj je jako orientacyjne. Rzeczywista konwersja do druku zależy od [profilu ICC](https://pl.wikipedia.org/wiki/Profil_ICC) drukarki, papieru i tuszu. Ten sam kolor RGB wyjdzie inaczej na papierze kredowym, a inaczej na niepowlekanym. Wartości tutaj liczy standardowy wzór, który przybliża wynik, ale ostateczny odbitek zależy od drukarni.

### Gdzie jest przycisk kroplomierza w Firefoksie albo Safari?

Jest celowo ukryty. [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, po angielsku), na którym opiera się przycisk, obsługują na razie tylko przeglądarki oparte na Chromium (Chrome, Edge, Opera). Pozostałe funkcje narzędzia działają wszędzie, brakuje tylko wyboru koloru z ekranu. Jeśli potrzebujesz koloru z obrazu, skorzystaj z [internetowego kroplomierza](https://acrafto.com/pl/kroplomierz-online-kolory-z-obrazu/), który działa we wszystkich przeglądarkach.

### Czy moja historia kolorów zostaje prywatna?

Tak. Historia jest zapisana w localStorage Twojej przeglądarki, na Twoim urządzeniu. Nic, co wybierzesz, wklejasz albo skopiujesz, nigdzie się nie wysyła. Całe narzędzie działa jako JavaScript w przeglądarce, co możesz sprawdzić na karcie Sieć w narzędziach deweloperskich.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))