Jednotky
Kalkulačka farieb – prevod HEX, RGB a HSL
Zadajte farbu #RGB alebo #RRGGBB a získajte normalizovaný HEX, RGB a HSL pre CSS aj samostatné hodnoty odtieňa, sýtosti a svetlosti.
Bezplatná online kalkulačka
Zadajte svoje údaje
Prevod HEX farby na RGB a HSL
Farby na weboch a v digitálnej grafike sa často zapisujú ako HEX, RGB alebo HSL. Táto kalkulačka prevedie zadaný HEX kód na RGB a HSL a zobrazí normalizovaný HEX. Vstupom je jeden hexadecimálny kód farby; samostatné zadávanie RGB alebo HSL hodnôt rozhranie neponúka.
Pri HEX použite šesťmiestny zápis, napríklad #2563EB, alebo skrátený trojmiestny #RGB. Úvodný znak # je povinný. Kalkulačka kód normalizuje na šesť veľkých hexadecimálnych číslic a z neho vypočíta RGB a HSL. Osemmiestny zápis s alfa kanálom tento vstup neprijíma.
RGB opisuje červenú, zelenú a modrú zložku číslami od 0 do 255. HSL oddeľuje odtieň H v stupňoch, sýtosť S a svetlosť L v percentách. Tieto hodnoty sa vypočítajú zo zadaného HEX kódu. Pri odtieňoch sivej sa H uvádza dohodou ako 0°, pretože farba bez sýtosti nemá jednoznačný farebný odtieň.
Výsledok obsahuje normalizovaný HEX, RGB reťazec a HSL reťazec, doplnené samostatnými hodnotami odtieňa, sýtosti a svetlosti. Farebné zápisy môžete použiť ako hodnotu vlastnosti color alebo background-color vo svojom CSS. Nástroj nevytvára samostatný meraný dôkaz kontrastu a neprijíma alfa kanál či iné CSS zápisy.
Pri HEX #336699 sú jednotlivé dvojice 33, 66 a 99 v desiatkovej sústave 51, 102 a 153. Výsledok je rgb(51, 102, 153) a hsl(210deg, 50%, 40%). Takto si môžete overiť farbu vo formáte potrebnom pri úprave štýlov. Ak poznáte iba RGB alebo HSL, tento konkrétny vstup ich späť na HEX neprevádza.
Jednotlivé formáty opisujú tú istú farbu odlišným spôsobom. HEX je kompaktný hexadecimálny zápis, RGB pracuje priamo s intenzitou troch základných farebných zložiek a HSL oddeľuje odtieň, sýtosť a svetlosť. Prevod medzi nimi je preto praktický pri tvorbe webov, úprave CSS alebo prenášaní farieb medzi nástrojmi, ktoré používajú rozdielne farebné formáty.
Skrátený zápis a význam svetlosti
Trojmiestny HEX kód zopakuje každú číslicu: #369 sa rozvinie na #336699 a dá rovnakú farbu ako šesťmiestny vstup. Veľkosť písmen nemení hodnotu, ale úvodný # vo vstupnom zápise zachovajte. Osemmiestny HEX s priehľadnosťou sa tu nespracúva, pretože naň by bol potrebný aj alfa kanál.
HSL svetlosť nie je meraním vnímaného jasu ani kontrastu textu. Pri normalizovaných RGB zložkách 0,2, 0,4 a 0,6 sa L vypočíta ako (maximum + minimum) / 2 = 0,4, teda 40 %. Pre čitateľnosť textu potrebujete porovnať farbu popredia s konkrétnym pozadím v kalkulačke kontrastu, ktorá je odkazovaná nižšie.
Na nadväzujúci výpočet môžete použiť Kalkulačka kontrastu farieb WCAG.
Predpoklady a obmedzenia
HSL sa vyčísluje numericky; zaokrúhlenie displeja nenahrádza hodnotenie kontrastu. Alfa a iné CSS zápisy nie sú vstupom. Pri sivej farbe je odtieň dohodou 0°.
Zdroje a metodika
Časté otázky
Ako prevediem HEX na RGB?
Zadajte #RGB alebo #RRGGBB. Dvojice HEX číslic sa prevedú na tri zložky od 0 do 255. Napríklad #336699 dá rgb(51, 102, 153).
Je #369 rovnaká farba ako #336699?
Áno. Pri trojmiestnom zápise sa každá číslica zdvojí. Úvodný # je vo vstupnom poli povinný; malé a veľké písmená majú rovnaký význam.
Môžem zadať RGB alebo HSL namiesto HEX?
Táto kalkulačka má HEX vstup a z neho vypočíta RGB aj HSL. Priamy opačný prevod zo samostatne zadávaných RGB alebo HSL polí neponúka.
Čo znamená HSL pri sivej farbe?
Sýtosť je nulová a odtieň nemá jednoznačný význam. Výsledok ho uvádza dohodou ako 0°. Svetlosť stále opisuje polohu medzi čiernou a bielou v tomto modeli.
Overí HSL svetlosť čitateľnosť textu?
Nie. Kontrast závisí od konkrétnej dvojice popredie a pozadie. HSL svetlosť je súčasť farebného zápisu; na kontrast použite nadväzujúcu kalkulačku WCAG.
