Przelicz kod HEX na cztery farby CMYK

Ostatnia aktualizacja treści:

Wpisz kod koloru, a wartości CMYK pojawią się w trakcie pisania: #3B82F6 to cmyk(76%, 47%, 0%, 4%). Konwerter liczy wzorem bez profilu drukarni, więc wynik daje Ci szybki punkt wyjścia, a liczby do pliku drukarskiego poda program graficzny z profilem, o który prosi drukarnia.

na

Jak przeliczyć kod HEX na CMYK?

Najpierw zamień kod na trzy liczby, a potem te liczby na cztery udziały farb. Kod #3B82F6 składa się z trzech par znaków: 3B, 82 i F6. Każda para to liczba zapisana szesnastkowo, czyli z cyframi od 0 do 9 i literami od A do F, które oznaczają wartości od 10 do 15. Para 3B daje więc 3 × 16 + 11, czyli 59, para 82 daje 130, a para F6 daje 246.


Wzór: K = 1 − (największy kanał ÷ 255), a C = (1 − R ÷ 255 − K) ÷ (1 − K). Magentę liczysz tak samo z kanału zielonego, a żółty z niebieskiego.


W kodzie #3B82F6 najjaśniejszy jest kanał niebieski. 246 ÷ 255 daje 0,965, więc czerń wychodzi 0,035, czyli 4%. Cyjan wynosi 76%, magenta 47%, a żółty zero, bo to właśnie kanał niebieski wyznaczył czerń. Wynik to cmyk(76%, 47%, 0%, 4%).


Ta sama droga prowadzi przez trzy liczby RGB: pierwszy krok wykonuje konwerter HEX na RGB, drugi konwerter RGB na CMYK. Wartości z księgi znaku zamienisz z powrotem na kod konwerterem CMYK na HEX.

Czym jest kod HEX, a czym wartości CMYK?

Kod HEX zapisuje kolor ekranowy w systemie szesnastkowym. Sześć znaków po krzyżyku tworzy trzy pary: pierwsza opisuje światło czerwone, druga zielone, a trzecia niebieskie. Każda para przyjmuje wartości od 00 do FF, czyli od 0 do 255, a wielkość liter nie ma znaczenia. CSS dopuszcza też skrót z trzech znaków, w którym każdy znak się podwaja, więc #38F to #3388FF, oraz zapis z ośmiu znaków, w którym ostatnia para opisuje przezroczystość[1]. Kod HEX odczytasz z każdego zdjęcia w ekstraktorze kolorów z obrazu.


CMYK opisuje kolor farbą. Cztery liczby to procent pokrycia papieru cyjanem, magentą, żółtym i czernią. Literę K tłumaczy się na dwa sposoby: jako ostatnią literę angielskiego black albo jako skrót od key colour, czyli koloru kluczowego[2]. Zero oznacza czysty papier, a sto pełne krycie.


Obie skale działają w przeciwne strony. Ekran świeci, więc im wyższe pary w kodzie HEX, tym jaśniejszy kolor. Papier odbija światło, a farba je pochłania, więc im wyższe liczby w CMYK, tym ciemniej. Farba nie ma też przezroczystości, dlatego konwerter pomija ostatnią parę kodu ośmioznakowego.


Jeśli kolor masz w innym zapisie, na przykład w OKLCH, Lab albo jako kod z Androida, konwerter kolorów pokaże go naraz we wszystkich zapisach.

Jakie wartości CMYK mają popularne kody HEX?

Zestawienie obejmuje podstawowe barwy ekranu i kolory, które CSS nazywa słowami. Wszystkie wartości policzył konwerter, więc każdą z nich zobaczysz też po wpisaniu kodu w pole.
Kod HEXNazwa w CSSWartości CMYK
#FFFFFFwhite0%, 0%, 0%, 0%
#000000black0%, 0%, 0%, 100%
#FF0000red0%, 100%, 100%, 0%
#00FF00lime100%, 0%, 100%, 0%
#0000FFblue100%, 100%, 0%, 0%
#FFFF00yellow0%, 0%, 100%, 0%
#00FFFFaqua100%, 0%, 0%, 0%
#FF00FFfuchsia0%, 100%, 0%, 0%
#C0C0C0silver0%, 0%, 0%, 25%
#808080gray0%, 0%, 0%, 50%
#800000maroon0%, 100%, 100%, 50%
#008000green100%, 0%, 100%, 50%
#000080navy100%, 100%, 0%, 50%
#800080purple0%, 100%, 0%, 50%
#FFA500orange0%, 35%, 100%, 0%
Kolory maroon, green, navy i purple dostają połowę czerni, bo ich najjaśniejszy kanał wynosi 128, czyli mniej więcej połowę pełnej wartości. Nazwy kolorów pochodzą ze specyfikacji CSS Color Module Level 4[1].

Dlaczego Photoshop podaje inne wartości CMYK niż kalkulator?

Wzór zakłada idealne farby, a program graficzny liczy z profilem ICC, czyli z opisem konkretnych farb, papieru i sposobu druku. Różnicę najłatwiej zobaczyć na czerni i szarościach. Wzór zawsze zeruje co najmniej jedną z trzech farb kolorowych i całą szarość oddaje czarnej farbie, więc #808080 to dla niego 50% czerni i nic więcej. Profil PSO Coated v3, przygotowany do papieru kredowego, ma średnie generowanie czerni, najciemniejszą czerń kończy na 96%, a łączną ilość farby w jednym punkcie ogranicza do 300%[3]. Dlatego z profilem ta sama szarość składa się z czterech farb.

Rozłożony wzornik Pantone z fioletowymi i czerwonymi próbkami oraz etykietami z czterema liczbami przy kwadracikach w kolorach farb
Wzornik Pantone ma przy każdej próbce z oznaczeniem CP cztery liczby wydrukowane obok kwadracików w kolorach farb. Odcień PANTONE 2655 CP ma 54% cyjanu i 61% magenty bez żółtego i czerni, co konwerter zapisuje jako cmyk(54%, 61%, 0%, 0%). Zdjęcie: Bent Van Aeken, Unsplash

Gdy potrzebujesz liczb do pliku drukarskiego, otwórz w Photoshopie Próbnik kolorów Adobe, klikając pole koloru narzędzia w przyborniku, i wpisz kod w polu tekstowym ze znakiem #. Okno pokaże jednocześnie wartości C, M, Y i K[4], policzone w profilu CMYK ustawionym poleceniem Edycja › Ustawienia kolorów[5]. Jeśli obok próbki pojawi się trójkąt ostrzeżenia, kolor leży poza zakresem farb, a kliknięcie trójkąta wybiera najbliższy odpowiednik[4].

Ile farby dostaje ten sam kod ze wzoru, a ile z profilem drukarni?

Kolumnę profilu policzyliśmy biblioteką Little CMS[6] z profilem PSO Coated v3 pobranym ze strony European Color Initiative[7], metodą relatywną kolorymetryczną z kompensacją punktu czerni. Metoda percepcyjna daje wyniki różniące się o kilka punktów procentowych.
Kod HEXWzór (ten konwerter)Profil PSO Coated v3Suma farb z profilem
#0000000%, 0%, 0%, 100%83%, 67%, 51%, 95%296%
#3333330%, 0%, 0%, 80%63%, 53%, 45%, 68%229%
#8080800%, 0%, 0%, 50%44%, 36%, 33%, 23%136%
#FF00000%, 100%, 100%, 0%0%, 96%, 100%, 0%196%
#0000FF100%, 100%, 0%, 0%98%, 82%, 0%, 0%180%
#3B82F676%, 47%, 0%, 4%76%, 47%, 0%, 0%123%
#FFCC000%, 20%, 100%, 0%0%, 19%, 90%, 0%109%
Czerń #000000 z profilem zużywa 296% farby, czyli prawie całą granicę 300%. Kod #3B82F6 różni się w obu kolumnach tylko czernią: wzór daje jej 4%, a profil zero.

Jakie wartości CMYK podaje księga znaku Funduszy Europejskich?

Znak marki Fundusze Europejskie widzisz na tablicach i plakatach projektów finansowanych z funduszy unijnych. Jego księga tożsamości wizualnej opisuje kolory znaku przede wszystkim w CMYK, a przy przejściu na inne zapisy odsyła do parametrów podanych w księdze[8]. Obok wartości z księgi stoi wynik wzoru dla tego samego kodu HEX.
Kolor znakuKod HEX w księdzeCMYK w księdzeCMYK ze wzoru
Niebieski#003399100%, 80%, 0%, 0%100%, 67%, 0%, 40%
Czerwony#E21D2C0%, 100%, 100%, 0%0%, 87%, 81%, 11%
Żółty#FFCC000%, 0%, 100%, 0%0%, 20%, 100%, 0%
Czarny#0000000%, 0%, 0%, 100%0%, 0%, 0%, 100%
Wzór dałby niebieskiemu 40% czerni, której w wartościach z księgi nie ma wcale, a żółtemu dodałby 20% magenty. Jeśli Twoja firma albo instytucja ma własną księgę znaku, bierz wartości CMYK z niej, a konwerter traktuj jako przybliżenie dla kolorów, których księga nie opisuje. Kolory podaje strona 24 księgi[8].

Jakie zapisy kodu HEX przyjmuje ten konwerter?

Każdy z tych zapisów pole przyjmuje i przelicza, więc nie trzeba niczego poprawiać przed wklejeniem. Tabela pokazuje, co konwerter robi z każdym z nich, a wyniki policzył on sam.
Co wpisujeszCo pokaże konwerterJak to czytamy
#3B82F6cmyk(76%, 47%, 0%, 4%)Pełny kod z krzyżykiem, taki jak w arkuszu stylów albo w Figmie, przeliczamy bez zmian.
3b82f6cmyk(76%, 47%, 0%, 4%)Kod bez krzyżyka i zapisany małymi literami też przyjmujemy, bo wielkość liter w kodzie HEX nic nie zmienia.
#38Fcmyk(80%, 47%, 0%, 0%)Skrót z trzech znaków rozwijamy, podwajając każdy znak, więc liczymy kolor #3388FF.
#3B82F680cmyk(76%, 47%, 0%, 4%)Ostatnią parę kodu, czyli przezroczystość, pomijamy, bo farba na papierze jej nie ma.
color: #3B82F6;cmyk(76%, 47%, 0%, 4%)Z linii skopiowanej z arkusza stylów albo z narzędzi przeglądarki wyjmujemy sam kod.
"#3B82F6"cmyk(76%, 47%, 0%, 4%)Cudzysłów, z którym kod przychodzi z pliku JSON albo z kodu JavaScript, zdejmujemy przed przeliczeniem.
##3B82F6cmyk(76%, 47%, 0%, 4%)Podwójny krzyżyk powstaje, gdy wklejasz kod w miejsce, w którym krzyżyk już stał, więc czytamy go jak pojedynczy.

Konwertuj inne jednostki na CMYK

Konwertuj HEX na inne jednostki

Źródła

  1. CSS Color Module Level 4: The RGB Hexadecimal Notations — W3C (wersja angielska)
  2. CMYK — Wikipedia
  3. PSOcoated_v3.icc — wpis w rejestrze profili — International Color Consortium
  4. Wybieranie kolorów w programie Adobe Photoshop — Adobe
  5. Ustawienia kolorów w programie Photoshop — Adobe
  6. Little CMS — Marti Maria (wersja angielska)
  7. Downloads: ICC profiles from ECI — European Color Initiative (wersja angielska)
  8. Księga Tożsamości Wizualnej marki Fundusze Europejskie 2021-2027 — Portal Funduszy Europejskich
  9. Color Bridge Guide Coated — Pantone (wersja angielska)
  10. Pantone Guides With Suffix Of PC or EC — X-Rite (wersja angielska)

Wszystkie wartości w tabelach wyliczyliśmy z definicji jednostek i sprawdziliśmy rachunkowo przed publikacją. Dane historyczne i nazwy lokalnych jednostek opieramy na źródłach wymienionych wyżej.

Ostatnia aktualizacja treści: · przygotował i sprawdził zespół Arteon

Najczęstsze pytania o przeliczanie HEX na CMYK

Czy kolor z kodu HEX wyjdzie w druku tak samo jak na ekranie?

Nie zawsze. Najbardziej nasycone kolory ekranu leżą poza zakresem, który dają cztery farby na papierze. Przeliczyliśmy czysty błękit #0000FF na profil PSO Coated v3 i z powrotem na ekran: wrócił jako rgb(29, 60, 145), czyli wyraźnie ciemniejszy, a zieleń #00FF00 wróciła jako rgb(102, 179, 41). Szarość #808080 wróciła bez zmian. Przy dużym nakładzie poproś drukarnię o wydruk próbny.

Czy kod HEX da się zamienić na kolor Pantone?

Nie wzorem. Pantone to farby mieszane przed drukiem, a każda ma swój numer we wzorniku. Najbliższe odpowiedniki pokazuje wzornik Pantone Color Bridge, który zestawia 2587 barw Pantone z ich najbliższym zapisem CMYK oraz z wartościami HTML i RGB[9]. Barwy z oznaczeniem CP to w nim odwzorowania czterema farbami na papierze powlekanym[10].

Co zrobić, gdy mam kolor w RGB, a nie w HEX?

Wpisz trzy liczby w konwerterze RGB na CMYK, który liczy tym samym wzorem. To pole przyjmuje tylko kod HEX, a po wpisaniu czegoś innego pokazuje komunikat z przykładem poprawnego kodu.

Czy biały #FFFFFF oznacza w druku białą farbę?

Nie. Zapis cmyk(0%, 0%, 0%, 0%) oznacza brak farby, więc w tym miejscu widać sam papier. Na białym papierze wychodzi biel, a na kremowym albo szarym papierze kolor tego papieru.

Zrzut ekranu darmowego narzędzia Arteon: Przelicz kod HEX na cztery farby CMYK

Pomóż nam ulepszyć narzędzia

Masz pomysł na nową funkcję, widzisz błąd lub chcesz zaproponować inne narzędzie? Napisz do nas.