RGB í HEX breytir

RGB til Hex: Nákvæm litabreyting á milli tveggja algengustu litakerfa vefsins

Þessi síða tekur við rauðum, grænum og bláum gildum (hvert á bilinu 0–255) og breytir þeim samstundis í sex stafa hexadecimal litakóða (t.d. #1E90FF). Verkfærið sýnir litinn sjónrænt og uppfærir önnur studd litakerfi (HSL, HSV, CMYK, LAB og litaval) á sama tíma, án nokkurs „breyta" hnapps. Allt gerist í vafranum þínum – engin gögn eru send upp.

Hvað gerir þessa síðu öðruvísi

Ólíkt mörgum öðrum RGB-til-hex breytum á netinu, þá er umbreytingin hér alveg nákvæm og afturkræf. Ástæðan er sú að bæði RGB (með þremur rásum, 0–255) og sex stafa hexadecimal litakerfið byggjast á sama litarými, sRGB. Það er engin gamút klipping eða nálgun. Hex úttakið byrjar alltaf á # og, nema þú notir átta stafa formið (með gegnsæi), ber það enga alfa rás.

RGB inntakið er gefið upp sem þrjár tölur aðskildar með kommum eða bilum (t.d. 79, 70, 229). Niðurstaðan er alltaf sex stafa kóði (t.d. #4F46E5), því hvert 0–255 gildi á sér nákvæma tveggja stafa tvítölu (hex) samsvörun. Verkfærið dregur ekki sjálfkrafa saman endurtekin stafapör í þriggja stafa styttingu – til dæmis helst #AABBCC sem #AABBCC – en hex inntaksreiturinn samþykkir þriggja stafa styttingu (t.d. #abc) og útvíkkar hana innbyrðis.

RGB litakerfið og 0–255 kvarðinn

RGB stendur fyrir rauðan, grænan og bláan (Red, Green, Blue). Þetta er aukefnalitakerfi – litir myndast með því að bæta ljósi við ljós. Stafrænir skjáir (tölvur, farsímar, spjaldtölvur) nota þrjá ljósdíóða (einn rauðan, einn grænan, einn bláan) fyrir hvern pixil. Gildið 0 þýðir engin ljósafköst (svartur), gildið 255 þýðir full afköst (hreinasti liturinn af viðkomandi lit).

Af hverju 0–255? Það er vegna þess að tölvur nota átta bita til að geyma hvert gildi. Átta bitar geta táknað 2⁸ = 256 mismunandi gildi, frá 0 til 255. Saman geta þrjár rásir (256 × 256 × 256) búið til 16,7 milljónir lita (16.777.216 nákvæmlega). Þetta er nóg til að tákna nánast alla liti sem mannsaugað getur greint á skjá.

Til dæmis:

• 0, 0, 0 = svartur
• 255, 255, 255 = hvítur
• 255, 0, 0 = rauður
• 0, 255, 0 = grænn
• 0, 0, 255 = blár

Hexadecimal litakóðar: uppbygging og stærðfræði

Hexadecimal (oft kallað „hex") er talnakerfi með 16 sem grunn, en ekki 10 eins og tugakerfið. Tölustafirnir 0–9 og bókstafirnir A–F (A=10, B=11, C=12, D=13, E=14, F=15) eru notaðir.

Sex stafa hex kóðinn er gerður þannig:

1. Fyrstu tveir stafirnir tákna rautt gildi (0–255)
2. Næstu tveir stafirnir tákna grænt gildi
3. Síðustu tveir stafirnir tákna blátt gildi

Hvert gildi er breytt úr tugakerfi yfir í tvítölukerfi með þessari aðferð:

• Taktu tugagildið (t.d. 79 fyrir rautt).
• Deilið með 16. Heiltala niðurstöðunnar gefur fyrsta hex tölustafinn: 79 ÷ 16 = 4 (heiltala), afgangur 15.
• Fyrsti stafurinn er 4.
• Afgangurinn (15) er breyttur í hex staf: 15 = F.
• Annar stafurinn er F.
• Niðurstaða: 79 í tugakerfi = 4F í tvítölu.

Lítum á fullt dæmi með RGB gildunum 79, 70, 229:

Niðurstaðan: #4F46E5

Þessi stærðfræði er einföld og nákvæm. Hvert tugagildi á sér nákvæmlega eitt tveggja stafa hex gildi, og því er breytingin afturkræf. Til dæmis ef við tökum #4F46E5 og breytum aftur:

• Rautt: 4 × 16 + 15 = 64 + 15 = 79 ✓
• Grænt: 4 × 16 + 6 = 64 + 6 = 70 ✓
• Blátt: 14 × 16 + 5 = 224 + 5 = 229 ✓

Notkun hex í CSS og vefhönnun

Hex kóðar eru algengasta leiðin til að skilgreina liti í CSS. Hægt er að nota þá á næstum hvaða litareiginleika sem er:

h1 {
  color: #1E90FF;           /* Blár litur */
  background-color: #FFD700; /* Gullinn bakgrunnur */
}

CSS styður einnig þriggja stafa styttingu þegar hvert stafapar samanstendur af tveimur eins tölustöfum:

• #AABBCC má skrifa sem #ABC
• #FF0000 má skrifa sem #F00

En almennt er mælt með að nota alltaf sex stafa formið, nema þegar þú ert alveg viss um að styttingin sé rétt. Sum forrit (eins og sumar útgáfur af Adobe Photoshop) styðja ekki þriggja stafa hex, og því er betra að halda sig við sex stafa regluna.

Einnig er hægt að nota átta stafa hex (með alfa rás til að stjórna gegnsæi):

• #RRGGBBAA – til dæmis #FF000080 (rauður með 50% gegnsæi)
• Í CSS er þetta styðst frá og með CSS Color Module Level 4

Inntaksform og villumeðhöndlun

Til að nota verkfærið rétt, settu inn þrjár tölur á bilinu 0–255, aðskildar með kommum eða bilum. Hér eru sýnishorn:

Ef þú slærð inn gildi utan 0–255 bilsins eða notar ólöglega formfræði, birtir verkfærið þessa villuskilaboð:

„Sláðu inn RGB sem þrjár tölur 0–255, eins og 79, 70, 229."

Allar breytingar á einhverjum inntaksreit (RGB, hex, HSL o.s.frv.) uppfæra alla aðra reiti samstundis – það er enginn „breyta" hnappur. Þetta gerir verkfærið hratt og þægilegt fyrir fljótlega litaleit eða staðfestingu.

Hver þarf á þessu að halda?

• Vefþróunarfræðingar sem skrifa CSS og þurfa hex litakóða fyrir color eða background-color.
• UI/UX hönnuðir sem fá litaforskriftir sem RGB þrennt (t.d. úr Photoshop eða GIMP) og þurfa að breyta þeim fyrir afhendingarskjöl eða kóða.
• Grafískir hönnuðir sem vinna með vefefni og vilja tryggja litastöðugleika milli RGB byggðra frumgerða og endanlegs hex kóðaðs framkvæmda.
• Nemendur og áhugafólk sem lærir hvernig stafrænt litakerfi virkar og vill skilja sambandið milli tugakerfis og tvítölu.
• Allir sem nota litaval (t.d. í vafraverkfærum) sem skilar RGB gildum og þurfa hex kóðann fyrir útlitsskrá.

Takmarkanir og mikilvæg atriði

Vegna þess að bæði RGB og hex byggja á sama litarými (sRGB), þá á sér engar gamút leiðréttingar stað. Umbreytingin er nákvæm og afturkræf. Hins vegar:

1. Skjár og pappír – sRGB er hannað fyrir skjái. Litur sem lítur vel út á skjá getur verið brenglaður á prenti, sérstaklega ljósblár og neonlitage litir. RGB og hex nota aukefnalit (ljós), prentun notar frádráttarlit (blek – CMYK). Það er ekki bein samsvörun.

2. Hex stytting – Verkfærið notar alltaf sex stafa form. Þriggja stafa stytting er aðeins samþykkt í hex inntakinu og útvíkkuð sjálfkrafa. Til dæmis #abc verður #AABBCC.

3. Engin alfa rás – Sex stafa hex ber enga gegnsæi. Ef þú þarft gegnsæi, þarftu að nota átta stafa hex (t.d. #RRGGBBAA) eða CSS rgba() fall.

4. Öll gögn í vafra – Ekkert er sent upp á netþjón. Þú getur notað verkfærið án nettengingar, svo framarlega sem síðan hefur hlaðist einu sinni.

Algengar spurningar (FAQ)

Hver er munurinn á hex og RGB í CSS? Í raun enginn – þau tákna sama litinn. RGB er með rgb(79, 70, 229) en hex er #4F46E5. Sumir forritarar kjósa hex vegna styttri texta og auðveldari lesturs á litastyrk (hærri tala = ljósari litur), aðrir kjósa rgb() fyrir lesileika eða þegar breytur eiga að meðhöndla gildi.

Get ég notað 255 fyrir hvítt í hex? Já, 255, 255, 255 breytist í #FFFFFF (hvítt). Gildið 0, 0, 0 verður #000000 (svartur).

Hvað ef ég slæ inn aðeins eina tölu? Verkfærið birtir villuskilaboð. Það þarf nákvæmlega þrjár tölur (rautt, grænt, blátt) á bilinu 0–255, aðskildar með kommum eða bilum.

Get ég notað litinn úr hex í Photoshop? Já. Photoshop (og flest grafísk forrit) samþykkja #RRGGBB formið aðeins með því að afrita kóðann og líma hann í litavalssvæðið. Mundu að nota sex stafa form (t.d. #4F46E5), ekki þriggja stafa styttingu.

Er einhver munur á lit eftir því hvort ég nota RGB eða hex? Nei, nákvæmlega sami litur. Umbreytingin er stærðfræðilega nákvæm og afturkræf innan sRGB litarýmisins. Ef þú sérð mun á lit á milli tveggja skjáa, þá er það vegna mismunandi skjástillinga eða litarýma, ekki vegna þess hvort kóðinn er RGB eða hex.

Hvernig get ég fundið CMYK gildi fyrir prentun? Verkfærið sýnir CMYK gildi samhliða öðrum litakerfum. En mundu: CMYK er prentlitarými og sRGB er skjálitarými. Það er aldrei fullkomin samsvörun. Litar á skjá getur verið brenglaður á prenti, sérstaklega ljósir eða mjög mettaðir litir. Fyrir nákvæma prentun skaltu ráðfæra þig við litaprófíl pappírsins og prentvélarinnar.