Konwerter kolorów – sprawdź 37 zapisów koloru
#3B82F6 to rgb(59, 130, 246) i cmyk(76%, 47%, 0%, 4%). Wpisz albo wklej kolor w polu Konwertuj z i wybierz jego zapis z listy pod nim, a pod polem Konwertuj na wybierz zapis wyniku. Wynik pojawia się już podczas pisania.
Jak działa konwerter kolorów?
Programy zapisują ten sam kolor na różne sposoby. Figma i arkusze CSS przyjmują kod HEX[1], okno wyboru koloru w Wordzie i Excelu pokazuje trzy liczby RGB[2], drukarnia pyta o wartości CMYK, a aplikacja na Androida trzyma kolor w jednej liczbie z kryciem na początku[3]. Konwerter przelicza kolor z jednego takiego zapisu na drugi.
Listy pod polami Konwertuj z i Konwertuj na mają po 37 zapisów w sześciu grupach: Najczęściej używane, CSS, Dla programistów, Wideo i JPEG, Microsoft Office oraz CIE. Wartość możesz wpisać w każdym z dwóch pól, a konwerter policzy drugie.
Pole czyta wpis najpierw w zapisie wybranym na liście. Gdy wpis do niego nie pasuje, po krótkiej przerwie w pisaniu albo od razu po wklejeniu pole szuka zapisu, który pasuje, przełącza listę i mówi o tym linijką pod spodem. Po wklejeniu liczby 3900150 do pola z zapisem HEX pojawiają się na przykład dwie linijki: „Ustawiliśmy zapis: Liczba dziesiętna (kolejność RGB).” oraz „Ten wpis może też oznaczać: Liczba dziesiętna Office (VBA, Excel). Właściwy zapis wybierzesz z listy pod polem.” Druga oznacza, że ta sama liczba daje w innym zapisie inny kolor, więc o właściwym odczycie decydujesz Ty.
Kolor wybierzesz też bez wpisywania. Kwadrat z próbką koloru przy polu Konwertuj z otwiera próbnik kolorów Twojego systemu. W Chrome, Edge i Operze na komputerze obok stoi jeszcze przycisk z pipetą, Pobierz kolor z ekranu, który pobiera kolor z dowolnego miejsca na ekranie, także spoza okna przeglądarki[4]. Firefox, Safari i Chrome na Androidzie nie udostępniają stronom tej funkcji, więc tam przycisku nie zobaczysz[4].
Przycisk Wyczyść wszystko czyści oba pola, a Kopiuj wynik kopiuje do schowka zawartość pola Konwertuj na. Konwerter liczy wszystko w Twojej przeglądarce, więc wpisane kolory nie trafiają na nasz serwer.
Jaki kod ma kolor złoty, czerwony albo szary?
| Kolor (nazwa CSS) | HEX | RGB | CMYK |
|---|---|---|---|
| czarny (black) | #000000 | 0, 0, 0 | 0%, 0%, 0%, 100% |
| biały (white) | #FFFFFF | 255, 255, 255 | 0%, 0%, 0%, 0% |
| czerwony (red) | #FF0000 | 255, 0, 0 | 0%, 100%, 100%, 0% |
| zielony (green) | #008000 | 0, 128, 0 | 100%, 0%, 100%, 50% |
| limonka (lime) | #00FF00 | 0, 255, 0 | 100%, 0%, 100%, 0% |
| niebieski (blue) | #0000FF | 0, 0, 255 | 100%, 100%, 0%, 0% |
| granatowy (navy) | #000080 | 0, 0, 128 | 100%, 100%, 0%, 50% |
| żółty (yellow) | #FFFF00 | 255, 255, 0 | 0%, 0%, 100%, 0% |
| złoty (gold) | #FFD700 | 255, 215, 0 | 0%, 16%, 100%, 0% |
| pomarańczowy (orange) | #FFA500 | 255, 165, 0 | 0%, 35%, 100%, 0% |
| brązowy (brown) | #A52A2A | 165, 42, 42 | 0%, 75%, 75%, 35% |
| kasztanowy, bordowy (maroon) | #800000 | 128, 0, 0 | 0%, 100%, 100%, 50% |
| różowy (pink) | #FFC0CB | 255, 192, 203 | 0%, 25%, 20%, 0% |
| fioletowy (violet) | #EE82EE | 238, 130, 238 | 0%, 45%, 0%, 7% |
| purpurowy (purple) | #800080 | 128, 0, 128 | 0%, 100%, 0%, 50% |
| fuksja (fuchsia) | #FF00FF | 255, 0, 255 | 0%, 100%, 0%, 0% |
| szary (gray) | #808080 | 128, 128, 128 | 0%, 0%, 0%, 50% |
| srebrny (silver) | #C0C0C0 | 192, 192, 192 | 0%, 0%, 0%, 25% |
| beżowy (beige) | #F5F5DC | 245, 245, 220 | 0%, 0%, 10%, 4% |
| turkusowy (turquoise) | #40E0D0 | 64, 224, 208 | 71%, 0%, 7%, 12% |
| morski (teal) | #008080 | 0, 128, 128 | 100%, 0%, 0%, 50% |
| oliwkowy (olive) | #808000 | 128, 128, 0 | 0%, 0%, 100%, 50% |
| cyjan (aqua) | #00FFFF | 0, 255, 255 | 100%, 0%, 0%, 0% |
Jaki kolor ma flaga Polski w HEX, RGB i CMYK?
Ustawa o godle, barwach i hymnie nie podaje ani kodu HEX, ani wartości RGB czy CMYK. W załączniku opisuje biel i czerwień współrzędnymi trójchromatycznymi x i y, które mówią o barwie, oraz składową Y, która mówi o jasności[7]. Wartości podaje dla wzorcowego oświetlenia nazywanego iluminantem C: biel ma x 0,315, y 0,320 i Y 82,0, a czerwień x 0,570, y 0,305 i Y 16,0[8].
Polska Wikipedia przelicza te współrzędne na sRGB i podaje biel #E9E8E7 oraz czerwień #D4213D[7]. Biel wychodzi lekko szara, bo ustawa daje jej jasność Y 82, a idealna biel ma jasność około 100[7]. W konwerterze czerwień #D4213D to rgb(212, 33, 61) i cmyk(0%, 84%, 71%, 17%), a biel #E9E8E7 to rgb(233, 232, 231) i cmyk(0%, 0%, 1%, 9%). Te kody przydadzą się, gdy na 2 maja, czyli Dzień Flagi Rzeczypospolitej Polskiej[8], przygotowujesz grafikę na stronę albo do mediów społecznościowych.
W październiku 2021 roku Ministerstwo Kultury, Dziedzictwa Narodowego i Sportu skierowało do konsultacji projekt ustawy o symbolach państwowych. Projekt miał między innymi dostosować symbole do technologii cyfrowych i dodać do ustawy cyfrowe załączniki graficzne[9]. Tekst jednolity ustawy z 1980 roku, ogłoszony w 2025 roku, wciąż opisuje barwy współrzędnymi[8].
Czym różni się model koloru, zapis i przestrzeń barw?
Model koloru mówi, z czego kolor się składa. Ekran świeci światłem trzech barw, czerwonej, zielonej i niebieskiej, a model RGB opisuje kolor ilością każdej z nich[10]. Model CMYK opisuje kolor w druku procentami czterech farb[11]. HSL i HSB przeliczają liczby RGB na odcień, nasycenie i jasność, które łatwiej zrozumieć i zmieniać ręcznie[5].

Zapis to forma, w jakiej program przechowuje liczby modelu. #3B82F6, rgb(59, 130, 246) i liczba 3900150 to trzy zapisy jednego koloru z modelu RGB. Lista konwertera ma 37 takich zapisów, a różnią się one skalą liczb, kolejnością kanałów i tym, czy mieszczą krycie.
Przestrzeń barw mówi, które kolory da się zapisać i jak dokładnie wyglądają. Strony internetowe korzystają z przestrzeni sRGB, którą w 1996 roku zaproponowały firmy Hewlett-Packard i Microsoft i którą W3C przyjęło jako standard dla HTML i CSS[12]. Monitory o szerokiej gamie pokazują więcej kolorów, a CSS zapisuje je między innymi w przestrzeni Display P3[5]. Lab, LCH, Oklab, OKLCH i XYZ nie zależą od ekranu. Lab obejmuje cały zakres barw, które widzi człowiek[5], więc w tych zapisach zmieści się każdy kolor.
Jak wygląda kolor #3B82F6 w każdym z 37 zapisów?
#3B82F6, we wszystkich zapisach z list konwertera, w kolejności z listy. Ten kolor nie ma własnej nazwy CSS, więc w wierszu Nazwa CSS stoi nazwa najbliższa. Wartości policzył sam konwerter.| Zapis na liście | Grupa | Kolor #3B82F6 |
|---|---|---|
| HEX | Najczęściej używane | #3B82F6 |
| RGB (0–255) | Najczęściej używane | rgb(59, 130, 246) |
| HSL | Najczęściej używane | hsl(217.2, 91.2%, 59.8%) |
| HSB / HSV (Photoshop, Figma) | Najczęściej używane | hsv(217.2, 76%, 96.5%) |
| CMYK (bez profilu koloru) | Najczęściej używane | cmyk(76%, 47%, 0%, 4%) |
| Nazwa CSS | Najczęściej używane | dodgerblue |
| RGB (zapis ze spacjami) | CSS | rgb(59 130 246) |
| RGB w procentach | CSS | rgb(23.1% 51% 96.5%) |
| HWB | CSS | hwb(217.2 23.1% 3.5%) |
| OKLCH | CSS | oklch(62.31% 0.18801 259.81) |
| Oklab | CSS | oklab(62.31% -0.03325 -0.18505) |
| CIE Lab (biel D50, jak w CSS) | CSS | lab(54.62 8.76 -65.79) |
| CIE LCH (biel D50, jak w CSS) | CSS | lch(54.62 66.37 277.59) |
| Display P3 | CSS | color(display-p3 0.3047 0.5035 0.9338) |
| Adobe RGB (1998) | CSS | color(a98-rgb 0.3427 0.5057 0.9498) |
| ProPhoto RGB | CSS | color(prophoto-rgb 0.43812 0.43688 0.8984) |
| Rec. 2020 | CSS | color(rec2020 0.44191 0.53087 0.93257) |
| sRGB liniowe | CSS | color(srgb-linear 0.04374 0.22323 0.92158) |
| RGB 0–1 (Unity, matplotlib) | Dla programistów | 0.2314, 0.5098, 0.9647 |
| Android, kolor w XML (krycie na początku) | Dla programistów | #FF3B82F6 |
| Android, liczba ARGB (Java, Kotlin) | Dla programistów | 0xFF3B82F6 |
| Flutter, Jetpack Compose | Dla programistów | Color(0xFF3B82F6) |
| UIColor (UIKit) | Dla programistów | UIColor(red: 0.231, green: 0.51, blue: 0.965, alpha: 1) |
| SwiftUI | Dla programistów | Color(red: 0.231, green: 0.51, blue: 0.965) |
| Liczba dziesiętna (kolejność RGB) | Dla programistów | 3900150 |
| HSV w OpenCV (odcień 0–180) | Dla programistów | 109, 194, 246 |
| HSV 0–1 (Python colorsys) | Dla programistów | 0.6034, 0.7602, 0.9647 |
| RGB565 (Arduino, wyświetlacze TFT) | Dla programistów | 0x3C1E |
| YCbCr (JPEG, 0–255) | Wideo i JPEG | Y 122, Cb 198, Cr 83 |
| YCbCr BT.601 (wideo SD, 16–235) | Wideo i JPEG | Y 121, Cb 189, Cr 89 |
| YCbCr BT.709 (wideo HD, 16–235) | Wideo i JPEG | Y 122, Cb 186, Cr 92 |
| HSL w Office (skala 0–255) | Microsoft Office | 154, 233, 153 |
| Liczba dziesiętna Office (VBA, Excel) | Microsoft Office | 16155195 |
| XYZ (biel D65) | CIE | color(xyz-d65 0.26419 0.23548 0.90345) |
| XYZ (biel D50) | CIE | color(xyz-d50 0.23691 0.22563 0.68038) |
| CIE xyY | CIE | x 0.18829, y 0.16782, Y 0.23548 |
| CIE Luv (biel D65) | CIE | L 55.63, u -25.62, v -103.14 |
Co oznaczają zapisy HEX, RGB, HSL, HSB, CMYK i nazwa CSS?
Te zapisy stoją na listach w grupie Najczęściej używane. Spotkasz je w programach graficznych, w pakietach biurowych i w CSS.
HEX
Kod HEX zapisuje trzy liczby RGB w systemie szesnastkowym, po dwa znaki na kanał: czerwony, zielony i niebieski. Każda para przyjmuje wartości od 00 do FF, czyli od 0 do 255, więc kodem HEX zapiszesz 16 777 216 kolorów[6]. Gdy w każdej parze oba znaki są takie same, kod można skrócić do trzech znaków: #FF0 to #FFFF00[10].
Kod HEX wpiszesz w Photoshopie w polu ze znakiem # w Próbniku kolorów Adobe[13], w LibreOffice w polu Hex # okna Wybierz kolor[14], a w GIMP-ie 3.2 w polu Zapis języka HTML, które przyjmuje też nazwy kolorów CSS[15]. Zamianę kodu na liczby krok po kroku pokazuje konwerter HEX na RGB.
RGB (0–255)
RGB podaje trzy liczby od 0 do 255: ile czerwonego, zielonego i niebieskiego światła ma kolor. Trzy zera dają czerń, a trzy razy 255 biel[10]. Takie trzy pola, Czerwony, Zielony i Niebieski, ma okno Wybierz kolor w LibreOffice[14] i okno wyboru koloru w Wordzie, Excelu i PowerPoincie na karcie kolorów niestandardowych[2]. W polu konwertera liczby oddzielisz przecinkiem albo spacją, a zapis rgb(255, 215, 0) wkleisz wprost z arkusza CSS. Drogę odwrotną, z liczb do kodu HEX, opisuje konwerter RGB na HEX.
HSL
HSL opisuje kolor odcieniem (ang. hue), nasyceniem (saturation) i jasnością (lightness). Odcień to kąt na kole barw w stopniach: 0 to czerwień, 120 zieleń, a 240 niebieski. Nasycenie i jasność podaje się w procentach[5]. Przy jasności 50% kolor jest najczystszy, a jasność 0% i 100% zawsze daje czerń i biel. CSS rozumie zapis HSL, więc wynik wkleisz wprost do arkusza stylów. Jak HSL różni się od HSB i od skali z okna Kolory w Office, wyjaśnia konwerter HEX na HSL.
HSB / HSV (Photoshop, Figma)
HSB i HSV to dwie nazwy jednego modelu, który w 1978 roku zaproponował Alvy Ray Smith[16]. Odcień jest w nim taki sam jak w HSL, ale trzecia liczba, jasność B (ang. brightness) albo wartość V (value), przy 100% daje czysty kolor, a w HSL jasność 100% daje biel. Czysty czerwony #FF0000 to więc w HSB hsv(0, 100%, 100%), a w HSL hsl(0, 100%, 50%).
Tak liczy Próbnik kolorów Adobe w Photoshopie: odcień jako kąt od 0° do 360°, a nasycenie i jasność w procentach[13]. W LibreOffice ten model ma pola Odcień, Nasycenie i Jasność, z odcieniem od 0 do 359[14], a w Figmie nazywa się HSB[1]. Konwerter podaje wynik jako hsv(…), a w polach programu wpisujesz same trzy liczby. Przeliczenie w jedną i drugą stronę znajdziesz w konwerterze RGB na HSV i w konwerterze HSV na RGB.
CMYK (bez profilu koloru)
CMYK to procenty czterech farb drukarskich: cyjanu (C), magenty (M), żółtej (Y) i czarnej (K). Litera K pochodzi od angielskiego black albo key colour[11], dlatego polski LibreOffice podpisuje to pole Klucz, obok pól Seledynowy, Purpurowy i Żółty[14]. Photoshop przyjmuje wartości CMYK w procentach w polach C, M, Y i K[13]. Przykłady przeliczeń na CMYK i z CMYK zbierają konwerter HEX na CMYK i konwerter CMYK na RGB.
Nazwa CSS
Nazwy kolorów CSS, np. gold, navy czy tomato, są angielskie, a wielkość liter nie ma w nich znaczenia[5]. Pole przyjmuje je także ze spacją, więc Royal Blue da #4169E1. Gdy kolor nie ma własnej nazwy, pole wyniku podaje nazwę najbliższą, a pod nim pojawia się linijka „Ten kolor nie ma własnej nazwy CSS, więc pokazujemy najbliższą.” Czerwień flagi #D4213D dostaje w ten sposób nazwę crimson.
Jakie zapisy koloru zna CSS?
Grupa CSS zbiera pozostałe zapisy, które przeglądarka rozumie w arkuszu stylów[5].
RGB (zapis ze spacjami)
Nowsza składnia CSS oddziela liczby spacjami: rgb(59 130 246). Starsza, z przecinkami, oznacza to samo[5], a pole przyjmuje obie.
RGB w procentach
Kanały RGB możesz podać też w procentach, gdzie 100% oznacza 255, więc rgb(100% 0% 0%) to czysty czerwony. Polska Wikipedia zauważa, że ten zapis jest używany rzadziej niż kod HEX[10].
HWB
HWB opisuje kolor odcieniem oraz tym, ile bieli (ang. whiteness) i czerni (blackness) do niego domieszano. Specyfikacja CSS opisuje go jako podobny do HSL, ale często jeszcze łatwiejszy dla człowieka, a sam model zaproponował Alvy Ray Smith w 1996 roku[5]. Czysty czerwony z domieszką 50% bieli to hwb(0 50% 0%), czyli #FF7F80.
OKLCH
OKLCH podaje jasność L w procentach, nasycenie C (ang. chroma) i odcień H w stopniach. Liczy się w przestrzeni Oklab, którą Björn Ottosson opisał w grudniu 2020 roku[5]. Jasność L odpowiada tu temu, jak jasny kolor wydaje się oku. W HSL czysty niebieski i czysty żółty mają tę samą jasność 50%, choć żółty wygląda na dużo jaśniejszy, a w OKLCH niebieski ma jasność 45,2%, a żółty 96,8%[5].
Dlatego w OKLCH łatwiej zbudować paletę, w której kolory o tej samej liczbie L wyglądają na równie jasne.
Oklab
Oklab to ta sama przestrzeń co OKLCH, ale zamiast nasycenia i kąta odcienia ma dwie osie: a, która mówi o czerwieni i zieleni, oraz b, która mówi o żółci i niebieskim[5]. Wartości a i b w praktyce nie wychodzą poza ±0,5[5].
CIE Lab (biel D50, jak w CSS)
Lab opisuje kolor jasnością L od 0 do 100 i dwiema osiami. Oś a biegnie od zieleni (wartości ujemne) do czerwieni (dodatnie), a oś b od niebieskiego (ujemne) do żółtego (dodatnie)[17]. Nazwą Lab określa się zwykle przestrzeń CIE 1976 L*a*b*[17]. W Photoshopie pole L przyjmuje wartości od 0 do 100, a pola A i B od –128 do +127[13].
Wartości Lab liczy się zawsze względem wybranej bieli. CSS przyjmuje biel D50 i przechodzi do niej z bieli D65, którą ma sRGB, przekształceniem Bradforda[5], i tak samo liczy ten konwerter. Narzędzie, które liczy Lab dla bieli D65, poda dla tego samego koloru inne a i b, choć oba wyniki są poprawne.
CIE LCH (biel D50, jak w CSS)
LCH to Lab zapisany inaczej: jasność L zostaje, a osie a i b zastępują nasycenie C i kąt odcienia H[5]. Ten sam związek łączy OKLCH z Oklab.
Display P3
Display P3 to przestrzeń, którą specyfikacja CSS nazywa typową dla obecnych monitorów o szerokiej gamie[5]. W CSS zapisuje się ją funkcją color(display-p3 …) z trzema liczbami od 0 do 1. Figma pozwala ustawić profil pliku na sRGB albo Display P3[1]. Kod HEX liczy się zawsze w sRGB[5], więc kolor z pliku w Display P3 przepisany jako HEX może wyglądać inaczej.
Adobe RGB (1998)
Przestrzeń Adobe RGB (1998) ma w CSS nazwę a98-rgb. Jej zielona barwa podstawowa leży na wykresie chromatyczności w punkcie x 0,21 i y 0,71, a w sRGB w punkcie x 0,3 i y 0,6, więc przestrzeń mieści bardziej nasycone zielenie i cyjany[5]. Krzywą tej przestrzeni opisuje wykładnik 256/563, bliski, ale nie równy 1/2,2[5]. Czysta zieleń sRGB #00FF00 to w niej color(a98-rgb 0.565 1 0.2344).
ProPhoto RGB
Przestrzeń ProPhoto RGB opracował Kodak, a ISO znormalizowała ją pod nazwą ROMM RGB. Ma biel D50, tę samą co Lab w CSS, i barwy podstawowe, których nie da się uzyskać fizycznie, a specyfikacja CSS podaje, że w fotografii cyfrowej służy do archiwalnych wersji zdjęć[5]. W CSS zapisuje się ją jako color(prophoto-rgb …). Konwerter podaje w niej pięć miejsc po przecinku, bo przy czterech część kolorów 8-bitowych nie wraca do tych samych wartości RGB.
Rec. 2020
Rec. 2020 to przestrzeń z zalecenia ITU-R BT.2020 dla telewizji Ultra HD, 4K i 8K, a specyfikacja CSS zaznacza, że obecne ekrany nie pokazują całej jej gamy[5]. Zieleń spoza sRGB, np. color(rec2020 0 1 0), konwerter zostawia w tym zapisie bez zmian, a w HEX pokazuje najbliższy kolor #00F272.
sRGB liniowe
sRGB liniowe ma te same barwy podstawowe i biel co sRGB, ale bez krzywej, więc liczby rosną proporcjonalnie do ilości światła[5]. Ciemne kolory mają tu bardzo małe liczby, dlatego ten zapis potrzebuje więcej miejsc po przecinku niż sRGB, inaczej na płynnych przejściach widać pasy[5]. Kolor #3B82F6 to tu color(srgb-linear 0.04374 0.22323 0.92158), choć jego czerwień w sRGB wynosi 0,231.
Jak zapisać kolor w kodzie aplikacji?
Grupa Dla programistów zbiera zapisy, w których kolor trafia do kodu: z Unity, Androida, Fluttera, Swifta, Pythona, API Discorda i wyświetlaczy do Arduino.
RGB 0–1 (Unity, matplotlib)
Unity podaje składowe koloru jako liczby od 0 do 1[18], tak samo jak biblioteka matplotlib w Pythonie[19]. W LaTeX-u polecenie \color[rgb] przyjmuje takie ułamki, a \color[RGB] liczby od 0 do 255[10]. Liczbę z zakresu 0–255 zamienisz na ułamek, dzieląc ją przez 255: 59 to 0,2314.
Android, kolor w XML (krycie na początku)
W plikach zasobów Androida kolor zaczyna się od krzyżyka i ma jedną z postaci #RGB, #ARGB, #RRGGBB albo #AARRGGBB[20]. Krycie A stoi na początku, odwrotnie niż w CSS, gdzie ośmioznakowy kod ma krycie na końcu[5]. Ten sam ciąg znaków oznacza więc w obu miejscach inny kolor: #803B82F6 to w Androidzie #3B82F6 z kryciem około 50%, a w CSS fioletowy rgba(128, 59, 130, 0.96). Pole czyta ośmioznakowy kod według zapisu wybranego na liście: przy HEX tak jak CSS, a przy zapisie „Android, kolor w XML (krycie na początku)” tak jak Android.
Android, liczba ARGB (Java, Kotlin)
W kodzie Javy i Kotlina Android trzyma kolor w jednej 32-bitowej liczbie z kanałami w kolejności A, R, G, B i robi tak od pierwszej wersji API[3]. Dokumentacja podaje przykład 0xff0000ff, czyli nieprzezroczysty niebieski[3]. Liczba z bajtem krycia FF wychodzi w Javie ujemna, bo typ int ma znak, więc 0xFF3B82F6 to -12877066. Przy tym zapisie pole przyjmuje obie postaci, a liczbę bez bajtu krycia, np. 0x3B82F6, czyta dosłownie, więc ma ona krycie 0, tak jak w Androidzie.
Flutter, Jetpack Compose
Flutter tworzy kolor z liczby szesnastkowej z kryciem na początku, np. Color(0xFF42A5F5), co dokumentacja pokazuje obok zapisu Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5)[21]. Jetpack Compose ma funkcję Color, która tworzy kolor z liczby ARGB[22], więc zapis Color(0xFF3B82F6) wkleisz w obu bez zmian.
UIColor (UIKit)
UIColor w UIKit przyjmuje składowe red, green, blue i alpha jako ułamki. Od iOS 10 liczy kolor w rozszerzonej przestrzeni sRGB, więc nie przycina składowych mniejszych od 0 ani większych od 1[23]. Pole przyjmuje też składowe zapisane dzieleniem, tak jak w kodzie Swift: UIColor(red: 59/255, green: 130/255, blue: 246/255, alpha: 1) to #3B82F6.
SwiftUI
SwiftUI tworzy kolor przez Color(red:green:blue:opacity:), a krycie nazywa opacity[24]. Konwerter dopisuje opacity tylko wtedy, gdy kolor jest częściowo przezroczysty.
Liczba dziesiętna (kolejność RGB)
Ten zapis składa trzy kanały w jedną liczbę: czerwony razy 65 536 plus zielony razy 256 plus niebieski[10]. Taką liczbą podaje kolor API Discorda: kolor roli w polu colors.primary_color (starsze pole color dokumentacja oznacza jako przestarzałe) i kolor ramki embed, którą wysyła bot albo webhook[25][26]. Czerwień flagi #D4213D to w tym zapisie 13902141.
HSV w OpenCV (odcień 0–180)
OpenCV w obrazach 8-bitowych dzieli odcień przez 2, żeby zmieścił się w jednym bajcie, więc odcień ma tu zakres od 0 do 180, a nasycenie i jasność od 0 do 255[27]. Czerwień flagi #D4213D to w OpenCV 175, 215, 212, choć w HSB jej odcień wynosi 350,6°.
HSV 0–1 (Python colorsys)
Moduł colorsys z biblioteki standardowej Pythona podaje odcień, nasycenie i jasność jako ułamki od 0 do 1[28], także odcień, który w innych zapisach ma stopnie. Odcień 0,5 oznacza tu 180°, a czerwień flagi ma zapis 0.9739, 0.8443, 0.8314.
RGB565 (Arduino, wyświetlacze TFT)
RGB565 mieści kolor w 16 bitach: 5 bitów czerwieni, 6 zieleni i 5 niebieskiego, z czerwienią w najstarszych bitach[29]. Tak zapisuje kolory biblioteka Adafruit GFX dla kolorowych wyświetlaczy do Arduino, w której biel to 0xFFFF, a czerwień 0xF800[30]. Szesnaście bitów daje 65 536 kolorów[30], więc wynik to najbliższy z nich: #3B82F6 wychodzi jako 0x3C1E, a z powrotem jako #3A82F7.
Konwerter zaokrągla każdą składową do najbliższego poziomu, tak jak format UNORM w Direct3D, w którym same jedynki oznaczają pełną wartość[31]. Funkcja color565() z Adafruit GFX obcina niższe bity[32], więc jej wynik bywa w którejś składowej o jeden poziom niższy. Gdy na liście wybierzesz RGB565 (Arduino, wyświetlacze TFT), pole przyjmie zapis 0xF800, #F800 i liczbę dziesiętną, np. 63488.
Jak przeliczyć RGB na YCbCr?
YCbCr dzieli kolor na jasność Y i dwie różnice barw: Cb, czyli niebieski minus jasność, i Cr, czyli czerwony minus jasność[33]. Tak zapisują kolor pliki JPEG i cyfrowe wideo. Grupa Wideo i JPEG ma trzy warianty tego zapisu, które różnią się wagami kanałów i zakresem liczb.
YCbCr (JPEG, 0–255)
Format pliku JPEG (JFIF) zapisuje Y, Cb i Cr w pełnym zakresie od 0 do 255. Jasność liczy z wagami 0,299 dla czerwieni, 0,587 dla zieleni i 0,114 dla niebieskiego, a wynik zaokrągla i przycina do zakresu 0–255[34]. Biel to więc Y 255, Cb 128, Cr 128, a czysta czerwień Y 76, Cb 85, Cr 255, bo Cr wychodzi ze wzoru 255,5 i zostaje przycięte do 255.
YCbCr BT.601 (wideo SD, 16–235)
Zalecenie ITU-R BT.601 dla telewizji standardowej rozdzielczości ma te same wagi co JPEG, ale zostawia zapas na sygnał: jasność zajmuje kody od 16 do 235, a różnice barw od 16 do 240, ze środkiem w 128[33]. Czerń to tu Y 16, Cb 128, Cr 128, a biel Y 235, Cb 128, Cr 128.
YCbCr BT.709 (wideo HD, 16–235)
Zalecenie ITU-R BT.709 dla telewizji HD ma ten sam zakres kodów, ale inne wagi: 0,2126 dla czerwieni, 0,7152 dla zieleni i 0,0722 dla niebieskiego[35]. Czysta czerwień ma więc w BT.709 zapis Y 63, Cb 102, Cr 240, a w BT.601 Y 81, Cb 90, Cr 240. Program, który odczyta nagranie HD według BT.601, pokaże przez to kolory lekko przesunięte.
Kody YCbCr w 8 bitach mają mniej poziomów niż RGB, a zakres 16–235 jeszcze mniej, więc kolor przeliczony tam i z powrotem może wrócić o jeden lub dwa poziomy inny w którymś kanale. Pole przyjmuje trzy liczby z literami, np. Y 81, Cb 90, Cr 240, albo same liczby w kolejności Y, Cb, Cr.
Jak odczytać kolor z Worda albo Excela?
HSL w Office (skala 0–255)
Okno wyboru koloru w Wordzie, Excelu i PowerPoincie ma na karcie kolorów niestandardowych dwa modele kolorów: RGB i HSL[2]. W modelu HSL Office liczy nasycenie i jasność do 255: nasycenie 255 to kolor w pełni nasycony, a jasność 255 daje biel[2]. Konwerter czyta w tej skali również odcień. Taka skala nie trafia dokładnie w każdy kolor ekranu: czerwień flagi #D4213D to w Office 248, 186, 123, a te liczby przeliczone z powrotem dają #D5213F.
Liczba dziesiętna Office (VBA, Excel)
Funkcja RGB w VBA zwraca kolor jako jedną liczbę całkowitą[36], a kolor wypełnienia komórki Excela ustawia się tą funkcją we właściwości Interior.Color[37]. W tej liczbie czerwony stoi w najmłodszym bajcie, tak jak w zapisie COLORREF z Windows[38], więc kanały idą w odwrotnej kolejności niż w zapisie Liczba dziesiętna (kolejność RGB). Czerwień flagi to w Excelu 4006356, a w kolejności RGB 13902141.
Kolor komórki A1 sprawdzisz makrem z jednym poleceniem, MsgBox Range("A1").Interior.Color. Liczbę z okienka wklej w pole z zapisem Liczba dziesiętna Office (VBA, Excel), a konwerter poda ją w HEX, RGB czy CMYK.
Do czego służą zapisy XYZ, xyY i Luv?
XYZ to przestrzeń barw, którą w 1931 roku stworzyła Międzynarodowa Komisja Oświetleniowa (CIE). Jest punktem odniesienia dla Lab i innych przestrzeni tej komisji[39]. Liczba Y mówi w niej o jasności, a CSS skaluje ją tak, że biel ma Y równe 1[5].
XYZ (biel D65)
Zapis color(xyz-d65 …) liczy XYZ względem bieli D65, tej samej, którą mają sRGB i Display P3. CSS czyta tak również krótszy zapis color(xyz …)[5]. Biel #FFFFFF to tu color(xyz-d65 0.95046 1 1.08906).
XYZ (biel D50)
Zapis color(xyz-d50 …) liczy XYZ względem bieli D50, z której CSS liczy Lab i LCH[5]. Biel ma tu zapis color(xyz-d50 0.9643 1 0.8251), więc ten sam kolor ma w obu zapisach XYZ inne liczby X i Z.
CIE xyY
Przestrzeń CIE xyY powstała w 1931 roku razem z XYZ, żeby kolor dało się opisać w dwóch wymiarach: x i y określają chromatyczność, a Y jasność[39]. Ustawa o godle, barwach i hymnie podaje Y barw flagi w skali do 100, a konwerter, tak jak zapis XYZ w CSS, liczy Y od 0 do 1, więc biel #FFFFFF ma tu zapis x 0.3127, y 0.329, Y 1.
CIE Luv (biel D65)
CIELUV, czyli CIE 1976 L*u*v*, to przestrzeń, która ma oddawać różnice kolorów tak, jak widzi je oko. Model zaproponowano w 1960 roku i poprawiono w 1976, a współrzędne u* i v* liczy się z chromatyczności względem bieli źródła światła[40]. Konwerter przyjmuje biel D65, tę samą co sRGB, więc #FFFFFF to L 100, u 0, v 0, a czysta czerwień L 53.24, u 175.01, v 37.77.
Jak zapisać kolor z przezroczystością?
Krycie, nazywane też kanałem alfa, mówi, jak mocno kolor zasłania tło: przy 0 kolor jest całkiem przezroczysty, a przy 1, czyli 100%, w ogóle nie przepuszcza tła[5]. W CSS dopisujesz je po ukośniku, rgb(59 130 246 / 50%), w starszej składni czwartą liczbą w funkcji rgba(59, 130, 246, 0.5), a w kodzie HEX dwoma ostatnimi znakami, np. #3B82F680[5]. RGBA to więc zapis RGB z czwartą liczbą, kryciem.
Dwa znaki krycia w kodzie HEX liczą się od 00 do FF, czyli od 0 do 255, więc 80 oznacza 128 z 255, czyli 50,2%. Dlatego przy #3B82F680 konwerter pokazuje w zapisie „RGB (zapis ze spacjami)” wynik rgb(59 130 246 / 0.502).
Krycia nie zapisują: CMYK (bez profilu koloru), Nazwa CSS, Liczba dziesiętna (kolejność RGB), HSV w OpenCV (odcień 0–180), RGB565 (Arduino, wyświetlacze TFT), YCbCr (JPEG, 0–255), YCbCr BT.601 (wideo SD, 16–235), YCbCr BT.709 (wideo HD, 16–235), HSL w Office (skala 0–255), Liczba dziesiętna Office (VBA, Excel), CIE xyY oraz CIE Luv (biel D65). Przy nich pod polem wyniku pojawia się linijka, np. „CMYK (bez profilu koloru) nie zapisuje krycia, więc wynik pokazuje kolor bez przezroczystości.”
Słowo transparent oznacza w CSS przezroczystą czerń, czyli rgb(0 0 0 / 0%)[5], i tak samo czyta je konwerter: transparent i rgba(0,0,0,0) dają #00000000.
Dlaczego CMYK z konwertera różni się od CMYK z programu do druku?
Bo konwerter liczy CMYK bez profilu koloru, wzorem, który specyfikacja CSS nazywa naiwnym. Dla koloru firebrick, #B22222, daje on cmyk(0%, 81%, 81%, 30%), i taki sam wynik podaje W3C[41]. Taki zapis przenosi kolor ekranu na cztery liczby, ale nie mówi, jak kolor wyjdzie na papierze.

Drukarnia liczy CMYK z profilem ICC, który opisuje jej maszynę, farby i papier. W przykładzie z tej samej specyfikacji kolor policzony wzorem naiwnym różni się od wydruku o 14,3 jednostki DeltaE 2000, co W3C ocenia jako różnicę bardzo widoczną[41]. Photoshop po zmianie trybu poleceniem Tryb z menu Obraz liczy farby według przestrzeni roboczej CMYK z okna Ustawienia kolorów[42]. LibreOffice ma w oknie Wybierz kolor pola CMYK, ale służą one tylko do wpisania wartości, bo do druku program używa wyłącznie modelu RGB[14].
Plik do drukarni przygotuj więc w CMYK z profilem, który poda drukarnia, a grafikę na ekran zostaw w RGB albo HEX. Jak zmienić tryb pliku krok po kroku i jakie profile podają drukarnie w Europie, opisuje konwerter RGB na CMYK.
Co się dzieje z kolorem spoza sRGB?
W zapisach OKLCH, Oklab, CIE Lab (biel D50, jak w CSS), CIE LCH (biel D50, jak w CSS), Display P3, Adobe RGB (1998), ProPhoto RGB, Rec. 2020, sRGB liniowe, XYZ (biel D65), XYZ (biel D50), CIE xyY oraz CIE Luv (biel D65) konwerter podaje kolor dokładnie, także gdy wychodzi on poza sRGB. Pozostałe zapisy opisują tylko kolory z sRGB, dlatego dla nich konwerter szuka najbliższego koloru algorytmem z CSS Color 4[5] i pisze o tym pod polem wyniku, np. „Ten kolor wychodzi poza zakres sRGB, więc HEX pokazuje najbliższy kolor, jaki da się w nim zapisać.”
Kolory spoza sRGB przychodzą na przykład z Tailwind CSS. W wersji 4 cała domyślna paleta przeszła z RGB na OKLCH, żeby wykorzystać szerszą gamę nowych ekranów[43]. Kolor blue-500 to w niej oklch(62.3% 0.214 259.815)[44]. Wychodzi on poza sRGB, a najbliższy kolor sRGB według konwertera to #2B7FFF. W wersji 3 kolor blue-500 miał kod #3b82f6[45], czyli kolor z przykładów konwertera.
Dlaczego konwerter nie podaje kolorów RAL, NCS ani Pantone?
Bo RAL, NCS i Pantone to wzorniki fizycznych farb, a ich odpowiedniki na ekranie publikują sami właściciele tych systemów. RAL sprzedaje cyfrową bibliotekę z wartościami RGB i Lab ponad 2 500 kolorów ze swoich wzorników[46]. Pantone podaje najbliższe odpowiedniki swoich kolorów w RGB, CMYK, HEX i Lab w aplikacji Pantone Connect[47], a NCS pokazuje swoje kolory na platformie NCS+[48]. Adobe zapowiedziało, że od wersji z października 2023 roku z Photoshopa znikną trzy ostatnie biblioteki kolorów Pantone[13].
Jeśli szukasz kodu RGB dla numeru z wzornika, np. RAL 7016, weź wartości z biblioteki właściciela wzornika i wpisz je w polu Konwertuj z, żeby dostać pozostałe zapisy. Gdy malujesz ścianę albo zamawiasz element w kolorze RAL, wybieraj kolor z fizycznego wzornika. Ekran świeci, a farba odbija światło, więc ten sam kolor na ścianie i na monitorze wygląda inaczej.
Jakie zapisy koloru przyjmuje ten konwerter?
| Co wpisujesz | Zapis przy polu Konwertuj z | Wynik w polu Konwertuj na | Jak to czytamy |
|---|---|---|---|
| #38F | HEX | rgb(51, 136, 255) | Kod z trzema znakami rozwijamy, powtarzając każdy znak, tak jak robi to CSS. |
| 3B82F6 | HEX | rgb(59, 130, 246) | Krzyżyk nie jest potrzebny, więc zadziała też kod skopiowany z księgi znaku bez znaku #. |
| color: #3B82F6; | HEX | rgb(59, 130, 246) | Całą linijkę z arkusza CSS czytamy bez poprawiania, a nazwę właściwości i średnik pomijamy. |
| 16155195 | HEX | rgba(22, 21, 81, 0.58) | Osiem cyfr pole HEX czyta jako kod z kryciem, a linijka pod polem podpowiada zapis Liczba dziesiętna Office (VBA, Excel), w którym ta liczba z Excela daje #3B82F6. |
| 59 130 246 | RGB (0–255) | rgb(59, 130, 246) | Trzy liczby bez nazwy zapisu czytamy jako RGB, a linijka pod polem podaje też odczyty HSL w Office (skala 0–255) i HSV w OpenCV (odcień 0–180). |
| 0,231 0,51 0,965 | RGB 0–1 (Unity, matplotlib) | rgb(59, 130, 246) | Trzy ułamki z polskim przecinkiem dziesiętnym czytamy jako RGB 0–1. |
| hsl(217, 91%, 60%) | HSL | rgb(60, 131, 246) | Pełne procenty nie trafiają dokładnie w każdy kolor ekranu, dlatego wynik różni się od #3B82F6 o jeden poziom. |
| H 217 S 76 B 96 | HSB / HSV (Photoshop, Figma) | rgb(59, 130, 245) | Litery pól z próbnika Photoshopa wskazują model, więc czytamy te liczby jako HSB. |
| C 17 | M 38 | Y 83 | K 22 | CMYK (bez profilu koloru) | rgb(165, 123, 34) | Tak podają kolor niektóre księgi znaku: litery wskazują farby, a pionowe kreski oddzielają liczby. |
| 54,62 8,76 -65,79 | CIE Lab (biel D50, jak w CSS) | rgb(59, 130, 246) | Liczba ujemna nie pasuje do RGB, HSL ani CMYK, więc trzy liczby czytamy jako L, a i b z przestrzeni Lab. |
| 0xFF3B82F6 | Android, liczba ARGB (Java, Kotlin) | rgb(59, 130, 246) | Przedrostek 0x z ośmioma znakami to liczba ARGB z Javy albo Kotlina, a linijka pod polem podaje też odczyt HEX. |
| 0xF800 | RGB565 (Arduino, wyświetlacze TFT) | rgb(255, 0, 0) | Przedrostek 0x z czterema znakami to kolor 16-bitowy z kodu, np. stała koloru wyświetlacza z Arduino, więc pole przełącza się na RGB565 (Arduino, wyświetlacze TFT). |
| Y 81, Cb 90, Cr 240 | YCbCr (JPEG, 0–255) | rgb(238, 14, 14) | Litery Y, Cb i Cr wskazują YCbCr. Pole ustawia wariant z JPEG, a linijka pod nim podaje też YCbCr BT.601 (wideo SD, 16–235), w którym ten wpis daje #FE0000, i YCbCr BT.709 (wideo HD, 16–235). |
| color(srgb 0.231 0.51 0.965) | HEX | rgb(59, 130, 246) | Funkcji color() z przestrzenią srgb lista nie ma jako osobnego zapisu, więc pole zostaje przy HEX, a linijka pod nim mówi: „Odczytaliśmy ten wpis jako zapis w funkcji color() z CSS.” |
| czerwony | HEX | Pole zostaje puste. | Pole zna angielskie nazwy kolorów CSS, więc na polskie słowo odpowiada linijką „Nie rozpoznajemy tego wpisu jako koloru. Przykład w zapisie HEX: #3B82F6.” |
Źródła
- About color models (wersja angielska) — Figma
- Wybieranie kolorów w oknie dialogowym Kolory — Microsoft
- Color, klasa android.graphics (wersja angielska) — Android Developers
- EyeDropper API (wersja angielska) — MDN Web Docs
- CSS Color Module Level 4, wersja robocza redaktorów (wersja angielska) — CSS Working Group, W3C
- Kolory w Internecie — Wikipedia
- Flaga Polski — Wikipedia
- Ustawa z dnia 31 stycznia 1980 r. o godle, barwach i hymnie Rzeczypospolitej Polskiej oraz o pieczęciach państwowych, tekst jednolity Dz.U. 2025 poz. 299 — Internetowy System Aktów Prawnych, Sejm RP
- Projekt ustawy o symbolach państwowych skierowany do konsultacji publicznych — Ministerstwo Sportu i Turystyki, gov.pl
- RGB — Wikipedia
- CMYK — Wikipedia
- sRGB — Wikipedia
- Wybieranie kolorów w programie Adobe Photoshop — Adobe
- Wybieranie nowego koloru, Pomoc LibreOffice — The Document Foundation
- Polskie tłumaczenie GIMP 3.2.6, plik po-libgimp/pl.po — GIMP, GNOME
- HSV (grafika) — Wikipedia
- Przestrzeń barw L,a,b — Wikipedia
- Color (wersja angielska) — Unity Documentation
- Specifying colors (wersja angielska) — Matplotlib
- More resource types: Color (wersja angielska) — Android Developers
- Color class (wersja angielska) — Flutter API
- androidx.compose.ui.graphics, funkcja Color (wersja angielska) — Android Developers
- UIColor init(red:green:blue:alpha:) (wersja angielska) — Apple Developer
- SwiftUI Color init(_:red:green:blue:opacity:) (wersja angielska) — Apple Developer
- Permissions: Role Object (wersja angielska) — Discord Developer Portal
- Message: Embed Object (wersja angielska) — Discord Developer Portal
- Color conversions (wersja angielska) — OpenCV
- colorsys, Conversions between color systems (wersja angielska) — Python
- Working with 16-bit RGB (wersja angielska) — Microsoft Learn
- Adafruit GFX Graphics Library, Coordinate System and Units (wersja angielska) — Adafruit
- Data Conversion Rules, Direct3D (wersja angielska) — Microsoft Learn
- Plik Adafruit_SPITFT.cpp, funkcja color565 (wersja angielska) — Adafruit, GitHub
- Zalecenie ITU-R BT.601-7, punkty 2.5.1–2.5.3 (wersja angielska) — ITU
- Rec. ITU-T T.871, JPEG File Interchange Format (JFIF), punkt 7 (wersja angielska) — ITU
- Zalecenie ITU-R BT.709-6, punkty 3.2–3.4 (wersja angielska) — ITU
- RGB function (wersja angielska) — Microsoft Learn
- Interior.Color property, Excel (wersja angielska) — Microsoft Learn
- COLORREF (wersja angielska) — Microsoft Learn
- CIEXYZ — Wikipedia
- CIELUV — Wikipedia
- CSS Color Module Level 5, wersja robocza redaktorów (wersja angielska) — CSS Working Group, W3C
- Konwertowanie obrazów z jednego trybu kolorów na inny w programie Photoshop — Adobe
- Tailwind CSS v4.0 (wersja angielska) — Tailwind Labs
- Plik theme.css z domyślną paletą Tailwind CSS 4.3.3 (wersja angielska) — Tailwind Labs, GitHub
- Plik colors.js w wersji 3.4.17 (wersja angielska) — Tailwind Labs, GitHub
- RAL Digital colour library (wersja angielska) — RAL
- Pantone Connect (wersja angielska) — Pantone
- NCS Colour (wersja angielska) — NCS Colour AB
- X11 color names (wersja angielska) — Wikipedia
Wyniki dla wpisów w tabelach policzyła funkcja tego narzędzia, a przed publikacją sprawdził je test automatyczny. Zasady, normy i liczby, na które powołuje się tekst, pochodzą ze źródeł wymienionych wyżej.
Ostatnia aktualizacja treści: · przygotował i sprawdził zespół Arteon
Najczęstsze pytania o konwersję kolorów
Dlaczego darkgray jest jaśniejszy niż gray?
Bo obie nazwy pochodzą z różnych systemów. Szesnaście nazw CSS, w tym gray, pochodzi z palety VGA i z HTML, a większość pozostałych z systemu X11[5]. W X11 gray miał wartość 190, a darkgray 169, więc był od niego ciemniejszy. CSS przejął jednak gray z HTML z wartością 128 (#808080), a darkgray z X11 (#A9A9A9), i tak darkgray wyszedł jaśniejszy[49]. Podobnie jest z zielonym: green to w CSS ciemny #008000, a jasny #00FF00, który w X11 nazywał się green, w CSS nosi nazwę lime.
Jak sprawdzić kolory z obrazka albo zrzutu ekranu?
Wgraj obraz do ekstraktora kolorów z obrazu, który wyciągnie z niego do 12 dominujących kolorów z kodami HEX. Kod wybranego koloru wklej potem w polu Konwertuj z, żeby zobaczyć go w pozostałych zapisach.
Jak sprawdzić, czy tekst w tym kolorze będzie czytelny?
Konwerter nie mierzy kontrastu, więc wpisz kolor tekstu i tła do narzędzia do sprawdzania kontrastu kolorów. Policzy ono współczynnik kontrastu i pokaże, czy para kolorów spełnia wytyczne WCAG 2.1 na poziomach AA i AAA.

Masz pytanie lub sugestię?
Jeśli widzisz błąd w przeliczeniu albo brakuje Ci jakiegoś zapisu koloru, napisz do nas.