HEX í RGB breytir

Hvað er HEX til RGB umbreyting?

Þessi síða tekur við HEX litakóða eins og #4f46e5 eða #abc og breytir honum samstundis í RGB‑gildi – þrjár heiltölur á bilinu 0 til 255 sem skjáir nota til að birta lit. Þegar þú slærð inn HEX‑gildið sýnir síðan RGB‑jafngildið ásamt öðrum litarsniðum (HSL, HSV, CMYK, LAB) og þú getur afritað þau beint í kóða eða hönnunarforrit.

Það sem aðgreinir þessa síðu frá almennum litabreytum er að hún sýnir beint tengsl HEX og RGB án nokkurrar nálgunar. HEX‑kóðar eru í raun þjöppuð framsetning á sömu þremur 8‑bita rásunum sem RGB notar, og umbreytingin byggir eingöngu á stærðfræði – hvert par af sextándatölustöfum er margfaldað með 16 í viðeigandi veldi. Engin hringun, engin klipping á litrófi, og niðurstaðan er alltaf nákvæmlega sú sama og upphaflega HEX‑gildið.

Hvernig virkar umbreytingin?

HEX‑kóðar fylgja mynstrinu #RRGGBB þar sem hver stafur er sextándatala (0‑9 og A‑F). Rásir rauðs, græns og blás fá hver tvær sextándatölur (eitt bæti). Til að finna RGB‑gildið er hvert par lesið sem tölu í grunni 16 og umreiknað í tugakerfi.

Dæmi: Liturinn #4f46e5:

• Rauður: 4f í sextándakerfi = 4×16 + 15 = 64 + 15 = 79
• Grænn: 46 = 4×16 + 6 = 64 + 6 = 70
• Blár: e5 = 14×16 + 5 = 224 + 5 = 229

Niðurstaðan er RGB(79, 70, 229). Þetta er nákvæmlega sami litur og HEX‑kóðinn, bara skrifaður í tugakerfi.

Síðan tekur einnig við þriggja stafa styttri kóða (t.d. #abc). Hver stafur er tvöfaldaður áður en umbreytingin fer fram: #abc verður #aabbcc. Því gildir að #abc jafngildir RGB(170, 187, 204) því aa = 170, bb = 187, cc = 204. Þessi regla kemur úr CSS‑staðlinum og er algeng í forritun.

# merkið er valfrjálst – síðan samþykkir bæði #4f46e5 og 4f46e5. Ef þú notar litavalinn (color picker) færðu alltaf fullan sex stafa kóða.

Reglur og jaðartilfelli

Síðan fylgir ströngum reglum til að forðast misskilning:

• Sex eða þrír stafir eingöngu. Átta stafa HEX‑kóðar sem innihalda alpha‑rás (gegnsæi) eru ekki studdir. Sláðu inn #RRGGBB eða #RGB.
• Villuskilaboð fyrir ógilt snið. Ef þú slærð inn eitthvað sem ekki passar við væntanlegt form birtist skilaboðin:
  "Sláðu inn hex lit eins og #4f46e5 eða #abc."
• Nákvæm heiltala. RGB‑gildin eru alltaf heiltölur á bilinu 0–255. Engin hringun á sér stað því umbreytingin er algerlega reikningsleg.
• Samstundis uppfærsla. Hvenær sem þú breytir HEX‑gildinu eða einhverju öðru litarsniði (HSL, HSV, o.s.frv.) uppfærast öll reitir í rauntíma. Þannig geturðu prófað að slá inn RGB‑gildi og séð HEX‑jafngildið – þetta er tvíhliða.
• Vafri eingöngu. Allar útreikningar fara fram í vafranum þínum. Ekkert er sent upp á netþjón eða vistað.

Hver þarf á þessari síðu að halda?

Framendaforritarar þurfa oft að breyta HEX litakóðum úr CSS yfir í RGB‑gildi til að nota í JavaScript, <canvas> eða inline stílum sem kalla á stök rásargildi. Þegar þú vilt breyta lit á mynd með ctx.fillStyle = 'rgb(79,70,229)' er einfaldara að hafa nákvæm gildi en að reyna að þátta HEX‑kóðann.

Hönnuðir fá oft litaspessifikasjónir frá vörumerkjaleiðbeiningum sem HEX‑kóðar en þurfa að setja sömu liti inn í hönnunarforrit sem nota RGB rennistika (t.d. Figma, Sketch eða Photoshop). Með því að hafa RGB‑gildin við höndina forðast þeir námundun þegar forritið breytir sjálfkrafa milli sniða.

Tölvuleikjahönnuðir, stafrænir listamenn og UI‑hönnuðir sem vinna með litastýringu í kóða – til dæmis að blanda litum, reikna skugga eða búa til hallalit – nýta sér að RGB‑gildi eru heiltölur sem hægt er að breyta beint með stærðfræði.

Námsmenn og áhugafólk sem lærir um tengsl sextándatalna og litakerfa. Með því að slá inn HEX‑kóða og sjá samstundis RGB‑tölurnar læra þau hvernig hver rás er ákvörðuð.

Tengsl HEX og RGB í CSS og hönnun

Í CSS er hægt að nota bæði color: #ff6600 og color: rgb(255, 102, 0). Vafrinn túlkar þau eins en það er munur á lestri og skrifum.

HEX‑kóðar eru styttri – sex stafir í stað nokkurra tölustafa og kommu – og hafa verið algengir á vefnum frá upphafi vegna notkunar í HTML bakgrunnslitum (bgcolor). Þeir eru einnig stöðluð framsetning í verkfærum eins og litavali í TextEdit eða Visual Studio Code. Hins vegar þegar verið er að breyta litum í gegnum JavaScript er auðveldara að vinna með RGB‑fylki (t.d. ``) þar sem hægt er að nálgast stök gildi með color.

Margir forritarar kjósa að skrifa HEX í CSS en nota RGB í kóða. Síðan gerir það að verkum að þú getur fengið nákvæm gildi til að afrita inn í JavaScript án þess að reikna sjálfur. Þetta er sérstaklega gagnlegt þegar unnið er með litastýringu fyrir aðgengi – til dæmis til að reikna ljóskraft (luminance) úr RGB‑rásunum til að athuga WCAG litaskuggahlutföll.

Algengar HEX litir og RGB jafngildi þeirra

Til að skilja tengslin betur er gott að skoða nokkur dæmi. Taflan að neðan sýnir algenga liti sem HEX og RGB.

Athugið að #808080 er miðgrár af því hver rás er nákvæmlega helmingur af 255 – 128. Þetta er gott dæmi um hvernig jöfn gildi í öllum rásum gefa gráskala. Ef eitt gildi er hærra fæst litur. #ff6600 er hreint appelsínugult: rautt í fullum styrk (255), grænt í 102 (40% af 255) og ekkert blátt. Þessi samsetning sýnir hvernig heildar liturinn myndast úr hlutfallslegum styrk hverrar rásar.

Algengar spurningar (FAQ)

Af hverju fæ ég ekki átta stafa HEX (með alpha) umbreytta?

Síðan þessi er sérstaklega gerð fyrir HEX‑til‑RGB án gegnsæis. Átta stafa HEX kóðar (t.d. #4f46e580) innihalda gegnsæisrás sem hefur ekkert pláss í RGB‑sniðinu (RGB hefur enga alpha). Fyrir alpha lit þarftu RGBA eða notkun á sérstakri síðu.

Hvað gerist ef ég slæ inn #xyz?

Stafirnir x, y, z eru ekki gilt sextándakerfi. Síðan sýnir villuskilaboðin: „Sláðu inn hex lit eins og #4f46e5 eða #abc.“ Leyfilegir stafir eru 0–9 og A–F (hástafir eða lágstafir).

Er hægt að slá inn HEX kóða án #?

Já. Bæði #4f46e5 og 4f46e5 virka. Síðan fjarlægir # ef hann er til staðar en annars er gildið lesið beint.

Hvers vegna fæ ég alltaf heiltölur og aldrei tugabrot?

HEX‑til‑RGB umbreytingin er algerlega reikningsleg. Sextándakerfið notar 16 veldi en tugakerfið notar 10 veldi. Hvert „bæti“ (tvær sextándatölur) samsvarar nákvæmlega einni heiltölu á bilinu 0–255. Það er aldrei hægt að fá brot.

Breytist önnur snið (HSL, HSV, o.s.frv.) samtímis?

Já. Þegar þú breytir HEX‑gildinu uppfærast öll önnur litarsnið á síðunni samstundis. Þetta gerir þér kleift að sjá sama litinn í mörgum sniðum án þess að gera neinar viðbótarútreikningar.

Hvar eru gögnin mín vistuð?

Hvergi. Allar umbreytingar fara fram í vafranum þínum. Ekkert er sent upp á netþjón og ekkert vistað. Þú getur notað síðuna jafnvel án nettengingar eftir að hún hefur hlaðist.