Konwerter kolorów

Konwerter kolorów upraszcza zarządzanie kolorami — bez wysiłku konwertuje barwy między formatami HEX, RGB i HSL. Idealny dla projektantów i programistów; zapewnia spójność kolorów w projektach webowych i graficznych. Wpisz wartość HEX albo użyj interaktywnego próbnika, by zobaczyć natychmiastową konwersję.

Built by Bob Article by Lace QA by Ben Shipped April 26, 2026

Jak używać

1
Wpisz kod koloru HEX w pole wejściowe albo wybierz kolor próbnikiem.
2
Narzędzie automatycznie wyświetli skonwertowane wartości RGB i HSL w czasie rzeczywistym.
3
Skopiuj dowolny format koloru do schowka jednym kliknięciem.

📏 REM to PX Converter ✨ CSS Animation Generator 📐 Unit Converter

Często zadawane pytania

Czym jest format HEX?

Format HEX to szesnastkowy zapis koloru, powszechnie używany w projektowaniu webowym. Składa się z „#” i sześciu znaków alfanumerycznych (np. #RRGGBB), gdzie każda para reprezentuje składową czerwoną, zieloną i niebieską.

Jak konwertować RGB na HSL tym narzędziem?

Narzędzie automatycznie konwertuje kolor, który wpiszesz (przez próbnik albo wpisując wartość HEX), na odpowiednie wartości RGB i HSL, pokazując je w czasie rzeczywistym. Nie musisz nic liczyć ręcznie.

Dlaczego są różne formaty kolorów — HEX, RGB i HSL?

Różne formaty istnieją, bo służą różnym celom i procesom pracy. HEX jest zwięzły dla webu, RGB jest intuicyjne dla wyświetlaczy cyfrowych (model addytywny), a HSL bywa preferowane przez projektantów ze względu na percepcyjną jednorodność i łatwość regulacji (barwa, nasycenie, jasność).

Czy mogę używać tego konwertera w projektach webowych?

Tak. To narzędzie jest idealne dla projektantów i programistów webowych do szybkiej konwersji między HEX, RGB i HSL — zapewnia spójność i dokładność w projektach. Daje też wyjście jako zmienna CSS dla wygody.

Czy narzędzie jest dokładne do precyzyjnego dopasowania kolorów w pracy profesjonalnej?

Tak, narzędzie wykonuje standardowe matematyczne konwersje między przestrzeniami kolorów HEX, RGB i HSL, zapewniając wysoką dokładność. Nadaje się do profesjonalnego użycia, gdzie precyzyjne dopasowanie koloru jest kluczowe — w projektowaniu graficznym, web developmencie i sztuce cyfrowej.

Ratings & Reviews

Rate this tool

Loading reviews…

Co robi konwerter kolorów

Wybierz kolor w dowolnym standardowym formacie — HEX, RGB, HSL albo HSV — a konwerter kolorów Microapp pokaże Ci równoważne wartości w każdym pozostałym formacie, obok siebie. Plus podgląd na żywo, żebyś widział dokładnie, z jakim kolorem pracujesz. Wszystko w przeglądarce, natychmiast.

Projektanci i programiści ciągle muszą tłumaczyć między formatami: spec brandu używa HEX, kod chce RGB z przezroczystością, design system tokenizuje HSL, edytor obrazów eksportuje RGBA. Konwersje ręczne są męczące i podatne na błędy. To zawsze poprawna wersja.

Jak go używać

Wpisz lub wklej wartość koloru w dowolne z czterech pól (HEX, RGB, HSL, HSV).
Pozostałe trzy pola natychmiast aktualizują się o przeliczone odpowiedniki. Podgląd pokazuje rzeczywisty kolor.
Użyj próbnika do wizualnego wyboru — przeciągnij kwadrat koloru albo suwak barwy, a wszystkie cztery wyjścia formatów aktualizują się w czasie rzeczywistym.
Kliknij „Kopiuj” obok dowolnego formatu, by wstawić go do schowka.

Przykład krok po kroku. Marka zielony Microapp:
HEX: #1B6B45
RGB: rgb(27, 107, 69)
HSL: hsl(150, 60%, 26%)
HSV: hsv(150, 75%, 42%)
Ten sam kolor, cztery formaty. Użyj tego, który pasuje do Twojego narzędzia.

Cztery formaty wyjaśnione

HEX. Sześć znaków szesnastkowych reprezentujących czerwony, zielony i niebieski (po dwa). #1B6B45 znaczy R=0x1B (27), G=0x6B (107), B=0x45 (69). Najczęstszy format w projektowaniu webowym — każdy plik CSS jest pełen HEX. Trzyznakowe skróty (#1B6) dublują każdy znak, ale działają tylko dla kolorów z parami tych samych cyfr.

RGB. Trzy liczby całkowite od 0 do 255 reprezentujące te same czerwony, zielony, niebieski. rgb(27, 107, 69) jest identyczne z #1B6B45 — te same liczby w systemie dziesiętnym. RGB ma wariant z kanałem alfa, RGBA, do częściowej przezroczystości: rgba(27, 107, 69, 0.5) to półprzezroczysta zieleń.

HSL. Barwa (0-360 stopni na kole barw), Nasycenie (0-100% intensywności koloru), Jasność (0-100% od czerni do bieli). hsl(150, 60%, 26%) oznacza barwę zielono-cyjanową, umiarkowanie nasyconą, dość ciemną. HSL jest intuicyjne dla projektantów — możesz „przyciemnić”, obniżając Jasność, bez zmiany barwy.

HSV. Barwa, Nasycenie, Wartość (czasem nazywana HSB). Podobne do HSL, ale Wartość reprezentuje jasność od czerni do czystego koloru, a nie od czerni do bieli. HSV to to, czego używa większość edytorów obrazów (Photoshop, Figma) w swoich próbnikach kolorów.

Kiedy używać którego formatu

Użyj tego formatu	Kiedy
HEX	CSS, specyfikacje designu, wiadomości na Slacku, wszędzie tam, gdzie potrzebujesz pojedynczego krótkiego ciągu
RGB / RGBA	Programowa manipulacja kolorem, częściowa przezroczystość, animacje CSS interpolujące kolory
HSL / HSLA	Generowanie motywu, palety kolorów, programowe rozjaśnianie/przyciemnianie koloru marki
HSV	Edytory obrazów, próbniki kolorów, miejsca, gdzie „wartość” lepiej mapuje się na postrzeganą jasność

Subtelności, na które trafiają projektanci

Jasność HSL i Wartość HSV — to NIE to samo. Dwa kolory z Jasnością HSL 50% mogą wyglądać bardzo różnie pod względem jasności, bo Jasność w HSL to punkt środkowy między czernią a bielą. HSV Wartość 50% znaczy „połowa jasności w pełni nasyconej wersji”. Przy automatyzacji „przyciemnij o 20%” użycie HSL daje bardziej jednolite wyniki w różnych barwach niż HSV.

HEX jest domyślnie w sRGB. Gdy piszesz #1B6B45, przeglądarka interpretuje to jako sRGB. Nowoczesne wyświetlacze często mają szersze gamuty (P3, AdobeRGB), a CSS teraz pozwala je określać: color(display-p3 0.106 0.420 0.270). Dla większości prac webowych trzymaj się sRGB / HEX; dla HDR albo prac zbliżonych do druku format z szerszym gamutem ma znaczenie.

Kanał alfa (przezroczystość) nie odnosi się do HEX. Prawie. Nowoczesny CSS obsługuje 8-znakowy HEX z alfą jako ostatnimi 2 znakami: #1B6B4580 to zieleń marki z alfą 50%. Starsze przeglądarki ignorują bajty alfy. RGBA i HSLA są powszechniej wspierane dla przezroczystości.

Częste pułapki kolorów

Zapomnienie # w HEX. CSS wymaga #1B6B45, nie 1B6B45. Konwerter Microapp akceptuje oba na wejściu, ale zawsze wypisuje z #.

Małe vs wielkie litery w HEX. Funkcjonalnie identyczne (#1b6b45 = #1B6B45). Większość design systemów standaryzuje na wielkich literach dla czytelności; CSS-owi to obojętne.

Błędy zaokrągleń przy konwersji. Konwersja w obie strony HSL → HEX → HSL może dać nieznacznie inną wartość HSL z powodu zaokrąglania liczb całkowitych (HEX to liczby całkowite; HSL to liczby zmiennoprzecinkowe). Konwerter Microapp używa wysokoprecyzyjnej matematyki wewnątrz; powinieneś widzieć spójne wyniki, ale w kodzie możesz widzieć dryf przez wiele konwersji w tę i z powrotem.

Powiązane narzędzia

Do konwersji tylko HEX na RGB szybsze jest prostsze narzędzie Hex to RGB. Aby znaleźć nazwany kolor najbliższy wartości HEX, Color Name Finder potrafi go zidentyfikować. Do generowania skoordynowanej palety wokół koloru bazowego użyj Color Palette Generator.