Převeď HEX kód na čtyři tiskové barvy CMYK

Poslední revize obsahu:

Zadej kód barvy a hodnoty CMYK se objeví už během psaní: #3B82F6 je cmyk(76%, 47%, 0%, 4%). Převodník počítá standardním vzorcem bez tiskového profilu, takže výsledek ti poslouží jako rychlé vodítko. Hodnoty do tiskového souboru ti dá grafický program s profilem, který chce tiskárna.

na

Jak převést HEX kód na CMYK?

Nejdřív převeď kód na tři čísla a pak tato čísla na čtyři podíly barev. Kód #3B82F6 tvoří tři dvojice znaků: 3B, 82 a F6. Každá dvojice je číslo zapsané šestnáctkově, kde po číslicích 0 až 9 následují písmena A až F s hodnotami 10 až 15. 3B je tedy 3 × 16 + 11, neboli 59, z 82 je 130 a z F6 je 246.


Vzorec: K = 1 − (nejvyšší kanál ÷ 255), potom C = (1 − R ÷ 255 − K) ÷ (1 − K). Purpurovou spočítáš stejně ze zeleného kanálu a žlutou z modrého.


V kódu #3B82F6 je nejsvětlejší modrý kanál. 246 ÷ 255 dává 0,965, černá tedy vychází 0,035, neboli 4%. Azurová má 76%, purpurová 47% a žlutá 0%, protože právě modrý kanál určil černou. Výsledek je cmyk(76%, 47%, 0%, 4%).


Ke stejnému výsledku dojdeš ve dvou krocích s převodníkem HEX na RGB a potom převodníkem RGB na CMYK. Hodnoty CMYK z manuálu značky převedeš zpátky na kód převodníkem CMYK na HEX.

Co je HEX kód a co jsou hodnoty CMYK?

HEX kód popisuje barvu na obrazovce v šestnáctkové soustavě. Šest znaků za mřížkou tvoří tři dvojice pro červené, zelené a modré světlo a každá dvojice jde od 00 do FF, tedy od 0 do 255. Velká a malá písmena znamenají totéž. CSS přijímá i zkrácený zápis o třech znacích, v němž se každý znak zdvojí, takže #38F je totéž co #3388FF, a zápis o osmi znacích, jehož poslední dvojice udává průhlednost[1]. HEX kódy z jakékoli fotky vytáhneš extraktorem barev z obrázku.


CMYK popisuje barvu jako tiskovou barvu. Čtyři čísla říkají, jaká část papíru se pokryje azurovou, purpurovou, žlutou a černou. Písmeno K se vykládá jako key nebo jako poslední písmeno slova black[2]. Nula znamená papír bez barvy, sto plné krytí.


Obě stupnice běží opačným směrem. Obrazovka vyzařuje světlo, takže čím vyšší dvojice v HEX kódu, tím světlejší barva. Papír světlo odráží a tisková barva ho pohlcuje, takže čím vyšší hodnoty CMYK, tím tmavší barva. Tisková barva nemá ani průhlednost, proto převodník poslední dvojici osmiznakového kódu vynechá.


Pokud máš barvu v jiném zápisu, třeba v OKLCH, Lab nebo jako kód z Androidu, převodník barev ji ukáže najednou ve všech zápisech.

Jaké hodnoty CMYK mají běžné HEX kódy?

Přehled obsahuje základní barvy obrazovky a barvy, které CSS pojmenovává slovem. Všechny hodnoty spočítal převodník, takže stejná čísla uvidíš, když kód zadáš do pole.
HEX kódNázev v CSSHodnoty 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%
Maroon, green, navy a purple dostanou polovinu černé, protože jejich nejsvětlejší kanál má hodnotu 128, zhruba polovinu maxima. Názvy barev pocházejí ze specifikace CSS Color Module Level 4[1].

Proč Photoshop ukáže jiné hodnoty CMYK než kalkulačka?

Vzorec počítá s dokonalými barvami, kdežto grafický program pracuje s profilem ICC, tedy s popisem konkrétních barev, papíru a způsobu tisku. Rozdíl je nejvíc vidět na černé a šedých. Vzorec vždy nechá aspoň jednu ze tří pestrých barev na nule a veškerou šeď svěří černé barvě, takže #808080 je pro něj 50% černé a nic víc. Profil PSO Coated v3 pro křídový papír používá střední generování černé, černou zastaví na 96% a celkové krytí omezí na 300%[3]. S ním se proto stejná šeď skládá ze všech čtyř barev.

Rozevřený vzorník Pantone s fialovými a červenými vzorky a štítky se čtyřmi čísly vedle malých čtverečků v barvách tiskových barev
Vzorník Pantone má u každého vzorku označeného CP čtyři čísla vytištěná vedle malých čtverečků v barvách tiskových barev. PANTONE 2655 CP má 54% azurové a 61% purpurové bez žluté a černé, což převodník zapíše jako cmyk(54%, 61%, 0%, 0%). Foto: Bent Van Aeken, Unsplash

Když potřebuješ hodnoty do tiskového souboru, otevři ve Photoshopu dialog pro výběr barvy Adobe kliknutím na horní pole vzorku barvy v paletě nástrojů a zadej kód do textového pole #. Dialog ukáže zároveň hodnoty C, M, Y a K[4], spočítané v pracovním prostoru CMYK, který nastavíš v nabídce Úpravy › Nastavení barev[5]. Když se objeví výstražný trojúhelník, barvu nejde vytisknout tak, jak je, a kliknutím na trojúhelník vybereš nejbližší ekvivalent CMYK[4].

Kolik barvy dostane stejný kód podle vzorce a podle tiskového profilu?

Sloupec profilu jsme spočítali knihovnou Little CMS[6] s profilem PSO Coated v3 od European Color Initiative[7], metodou relativní kolorimetrie s kompenzací černého bodu. Percepční metoda dává výsledky, které se liší o pár procentních bodů.
HEX kódVzorec (tento převodník)Profil PSO Coated v3Celkové krytí s 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%
Černá #000000 spotřebuje s profilem 296% barvy, tedy skoro celou hranici 300%. U #3B82F6 se oba sloupce liší jen černou: vzorec přidá 4%, profil žádnou.

Jak vypadají barvy jednotného vizuálního stylu státní správy v CMYK?

Design systém gov.cz uvádí pro tři barvy jednotného vizuálního stylu státní správy kódy HEX[8]. Hodnoty CMYK tam uvedené nejsou, proto tabulka ukazuje, co z těchto kódů udělá vzorec a co profil PSO Coated v3.
BarvaHEX kódCMYK podle vzorceCMYK s profilem PSO Coated v3
Světle modrá#9EC8E932%, 14%, 0%, 9%40%, 11%, 1%, 0%
Modrá#00469B100%, 55%, 0%, 39%100%, 75%, 0%, 0%
Tmavě modrá#0C183879%, 57%, 0%, 78%97%, 79%, 20%, 68%
U modré dá vzorec 39% černé, kdežto profil ji vytiskne jen azurovou a purpurovou. Pokud tvoje firma nebo úřad má manuál značky s hodnotami CMYK, ber je odtamtud a převodník používej jen pro barvy, které manuál nepopisuje.

Jaké zápisy HEX kódu tento převodník přijme?

Každý z těchto zápisů pole přijme a převede, takže před vložením nemusíš nic opravovat. Tabulka ukazuje, co převodník s každým z nich udělá, a výsledky spočítal on sám.
Co zadášCo převodník ukážeJak to čteme
#3B82F6cmyk(76%, 47%, 0%, 4%)Celý kód s mřížkou, jako ve stylopisu nebo ve Figmě, převedeme beze změny.
3b82f6cmyk(76%, 47%, 0%, 4%)Bez mřížky a malými písmeny kód funguje taky, protože velikost písmen HEX kód nemění.
#38Fcmyk(80%, 47%, 0%, 0%)Zkrácený zápis o třech znacích rozšíříme zdvojením každého znaku, takže počítáme #3388FF.
#3B82F680cmyk(76%, 47%, 0%, 4%)Poslední dvojici, která udává průhlednost, vynecháme, protože tisková barva na papíře žádnou nemá.
color: #3B82F6;cmyk(76%, 47%, 0%, 4%)Z řádku zkopírovaného ze stylopisu nebo z vývojářských nástrojů prohlížeče si vezmeme jen kód.
"#3B82F6"cmyk(76%, 47%, 0%, 4%)Uvozovky, se kterými přijde kód zkopírovaný ze souboru JSON nebo z JavaScriptu, před převodem odstraníme.
##3B82F6cmyk(76%, 47%, 0%, 4%)Dvojitá mřížka vznikne, když vložíš kód tam, kde už mřížka byla, proto ji čteme jako jednu.

Převést jiné jednotky na CMYK

Převést HEX na jiné jednotky

Zdroje

  1. CSS Color Module Level 4: The RGB Hexadecimal Notations — W3C (anglická verze)
  2. CMYK — Wikipedie
  3. PSOcoated_v3.icc — záznam v registru profilů — International Color Consortium (anglická verze)
  4. Výběr barev v aplikaci Adobe Photoshop — Adobe
  5. Nastavení barev ve Photoshopu — Adobe
  6. Little CMS — Marti Maria (anglická verze)
  7. Downloads: ICC profiles from ECI — European Color Initiative (anglická verze)
  8. Barvy — Design systém gov.cz
  9. Color Bridge Guide Coated — Pantone (anglická verze)
  10. Pantone Guides With Suffix Of PC or EC — X-Rite (anglická verze)

Všechny hodnoty v tabulkách jsme spočítali z definic jednotek a před zveřejněním ověřili výpočtem. Historické údaje a názvy místních jednotek vycházejí ze zdrojů uvedených výše.

Poslední revize obsahu: · napsal a zkontroloval tým Arteon

Časté dotazy k převodu HEX na CMYK

Bude vytištěná barva vypadat stejně jako HEX barva na obrazovce?

Ne vždy. Nejsytější barvy obrazovky leží mimo to, co čtyři tiskové barvy na papíře zvládnou. Převedli jsme čistě modrou #0000FF do profilu PSO Coated v3 a zpátky pro obrazovku a vrátila se jako rgb(29, 60, 145), tedy výrazně tmavší. Čistě zelená #00FF00 se vrátila jako rgb(102, 179, 41), kdežto šedá #808080 zůstala beze změny. U velkého nákladu si od tiskárny vyžádej nátisk.

Dá se HEX kód převést na barvu Pantone?

Vzorcem ne. Barvy Pantone jsou předem namíchané tiskové barvy, každá se svým číslem ve vzorníku. Nejbližší protějšky ukazuje vzorník Pantone Color Bridge, který porovnává 2587 barev Pantone s nejbližšími hodnotami CMYK a uvádí i hodnoty HTML a RGB[9]. Vzorky označené CP jsou v něm napodobeniny čtyřbarvotiskem na natíraném papíře[10].

Co když mám barvu v RGB, a ne v HEX?

Zadej tři čísla do převodníku RGB na CMYK, který počítá stejným vzorcem. Toto pole přijímá jen HEX kódy a na jiný zápis odpoví upozorněním s příkladem platného kódu.

Znamená bílá #FFFFFF v tisku bílou barvu?

Ne. cmyk(0%, 0%, 0%, 0%) znamená, že se netiskne žádná barva, takže je vidět papír. Na bílém papíře vyjde bílá, na krémovém nebo šedém papíře barva papíru.

Snímek obrazovky bezplatného nástroje Arteon: Převeď HEX kód na čtyři tiskové barvy CMYK

Pomoz nám vylepšit naše nástroje

Máš nápad na novou funkci, vidíš chybu nebo chceš navrhnout jiný nástroj? Napiš nám.