Konwerter Kodów Kolorów (Wszystkie Formaty)

Witaj w Konwerterze Kodów Kolorów (Wszystkie Formaty), darmowym narzędziu online, które konwertuje dowolną wartość koloru na wszystkie popularne formaty jednocześnie. Wklej kod HEX, triadę RGB, definicję HSL lub HSV, kwartet CMYK, a nawet nazwę koloru CSS — i natychmiast odczytaj równoważne wartości, zobacz podgląd na żywo, sprawdź kontrast dostępności WCAG i przeglądaj wygenerowaną paletę projektanta zawierającą kolory dopełniające, triadyczne, analogiczne, tony i odcienie.

Dlaczego warto korzystać z uniwersalnego konwertera kolorów?

Większość konwerterów kolorów online obsługuje tylko jeden kierunek (np. HEX na RGB lub RGB na CMYK), co zmusza do korzystania z wielu narzędzi. Ten konwerter akceptuje każdy popularny format w jednym polu, automatycznie wykrywa wpisany format i zwraca wszystkie pięć naraz wraz z podglądem na żywo — oszczędzając czas podczas pracy między narzędziami webowymi, mobilnymi, drukarskimi i projektowymi.

Obsługiwane formaty wejściowe

Jaka jest różnica między modelami kolorów HSL i HSV?

Zarówno HSL, jak i HSV opisują kolor za pomocą trzech intuicyjnych kanałów — odcienia (Hue), nasycenia (Saturation) oraz trzeciej wartości związanej z jasnością — ale różnią się właśnie tym trzecim kanałem.

• HSL — Hue, Saturation, Lightness: jasność (Lightness) mieści się w zakresie od 0% (czysta czerń) przez 50% (najbardziej żywa wersja odcienia) do 100% (czysta biel). HSL jest preferowany w CSS, ponieważ sprawia, że rozjaśnianie lub przyciemnianie koloru jest symetryczne i przewidywalne.
• HSV / HSB — Hue, Saturation, Value (Brightness): wartość (Value) lub jasność (Brightness) mieści się w zakresie od 0% (czysta czerń) do 100% (najpełniejsza, najbardziej nasycona wersja odcienia). HSV to model stojący za próbnikami kolorów w programach Photoshop, Figma i większości desktopowych narzędzi projektowych.

Na przykład w pełni nasycony czerwony to hsl(0, 100%, 50%) w HSL, ale hsv(0, 100%, 100%) w HSV. Ten sam kolor w dwóch różnych modelach mentalnych — oba przydatne, zależnie od tego, czy myślisz jak autor CSS, czy jak malarz.

Dlaczego moje wartości CMYK wyglądają nieco inaczej niż w oprogramowaniu do druku?

RGB to model addytywny używany przez ekrany, podczas gdy CMYK to model subtraktywny używany przez drukarki. Konwersja matematyczna wykonywana przez to narzędzie jest szybkim przybliżeniem, które nie uwzględnia profilu kolorów ICC, limitów pokrycia farbą ani poprawek specyficznych dla papieru. W przypadku prac produkcyjnych do druku zawsze polegaj na profilu CMYK z zarządzaniem kolorami w oprogramowaniu projektowym (takim jak US Web Coated SWOP v2 lub Coated FOGRA39). Używaj tego konwertera jako szybkiego odniesienia, gdy potrzebujesz kwartetu CMYK „wystarczająco bliskiego” na etapie wczesnych dyskusji projektowych.

Jak działa sprawdzanie kontrastu WCAG?

Wytyczne dotyczące dostępności treści internetowych (WCAG) definiują współczynnik kontrastu między dwoma kolorami na podstawie ich luminancji względnej — percepcyjnego modelu jasności, który nadaje większą wagę kolorowi zielonemu niż czerwonemu i czerwonemu niż niebieskiemu. Współczynnik wynosi od 1:1 (brak kontrastu) do 21:1 (czysta czerń na czystej bieli).

• AAA — współczynnik ≥ 7:1, spełnia najsurowszy poziom dostępności dla tekstu głównego
• AA — współczynnik ≥ 4,5:1, minimum dla tekstu głównego w większości przepisów
• AA Large — współczynnik ≥ 3:1, wystarczający dla dużego tekstu (18pt+ lub 14pt pogrubione) i graficznych elementów interfejsu
• Fail — współczynnik < 3:1, nie używaj tej kombinacji dla tekstu

Narzędzie oblicza kontrast względem czystej bieli i czystej czerni, a następnie wskazuje lepszy wybór jako domyślny kolor tekstu, gdy dany odcień jest używany jako tło.

Czy konwerter generuje paletę kolorów?

Tak. Po każdej konwersji narzędzie buduje paletę projektanta z tego samego odcienia, w tym:

• Dopełniający — kolor znajdujący się bezpośrednio po przeciwnej stronie koła (obrót o 180°), przydatny do tworzenia wysokokontrastowych akcentów
• Triadyczny — dwa kolory rozmieszczone równomiernie co 120°, zrównoważone i żywe
• Analogiczny — sąsiednie odcienie w zakresie ±30°, przydatne do tworzenia harmonijnych gradientów i teł
• Tony — trzy jaśniejsze odmiany (ten sam odcień, większa jasność)
• Odcienie — trzy ciemniejsze odmiany (ten sam odcień, mniejsza jasność)

Kliknij dowolną próbkę palety, aby natychmiast załadować ją do konwertera jako nowy punkt wyjścia — idealne do szybkiego iterowania nad kolorem marki, zestawem ikon lub motywem interfejsu.

Jak korzystać z tego narzędzia

1. Wprowadź lub wybierz kolor — wpisz dowolną wartość (HEX, RGB, HSL, HSV, CMYK lub nazwę koloru CSS) w polu wejściowym lub kliknij małą próbkę koloru, aby otworzyć natywny próbnik kolorów przeglądarki.
2. Konwertuj — kliknij przycisk Konwertuj. Narzędzie automatycznie wykryje podany format i obliczy wszystkie pozostałe.
3. Skopiuj to, czego potrzebujesz — kliknij przycisk kopiowania obok wybranej wartości. Przycisk na chwilę wyświetli „fajkę”, potwierdzając, że wartość znajduje się w schowku.
4. Sprawdź dostępność — przejrzyj współczynniki kontrastu WCAG względem bieli i czerni, aby potwierdzić czytelność koloru.
5. Eksploruj paletę — kliknij dowolną próbkę w sekcji palety projektanta, aby ją konwertować i poszerzyć eksplorację projektu bez opuszczania strony.

Praktyczne zastosowania

Dla programistów stron internetowych

• Konwertuj HEX z makiety Figma na hsl() do użytku ze zmiennymi CSS i nowoczesnymi systemami motywów
• Generuj wartości rgba() dla półprzezroczystych nakładek bezpośrednio z koloru HEX marki
• Weryfikuj, czy kolor marki spełnia wymogi WCAG AA na białym tle przed wdrożeniem

Dla grafików

• Tłumacz kolory CSS ze stron internetowych na przybliżone wartości CMYK dla makiet drukowanych
• Twórz skalę tonalną (tony i odcienie) z jednego koloru wyjściowego
• Znajduj dopełniające lub triadyczne akcenty bez opuszczania przeglądarki

Dla projektantów UI i produktów

• Przechodź między HSV (próbnik Figmy) a HSL (CSS) podczas dokumentowania tokenów projektowych
• Automatycznie identyfikuj najlepszy kolor tekstu (czarny vs biały) dla dowolnego tła
• Szybko zapisuj lub udostępniaj przekonwertowane kolory poprzez adres URL strony wynikowej

Wskazówki dla najlepszych rezultatów

• Elastyczne separatory — parser akceptuje przecinki, spacje lub ukośniki w nawiasach, więc rgb(79 70 229) działa równie dobrze jak rgb(79, 70, 229).
• Używaj procentów — rgb(31%, 27%, 90%) jest prawidłowe; narzędzie wewnętrznie przelicza procenty na zakres 0–255.
• Wypróbuj nazwane kolory CSS — działa ponad 140 nazw, w tym nowoczesne dodatki jak rebeccapurple.
• Analizuj paski kanałów — wizualny rozkład kanałów RGB i CMYK ułatwia sprawdzenie, które atramenty dominują w wersji drukarskiej koloru.
• Traktuj CMYK jako wskazówkę — otwórz wynik w oprogramowaniu do druku z zarządzaniem kolorami, aby uzyskać ostateczną, dokładną wartość.

Często zadawane pytania

Czy muszę wpisywać symbol # przy wprowadzaniu wartości HEX?

Nie. Akceptowane są zarówno #4f46e5, jak i 4f46e5. Początkowy znak # jest opcjonalny.

Czy obsługiwane są 4- i 8-cyfrowe wartości HEX (z kanałem alfa)?

Parser je zaakceptuje, ale kanał alfa zostanie pominięty podczas konwersji, ponieważ klasyczne formy RGB, HSL, HSV i CMYK nie obsługują przezroczystości. Narzędzie skupia się wyłącznie na barwie.

Czy mogę udostępnić lub dodać do zakładek przekonwertowany kolor?

Tak. Formularz jest przesyłany metodą GET, więc URL zawiera przekonwertowany kolor. Skopiuj URL strony po konwersji, aby udostępnić lub zapisać dokładną stronę wynikową.

Dlaczego niektóre wartości HEX są wyświetlane wielkimi literami?

Wynik jest kanonizowany do wielkich liter (np. #4F46E5), co jest konwencją stosowaną w wielu przewodnikach stylu i markach. Możesz wklejać je małymi literami — oba formaty są równoważne.

Czy narzędzie działa na urządzeniach mobilnych?

Tak. Interfejs jest w pełni responsywny, a formularz, paleta i karty kontrastu układają się w jedną kolumnę na mniejszych ekranach, co zapewnia wygodną obsługę dotykową.

Dodatkowe zasoby

• HSL i HSV - Wikipedia (ang.)
• Model kolorów CMYK - Wikipedia (ang.)
• Wymagania WCAG 2.1 dotyczące kontrastu (minimum)