Převodník barev HEX na RGB

HEX a RGB: dva zápisy téže barvy

Každá barva, kterou vidíte na obrazovce, je namíchána ze tří světel: červeného, zeleného a modrého. Rozsviťte všechny tři naplno a dostanete bílou; zhasněte je a dostanete černou. HEX a RGB jsou jednoduše dva zápisy popisující, jak jasně má každý z těchto tří kanálů svítit. Ukazují na přesně stejnou barvu, takže dobrý převodník jen překládá mezi dvěma zápisovými soustavami, aniž by kdy skutečný odstín změnil. Přesně to dělá tento nástroj, zcela ve vašem prohlížeči, a navíc zobrazuje živou ukázku barvy, takže si výsledek můžete ověřit vlastníma očima.

Jak číst hex kód

Hex barva vypadá jako #1E90FF. Křížek jen značí začátek; šest znaků za ním tvoří tři dvojice zapsané ve vzoru #RRGGBB. První dvojice je červená, druhá zelená, třetí modrá. Každá dvojice je číslo zapsané v šestnáctkové soustavě, tedy v základu 16, kde číslice běží 0-9 a poté A, B, C, D, E, F zastupují hodnoty 10 až 15. Jedna dvojice může nabývat hodnot od 00 (kanál je zcela vypnutý) až po FF (kanál je zcela zapnutý). V běžné desítkové soustavě je tento rozsah přesně 0 až 255, stejná škála, jakou používá RGB. S 256 možnými úrovněmi na kanál dokáže šestimístný zápis popsat 16 777 216 odlišných barev.

Převod oběma směry, na příkladu

Chcete-li přejít z HEX na RGB, rozdělte kód na tři dvojice a každou převeďte ze základu 16 na běžné desítkové číslo. Vezměte #1E90FF. Červená dvojice je 1E: to je 1 krát 16, plus 14 (E), což se rovná 30. Zelená dvojice 90 je 9 krát 16, plus 0, což se rovná 144. Modrá dvojice FF je 15 krát 16, plus 15, což se rovná 255. Takže #1E90FF se stane rgb(30, 144, 255) — známá "dodger blue".

Opačný postup je tentýž proces obráceně. Každé číslo RGB zapište jako dvě hexadecimální číslice. Čistá červená, rgb(255, 0, 0), dá FF, 00 a 00, které se spojí do #FF0000. Jedna věc, kterou stojí za to si pamatovat: pokud je hodnota nižší než 16, přesto potřebujete obě číslice, takže 5 se zapíše 05, nikoli jen 5. Převodník toto doplnění zajistí za vás, ale při ručním počítání na to lidé často doplácejí.

Kde se který formát používá

HEX je každodenní jazyk webu. CSS, HTML a většina kódu, který píšete, sahá po hex kódech, protože jsou kompaktní a snadno se kopírují. RGB se naopak objevuje spíš v návrhářských a obrazových nástrojích — Figma, Photoshop, Sketch a Illustrator obvykle zobrazují posuvníky nebo pole v rozsahu 0-255, a i aplikace pro nahrávání obrazovky nebo video často očekávají RGB. Proto běžně vezmete hex kód ze stylopisu a potřebujete jeho podobu RGB, abyste jej mohli zadat do návrhářského panelu, nebo naopak. Právě tento koloběh je celým důvodem, proč je převodník užitečný. Pokud potřebujete vytvořit celou sadu ladících odstínů, ne jen přeložit jeden, lepším výchozím bodem je náš generátor barevných palet, a další podobné nástroje najdete pod nástroji pro vývojáře.

Alfa, průhlednost a HSL

Oba zápisy mají rozšířenou formu, která přidává průhlednost. RGB se stane rgba(30, 144, 255, 0.5), kde čtvrtá hodnota je alfa — 0 znamená zcela průhledné, 1 zcela plné. HEX přidává pro stejný účel čtvrtou dvojici, čímž vzniká osmimístný kód #RRGGBBAA; 80 je například zhruba 50% neprůhlednost. Některé převodníky nabízejí i HSL (odstín, sytost, jas), který popisuje barvu způsobem bližším lidskému uvažování — vyberete odstín na kole a poté ladíte jeho sytost a jas. HSL je jiný myšlenkový model, nikoli jiná paleta, takže může být intuitivnější, když chcete barvu jemně posunout k světlejší nebo tlumenější, aniž byste žonglovali se třemi samostatnými čísly.

Často kladené otázky