RGB ti dá tri desatinné kanály medzi 0 a 255. Prevod na HEX zmení každý kanál na dvojciferné hexadecimálne číslo, takže celá farba sa zmestí do jedného kompaktného tokenu, ktorý rozumie každý prehliadač, dizajnový nástroj a style guide.
Ako funguje konverzia z RGB na HEX
- Vezmi červený kanál a vydel ho 16: podiel je prvé miesto, zvyšok druhé.
- Zápis čísiel 10 až 15 ako písmen A až F — 255 sa takto zapíše ako FF.
- Opakuj pre zelenú a modrú, jednociferné hodnoty doplň vedúcou nulou: 5 sa stane 05.
- Spoj tri dvojice a pred ne daj #.
Príklad
Presné, pokiaľ sú kanály celými číslami od 0 do 255. Zlomkové hodnoty ako rgb(79.5, 70, 229) sa najprv zaokrúhlia na najbližšie celé číslo, pretože HEX medzi tým nedokáže nič uložiť.
RGB a HEX vysvetlené
Čo je RGB?
RGB popisuje farbu troma kanálmi svetla — červená, zelená a modrá — každý v rozsahu 0 až 255. Odráža to, ako obrazovky skutočne fungujú: všetky tri na 255 dávajú bielu, všetky na 0 dávajú čiernu. RGB je správna voľba vždy, keď potrebuješ s farbou počítať, a rgba() pridáva priehľadnosť navrch.
- Syntax:
- rgb(R, G, B)
- Rozsah:
- 0–255 na kanál
- Najvhodnejšie pre:
- kód, canvas, priehľadnosť s rgba()
Čo je HEX?
HEX kód je šestciferné hexadecimálne číslo, ktoré uchováva červený, zelený a modrý kanál farby za úvodným #. Každý pár číslic reprezentuje jeden kanál od 00 (žiadny) po FF (plný), čo dáva rovnakých 16,7 milióna farieb ako RGB v kompaktnejšom tvare. HEX je predvolený v CSS, dizajnových nástrojoch a brand manuáloch.
- Syntax:
- #RRGGBB
- Rozsah:
- 00–FF na kanál
- Najvhodnejšie pre:
- CSS, odovzdanie dizajnu, brand manuály
Referenčná tabuľka RGB → HEX
Najbežnejšie CSS farby prevedené z RGB na HEX.
| Farba | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |