Konwerter Kodow Kolorow

Bulk convert color codes between HEX, RGB, HSL formats. Paste multiple colors, get all conversions at once.

Najwazniejsze funkcje

Masowa konwersja kolorów
Obsługa HEX, RGB, HSL, RGBA, HSLA
Kopiowanie pojedynczych lub wszystkich wyników
Podgląd koloru dla każdego wpisu

Guide

Kolory w systemach cyfrowych są reprezentowane przez kody numeryczne. Różne konteksty wymagają różnych formatów kodów kolorów. Deweloperzy webowi używają kodów szesnastkowych i funkcji kolorów CSS. Projektanci graficzni pracują z CMYK dla druku i RGB dla ekranu. Projektanci UI odwołują się do HSL do intuicyjnych korekt koloru. Zrozumienie tych formatów, tego, jak się ze sobą relatywizują, i kiedy używać każdego, jest istotne dla każdego pracującego z kolorem cyfrowym. Ten przewodnik obejmuje główne formaty kodów kolorów, matematykę konwersji i praktyczne zastosowania w projektowaniu i rozwoju. RGB (Red, Green, Blue) to fundamentalny model koloru dla ekranów. Każdy piksel na Twoim monitorze, telefonie lub tablecie produkuje kolor mieszając czerwone, zielone i niebieskie światło o różnych intensywnościach. Każdy kanał waha się od 0 (brak światła) do 255 (maksymalna intensywność). RGB(255, 0, 0) to czysta czerwień. RGB(0, 255, 0) to czysta zieleń. RGB(0, 0, 255) to czysty niebieski. RGB(255, 255, 255) to biały (wszystkie kanały na maksimum). RGB(0, 0, 0) to czarny (brak światła). RGB(128, 128, 128) to średnia szarość (równe części każdego kanału przy połowie intensywności). Model RGB nazywa się addytywnym, bo łączenie wszystkich kolorów przy pełnej intensywności produkuje biały, co odpowiada temu, jak światło działa fizycznie. Kody kolorów szesnastkowych to najpowszechniejszy format koloru w sieci. Kod szesnastkowy to po prostu wartość RGB zapisana w podstawie 16. Kod szesnastkowy #FF0000 to RGB(255, 0, 0), co jest czerwonym. Pierwsze dwa znaki (FF) reprezentują kanał czerwony, następne dwa (00) zielony, a ostatnie dwa (00) niebieski. FF w szesnastkowym równa się 255 w dziesiętnym. 00 równa się 0. 80 równa się 128. Konwersja między szesnastkowym a RGB to konwersja bazy: podziel kod szesnastkowy na trzy pary i przekonwertuj każdą parę z podstawy 16 na podstawę 10. Skrócone kody szesnastkowe używają trzech znaków zamiast sześciu. #F00 jest równoważne #FF0000. Każdy znak jest podwojony: #F00 staje się #FF0000, #39F staje się #3399FF, #000 staje się #000000. Ten skrót działa tylko wtedy, gdy każda para składa się z dwóch identycznych znaków. #3A7F2B nie może być skrócone, bo żadna para nie ma identycznych cyfr. Używaj skrótu w kodzie dla zwięzłości, gdy dostępny, ale miej świadomość, że niektóre narzędzia i systemy projektowania zawsze wyprowadzają pełną sześcioznakową formę. Ośmiocyfrowe kody szesnastkowe dodają kanał alfa (przezroczystość). #FF000080 to czerwień przy 50-procentowej nieprzezroczystości. Ostatnie dwie cyfry (80, co jest 128 w dziesiętnym, z grubsza 50 procent z 255) definiują wartość alfa. #FF0000FF to w pełni nieprzezroczysta czerwień (identyczna z #FF0000). #FF000000 to w pełni przezroczysta czerwień (niewidoczna). Ośmiocyfrowy szesnastkowy jest obsługiwany w nowoczesnym CSS i wszystkich głównych przeglądarkach. Zauważ, że niektóre formaty (jak rozwój Androida) umieszczają kanał alfa jako pierwszy (#80FF0000), więc sprawdź konwencję dla swojej platformy. HSL (Hue, Saturation, Lightness - odcień, nasycenie, jasność) reprezentuje kolor w sposób, który odpowiada temu, jak ludzie myślą o kolorze. Hue to kąt koloru na kole barw: 0 stopni to czerwień, 120 stopni to zieleń, 240 stopni to niebieski, a 360 stopni wraca do czerwieni. Saturation to intensywność koloru od 0% (szary) do 100% (w pełni żywy). Lightness to jasność od 0% (czarny) do 100% (biały), przy czym 50% jest normalnym kolorem. HSL(0, 100%, 50%) to czysta czerwień. HSL(120, 100%, 50%) to czysta zieleń. HSL(60, 100%, 50%) to czysty żółty, w połowie między czerwonym a zielonym na kole odcienia. Praktyczna zaleta HSL nad RGB to intuicyjna manipulacja kolorem. Aby rozjaśnić kolor, zwiększ wartość jasności. Aby go bardziej wyciszyć, zmniejsz nasycenie. Aby przesunąć kolor (z czerwonego w stronę pomarańczowego, na przykład), dostosuj kąt odcienia. W RGB osiągnięcie tych samych korekt wymaga zmiany wielu wartości kanałów jednocześnie, co utrudnia przewidzenie wyniku. Projektanci budujący palety kolorów często pracują w HSL, bo mogą tworzyć harmonijne wariacje przez systematyczne dostosowywanie jednego parametru naraz. HSV (Hue, Saturation, Value) jest blisko spokrewniony z HSL, ale definiuje jasność inaczej. W HSV wartość reprezentuje maksymalną jasność koloru. Przy V równym 100% kolor jest tak jasny, jak to możliwe. Przy V równym 0% kolor jest czarny niezależnie od odcienia i nasycenia. HSV to natywny model koloru w wielu narzędziach projektowych włączając wybierak kolorów Adobe Photoshop. Różnica między HSL a HSV jest subtelna, ale ma znaczenie: HSL(0, 100%, 100%) to biały, podczas gdy HSV(0, 100%, 100%) to czysta czerwień. HSV jest bardziej intuicyjny dla malarzy i projektantów myślących o barwieniu bielą vs cieniowaniu czernią. HSL jest bardziej symetryczny i często preferowany w CSS. HWB (Hue, Whiteness, Blackness - odcień, biel, czerń) to nowsza funkcja koloru CSS, która oferuje inny intuicyjny model. Hue jest ten sam co w HSL i HSV. Whiteness definiuje, ile bieli jest wymieszane (od 0% do 100%). Blackness definiuje, ile czerni jest wymieszane (od 0% do 100%). HWB(0, 0%, 0%) to czysta czerwień. HWB(0, 100%, 0%) to biały. HWB(0, 0%, 100%) to czarny. HWB(0, 50%, 0%) to jasny róż (czerwień wymieszana z 50% bieli). Wielu projektantów uważa HWB najbardziej intuicyjnym modelem, bo odzwierciedla fizyczną koncepcję mieszania farby z bielą lub czernią. CSS obsługuje hwb() we wszystkich nowoczesnych przeglądarkach. CMYK (Cyan, Magenta, Yellow, Key/Black - cyjan, magenta, żółty, klucz/czarny) to model koloru używany w druku. Podczas gdy ekrany dodają światło (addytywne mieszanie kolorów), drukarki nakładają atrament, który absorbuje światło (subtraktywne mieszanie kolorów). Atrament cyjanowy absorbuje czerwone światło. Magenta absorbuje zielone. Żółty absorbuje niebieskie. Kanał klucz (czarny) istnieje, bo mieszanie atramentów CMY teoretycznie produkuje czarny, ale praktycznie produkuje mętny ciemnobrązowy. Dodanie dedykowanego czarnego atramentu produkuje czystsze ciemne tony i oszczędza kolorowy atrament. Wartości CMYK wahają się od 0% do 100% dla każdego kanału. Konwersja między RGB a CMYK nie jest prostym matematycznym wzorem. Teoretyczna konwersja (C równa się 1 minus R/255, M równa się 1 minus G/255, Y równa się 1 minus B/255, następnie ekstrakcja K jako minimum z C, M, Y) daje Ci punkt startowy, ale rzeczywiste kolory druku zależą od atramentu, papieru, maszyny drukarskiej i profilu kolorów ICC. Profesjonalne przepływy pracy w druku używają systemów zarządzania kolorem z kalibrowanymi profilami, by zapewnić dokładne odtworzenie. Konwerter WebRecast wykonuje matematyczną konwersję, która jest odpowiednia do aproksymacji, szybkich odniesień i niekrytycznej pracy z kolorem. Do produkcyjnych prac drukarskich zawsze używaj przepływu pracy zarządzanego kolorem z kalibrowanymi profilami. Funkcje kolorów CSS znacznie się rozszerzyły w ostatnich latach. Tradycyjne formaty to szesnastkowy (#FF0000), rgb(255, 0, 0) i hsl(0, 100%, 50%). Nowoczesny CSS obsługuje też funkcję hwb() (Hue, Whiteness, Blackness), funkcję lab() (przestrzeń kolorów CIE LAB dla perceptualnie jednolitych kolorów), funkcję lch() (CIE LCH, cylindryczna forma LAB) i funkcję oklch() (poprawiona wersja LCH, która produkuje bardziej przewidywalne wyniki). Te nowsze przestrzenie kolorów adresują ograniczenia w RGB i HSL, szczególnie wokół perceptualnej jednorodności, gdzie dwa kolory z tą samą jasnością HSL mogą wydawać się dość różne w jasności dla ludzkiego oka. OKLCH zasługuje na specjalną uwagę, bo szybko staje się zalecaną przestrzenią kolorów dla projektowania webowego. OKLCH oznacza OK Lightness Chroma Hue i produkuje perceptualnie jednolite wyniki. Oznacza to, że jasność 70% wygląda równie jasno we wszystkich odcieniach, w przeciwieństwie do HSL, gdzie żółty przy 50-procentowej jasności wydaje się znacznie jaśniejszy niż niebieski przy 50-procentowej jasności. Do tworzenia dostępnych palet kolorów, generowania spójnych stanów hover przycisków i budowania systemów tokenów projektowych OKLCH produkuje lepsze wyniki niż HSL. Składnia to oklch(70% 0,15 250), gdzie 70% to jasność, 0,15 to chroma (intensywność koloru), a 250 to kąt odcienia. Nazwane kolory CSS obejmują 148 predefiniowanych nazw jak red, blue, coral, darkslategray i papayawhip. Te nazwy mapują się na specyficzne wartości szesnastkowe (coral to #FF7F50, papayawhip to #FFEFD5). Nazwane kolory są wygodne do prototypowania i czytelne w kodzie, ale ograniczają Cię do stałej palety. Większość produkcyjnego CSS używa kodów szesnastkowych lub funkcji HSL do precyzyjnej kontroli. Nazwy kolorów mają historyczne pochodzenie: niektóre pochodzą z kolorów systemu okien X11 z lat 80., co jest powodem, dla którego istnieją dziwactwa jak darkgray będący jaśniejszym niż gray. Alfa przezroczystość (nieprzezroczystość) jest dostępna we wszystkich nowoczesnych formatach kolorów CSS. rgba(255, 0, 0, 0,5) to czerwień przy 50-procentowej nieprzezroczystości. hsla(0, 100%, 50%, 0,5) to ten sam kolor. W nowoczesnym CSS (Level 4) możesz też napisać rgb(255 0 0 / 50%) używając składni oddzielonej spacjami z ukośnikiem przed wartością alfa. Kanał alfa waha się od 0 (w pełni przezroczysty) do 1 (w pełni nieprzezroczysty) w funkcjach CSS, lub od 0 do 255 w 8-cyfrowym szesnastkowym. Różnica między alfa przezroczystością koloru a właściwością CSS opacity jest ważna: opacity wpływa na cały element i jego dzieci, podczas gdy alfa koloru wpływa tylko na tę konkretną wartość koloru. Kontrast koloru to krytyczne rozważenie dla dostępności. Wytyczne dotyczące dostępności treści webowych (WCAG) wymagają minimalnych proporcji kontrastu między tekstem a kolorami tła. Poziom AA wymaga 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu. Poziom AAA wymaga 7:1 dla normalnego tekstu i 4,5:1 dla dużego tekstu. Proporcja kontrastu jest obliczana z relatywnej luminancji dwóch kolorów używając wzoru (L1 plus 0,05) podzielone przez (L2 plus 0,05), gdzie L1 to jaśniejszy kolor. Relatywna luminancja używa ważonego wzoru, który uwzględnia ludzką percepcję: L równa się 0,2126R plus 0,7152G plus 0,0722B (po korekcji gamma). Zielony wnosi najwięcej do postrzeganej jasności, co jest powodem, dla którego zielony tekst na białym potrzebuje wyższych wartości RGB niż czerwony tekst, by osiągnąć ten sam kontrast. Daltonizm dotyka około 8 procent mężczyzn i 0,5 procent kobiet. Najpowszechniejszym typem jest daltonizm czerwono-zielony (deuteranopia i protanopia), gdzie czerwone i zielone wydają się podobne. Tritanopia (daltonizm niebiesko-żółty) jest rzadka. Achromatopsia (całkowity daltonizm) jest niezwykle rzadka. Wybierając kolory do interfejsów, wykresów lub wizualizacji danych, unikaj polegania wyłącznie na kolorze do przekazywania informacji. Używaj koloru w połączeniu z kształtami, wzorami, etykietami lub pozycją. Testowanie swojej palety kolorów z symulatorem daltonizmu pomaga zidentyfikować problematyczne kombinacje. Kolory niebieski i pomarańczowy są rozróżnialne przez prawie wszystkie typy daltonizmu. Budowanie palety kolorów dla strony internetowej lub aplikacji zazwyczaj zaczyna się od podstawowego koloru marki. Z tej bazy wyprowadzasz pełną paletę odcieni, tints i kolorów komplementarnych. W HSL tworzenie odcieni oznacza zmniejszanie jasności, utrzymując stały odcień i nasycenie. Tworzenie tints oznacza zwiększanie jasności. Tworzenie koloru komplementarnego oznacza dodanie 180 stopni do odcienia. Kolory analogiczne są w obrębie 30 stopni od bazowego odcienia. Kolory triadyczne są 120 stopni od siebie. Kolory split-complementary są 150 i 210 stopni od bazy. Te relacje teorii kolorów są łatwe do obliczenia w HSL i kłopotliwe w RGB lub szesnastkowym. Tokeny projektowe i niestandardowe właściwości CSS (zmienne) to nowoczesny sposób zarządzania kolorami w bazie kodu. Zdefiniuj swoje kolory raz jako niestandardowe właściwości CSS: --color-primary: hsl(220, 90%, 56%); --color-primary-light: hsl(220, 90%, 72%); --color-primary-dark: hsl(220, 90%, 40%). Odwołuj się do tych zmiennych w całych swoich arkuszach stylów. Gdy potrzebujesz zmienić podstawowy kolor, zaktualizuj jedną wartość. Systemy projektowe jak Material Design i Tailwind CSS organizują kolory w skale (50, 100, 200 do 900) reprezentujące wariacje jasności każdego odcienia. Tryb ciemny wymaga innego podejścia do koloru niż proste odwrócenie wszystkiego. W trybie ciemnym tła są ciemne (nie czysta czerń, która powoduje zbyt duży kontrast i zmęczenie oczu), a tekst jest jasny (nie czysta biel z tego samego powodu). Powierzchnie na różnych poziomach elewacji używają nieco jaśniejszych odcieni tła. Kolory marki często potrzebują zredukowanego nasycenia i zwiększonej jasności w trybie ciemnym, by utrzymać czytelność bez wydawnia się ostrymi na ciemnych tłach. Dobrze zaprojektowany system kolorów używający niestandardowych właściwości CSS może przełączać się między paletami jasnymi i ciemnymi przez zmianę wartości zmiennych na poziomie głównym. Przestrzenie kolorów poza sRGB stają się ważne dla nowoczesnych wyświetlaczy. Przestrzeń kolorów sRGB, używana przez standardowe wartości szesnastkowe i RGB, obejmuje tylko około 35 procent widzialnych kolorów. Display P3, używany przez urządzenia Apple i wiele nowoczesnych monitorów, obejmuje około 45 procent. Rec. 2020, używany w telewizji HDR, obejmuje około 75 procent. Nowe funkcje CSS color-mix(), color() i oklch() mogą uzyskać dostęp do tych szerszych gamutów. Kolor określony jako color(display-p3 1 0 0) produkuje bardziej żywą czerwień niż #FF0000 na wyświetlaczach obsługujących P3. W miarę jak wyświetlacze szerokogamutowe stają się standardem, zrozumienie przestrzeni kolorów poza sRGB staje się coraz ważniejsze dla dostarczania żywych doświadczeń wizualnych. Konwersja kolorów programowo w JavaScript używa prostej matematyki. Aby przekonwertować szesnastkowy na RGB: parseInt(hex.substring(1,3), 16) daje kanał czerwony, i podobnie dla zielonego i niebieskiego. Aby przekonwertować RGB na HSL: znormalizuj R, G, B do zakresu 0-1, oblicz wartości maksymalne i minimalne, wyprowadź jasność jako (max plus min) podzielone przez 2, nasycenie z delty między max a min, a odcień z tego, który kanał jest max. Te wzory są dobrze udokumentowane i zaimplementowane w każdej bibliotece manipulacji kolorem (chroma.js, color, tinycolor2 w JavaScript, colour w Pythonie i palette w Ruście). Gradienty używają wielu kodów kolorów. Gradient liniowy CSS przechodzi między kolorami: background: linear-gradient(to right, #FF0000, #0000FF) tworzy gradient od czerwonego do niebieskiego. Gradienty w RGB mogą produkować mętne kolory pośrednie, bo prosta linia między dwoma kolorami w przestrzeni RGB może przechodzić przez nienasycone regiony. Gradienty w HSL lub oklch często produkują bardziej żywe przejścia, bo podążają za kołem barw. Nowoczesna interpolacja gradientu CSS z "in oklch" produkuje perceptualnie płynne przejścia: background: linear-gradient(in oklch, #FF0000, #0000FF). To zauważalna poprawa dla gradientów między kolorami komplementarnymi. Konwerter kolorów WebRecast akceptuje wejście w jakimkolwiek obsługiwanym formacie i natychmiast pokazuje równoważne wartości we wszystkich innych formatach. Wprowadź kod szesnastkowy i zobacz wartości RGB, HSL, HSV i CMYK. Wprowadź wartość HSL i uzyskaj odpowiedniki szesnastkowy i RGB. To eliminuje matematykę manualnej konwersji i redukuje błędy, gdy tłumaczysz między narzędziami projektowymi (które mogą pokazywać HSV) a CSS (które używa szesnastkowego, RGB lub HSL). Konwerter wyświetla też wizualny podgląd koloru, więc możesz zweryfikować, że odpowiada Twojej intencji. Kolor w wizualizacji danych wymaga specjalnej uwagi. Wykresy, grafy i mapy muszą używać kolorów, które są rozróżnialne od siebie, znaczące dla widza i dostępne dla osób z niedoborami widzenia koloru. Sekwencyjne skale kolorów (od jasnego do ciemnego jednego odcienia) działają dla danych ciągłych jak temperatura lub gęstość populacji. Dywergujące skale kolorów (dwa odcienie spotykające się w neutralnym punkcie środkowym) działają dla danych ze znaczącym punktem środkowym, jak zysk/strata lub odchylenie od średniej. Kategoryczne skale kolorów (odrębne odcienie) działają dla danych nominalnych jak kategorie produktów. Narzędzia jak ColorBrewer dostarczają poparte badaniami palet zoptymalizowanych dla różnych typów danych i wymagań dostępności. Zarządzanie kolorem między urządzeniami to trwające wyzwanie. Ten sam kod szesnastkowy może wyglądać inaczej na różnych ekranach z powodu wariacji w technologii wyświetlacza, kalibracji, jasności i oświetlenia otoczenia. sRGB to standardowa przestrzeń kolorów dla sieci, a większość wyświetlaczy jest kalibrowana, by ją aproksymować. Profesjonalni projektanci kalibrują swoje monitory używając kolorymetrów (urządzenia sprzętowe, które mierzą wyjście wyświetlacza) i profili ICC. Do rozwoju webowego, gdzie nie możesz kontrolować wyświetlacza użytkownika, projektuj z wystarczającymi marginesami kontrastu, tak by drobne różnice renderowania koloru nie wpływały na użyteczność lub czytelność. Ekstrakcja koloru z obrazów jest użyteczna do tworzenia palet, które pasują do fotografii, zasobów marki lub obrazów inspiracyjnych. Proces obejmuje próbkowanie dominujących kolorów używając algorytmów jak k-średnich, median cut lub kwantyzacja octree. Te algorytmy grupują podobne piksele i identyfikują najbardziej reprezentatywne kolory. Narzędzia jak Adobe Color, Coolors i różne pakiety npm (color-thief, vibrant.js) automatyzują ten proces. Ekstrahowanie od 5 do 8 dominujących kolorów z obrazu hero i używanie ich jako kolorów akcentowych zapewnia wizualną spójność między obrazami a elementami UI. Psychologia koloru, choć nie jest dokładną nauką, ma pewne udokumentowane efekty na percepcję. Czerwień zwiększa postrzeganą pilność i jest powszechnie używana do ogłoszeń o wyprzedażach i stanów błędów. Niebieski przekazuje zaufanie i profesjonalizm, co jest powodem, dla którego instytucje finansowe i platformy mediów społecznościowych go faworyzują. Zielony sygnalizuje sukces, bezpieczeństwo i motywy środowiskowe. Pomarańczowy jest kojarzony z akcją i jest powszechnie używany do przycisków wezwania do działania. Żółty przyciąga uwagę i działa dla ostrzeżeń. Te skojarzenia są kulturowo wpływane: biel reprezentuje żałobę w niektórych kulturach wschodnioazjatyckich, podczas gdy czerwień oznacza szczęście i dobrobyt w kulturze chińskiej. Rozważ kulturowy kontekst swojej docelowej publiczności, wybierając schematy kolorów. Praktyczne wskazówki do pracy z kodami kolorów: zawsze dołączaj symbol hash (#), pisząc kody szesnastkowe w CSS, bo to wymagana składnia. Używaj małych cyfr szesnastkowych dla spójności (#ff0000 zamiast #FF0000), co też jest konwencją używaną przez większość minifierów i formaterów CSS. Preferuj HSL w swoim CSS, gdy potrzebujesz tworzyć wariacje koloru programowo. Używaj 8-cyfrowego szesnastkowego lub rgba/hsla dla przezroczystości zamiast właściwości opacity CSS, która wpływa na cały element włączając dzieci. Przechowuj swoje kolory marki jako tokeny projektowe i odwołuj się do nich konsekwentnie w całym projekcie, zamiast hardkodować wartości kolorów w indywidualnych komponentach. Komunikując kolory z zespołem projektowym, dołącz zarówno kod szesnastkowy, jak i wizualną próbkę, by uniknąć niejednoznaczności z różnic kalibracji ekranu.

Czeste pytania

Czym to się różni od zwykłego konwertera kolorów?

Narzędzie to jest zaprojektowane dla programistów potrzebujących konwertować wiele kolorów naraz, z wyjściem w formacie przyjaznym dla kodu.

Jakie formaty kolorów są obsługiwane?

Obsługiwane są formaty HEX (#RRGGBB), RGB(r,g,b), HSL(h,s%,l%), RGBA i HSLA.