Konwerter Kolorów Online
Konwertuj między HEX, RGB, HSL, HSV, CMYK i HWB natychmiastowo, w przeglądarce.
Dlaczego warto
Każdy model kolorów w jednym konwerterze
6 modeli kolorów
HEX, RGB, HSL, HSV, CMYK i HWB. Konwersja między dowolną kombinacją w jednym kroku.
Prywatne
Konwersja odbywa się całkowicie w przeglądarce. Żadna wartość koloru nie opuszcza Twojego urządzenia.
Pełna precyzja
Dokładne wyniki zgodne ze specyfikacjami ICC, W3C CSS Color Level 4 i standardem sRGB.
Natychmiastowe
Konwersja w czasie rzeczywistym podczas pisania. Bez przycisków, bez czekania.
Jak to działa
Trzy kroki, żadnych komplikacji
Wprowadź kolor źródłowy
Wpisz lub wklej wartość koloru w dowolnym formacie: #FF5733, rgb(255,87,51), hsl(11,100%,60%), cmyk(0%,66%,80%,0%) lub hwb(11 0% 0%). Możesz też użyć dowolnego z 140 nazwanych kolorów CSS, np. 'tomato' lub 'steelblue'.
Wybierz format docelowy
Wybierz model kolorów do konwersji: HEX dla sieci, RGB dla ekranów, HSL dla nowoczesnego CSS, HSV/HSB dla narzędzi projektowych, CMYK dla druku lub HWB dla standardu CSS Color Level 4.
Skopiuj wynik
Uzyskaj dokładną wartość koloru w wybranym formacie jednym kliknięciem. Konwerter pokazuje również na żywo podgląd koloru i wszystkie wartości w każdym modelu jednocześnie.
FAQ
Masz pytania?
Model kolorów to matematyczna reprezentacja opisująca kolory systematycznie za pomocą współrzędnych numerycznych. Każdy model podchodzi do koloru z innej perspektywy: RGB opisuje go jako mieszankę światła (czerwonego, zielonego, niebieskiego); CMYK jako mieszankę farb (cyjan, magenta, żółty, czarny); HSL i HSV opisują go w kategoriach percepcji ludzkiej (odcień, nasycenie, jasność/wartość); HWB (CSS Color Level 4) używa odcienia, ilości bieli i ilości czerni. Nie ma 'najlepszego' modelu: wybór zależy od kontekstu użycia (ekran, druk, edycja kodu, narzędzia projektowe).
RGB (Red, Green, Blue) to addytywny model kolorów: połączenie wszystkich trzech przy maksymalnych wartościach daje biel. Stosowany jest w ekranach, monitorach, LED-ach i każdym urządzeniu emitującym światło. CMYK (Cyan, Magenta, Yellow, Key/Black) to model subtraktywny: wymieszanie trzech kolorów bazowych teoretycznie daje czerń (w praktyce ciemnobrązową błotnistą barwę, dlatego dodaje się czysty kanał czarny K). CMYK stosowany jest w druku. Konwersja między RGB a CMYK nigdy nie jest doskonała, ponieważ mają różne gamut kolorów: jaskrawe kolory ekranowe (elektryczne niebieskie, fluorescencyjne zielone) nie mogą być odtworzone w standardowym druku offsetowym.
HSL (Hue, Saturation, Lightness) jest bardziej intuicyjny dla ludzi niż RGB, ponieważ oddziela odcień koloru od jego nasycenia i jasności. Aby przyciemnić niebieski w RGB, musisz przeliczyć wszystkie trzy kanały; w HSL wystarczy zmniejszyć wartość L. Do tworzenia wariantów marki (jasny, ciemny, nasycony, przytłumiony) HSL sprawia, że transformacje są przewidywalne. W nowoczesnym CSS HSL umożliwia dynamiczne motywowanie z zmiennymi: --color-brand: hsl(220, 90%, 50%); i tworzenie wariantów przez dostosowanie tylko L lub S.
HWB (Hue, Whiteness, Blackness) to model kolorów zdefiniowany w specyfikacji CSS Color Level 4 (W3C), zaprojektowany tak, aby był jeszcze bardziej intuicyjny niż HSL. Zamiast nasycenia i jasności używa bezpośrednio ilości bieli (W) i czerni (B) wymieszanych z czystym odcieniem. hwb(0, 0%, 0%) to czysty czerwony; hwb(0, 50%, 0%) to różowy; hwb(0, 0%, 50%) to ciemnoczerwony; hwb(0, 50%, 50%) to szary. Wszystkie nowoczesne przeglądarki obsługują hwb() od 2022 roku. Jest przydatny, gdy potrzebujesz manipulować kolorami w wizualnie przewidywalny sposób bez złożonych obliczeń.
Gamut kolorów to zakres kolorów, które urządzenie lub przestrzeń kolorów może odtworzyć. sRGB (standard ekranowy od 1996 roku) obejmuje ok. 35% przestrzeni CIE 1931 widzialnej przez ludzkie oko. Display P3 (używany w iPhone i Mac od 2016 roku) pokrywa ok. 26% więcej niż sRGB. Rec.2020 (HDR) pokrywa prawie dwukrotnie więcej niż sRGB. Konwertując między HEX/RGB/HSL, poruszasz się w przestrzeni sRGB: wszystkie wartości są odwzorowalne. Konwertując do CMYK, gamut druku różni się (niektóre jaskrawe kolory czerwone są nieodtwarzalne w druku offsetowym; niektóre jasne cyjanowe w druku nie są odtwarzalne na ekranie). Konwersja CMYK → RGB może dać kolory wyglądające inaczej niż wydrukowany oryginał.
Modele kolorów: historia od Newtona do CSS Color Level 4
Nowoczesna teoria kolorów zaczyna się od Isaaca Newtona w 1672 roku, gdy opublikował swoje eksperymenty z pryzmatem w Philosophical Transactions of the Royal Society. Newton wykazał, że białe światło jest sumą wszystkich kolorów widzialnego widma i zaproponował pierwsze koło chromatyczne z 7 kolorami (czerwony, pomarańczowy, żółty, zielony, niebieski, indygo, fioletowy), wybraną liczbą przez analogię z nutami muzycznymi. W 1810 roku Johann Wolfgang von Goethe opublikował swoją Teorię kolorów, argumentując, że kolor jest interakcją między światłem a ciemnością, i stworzył pierwsze 6-kolorowe koło z dopełniającymi się kolorami naprzeciwko siebie. Choć jego naukowe wnioski były błędne (obalił je Helmholtz), jego kołowy model wpłynął na koła barw używane w projektowaniu do dziś.
Diagram chromatyczności CIE 1931 był pierwszą próbą matematycznego zdefiniowania wszystkich kolorów postrzegalnych przez przeciętne ludzkie oko. Commission Internationale de l'Eclairage (CIE) stworzyła w 1931 roku przestrzeń kolorów XYZ opartą na eksperymentach dopasowania kolorów Wrighta (1928) i Guilda (1931), w których uczestnicy dopasowywali mieszanki trzech świateł podstawowych do kolorów referencyjnych. Przestrzeń CIE XYZ zawiera wszystkie widzialne kolory i służy jako absolutna przestrzeń referencyjna do konwersji między dowolnymi względnymi przestrzeniami kolorów (sRGB, Adobe RGB, Display P3). Standard sRGB (IEC 61966-2-1) został zdefiniowany w 1996 roku przez HP i Microsoft i stał się uniwersalnym standardem dla ekranów i sieci, z białym punktem D65 (6500K) i krzywą gamma ok. 2,2.
CSS Color Level 4, opracowany przez CSS Working Group W3C, rozszerza dostępne kolory CSS poza sRGB. Wprowadza przestrzenie kolorów display-p3, rec2020, a98-rgb, prophoto-rgb, oklch i oklab za pomocą funkcji color(). Przestrzeń oklch (zaproponowana przez Björna Ottossona w 2020 roku jako ulepszenie LCH z przestrzeni CIELAB) jest szczególnie ceniona w projektowaniu, ponieważ ma bardziej jednorodną percepcję jasności niż HSL: dwa kolory z tą samą wartością L w oklch wyglądają równie jasno dla ludzkiego oka, co nie jest prawdą dla HSL. Przeglądarki obsługują oklch od 2023 roku. Zarządzanie kolorami w przeglądarkach używa profili ICC osadzonych w obrazach, aby automatycznie konwertować między przestrzeniami kolorów i zapewniać odtwarzalność na różnych urządzeniach.