RGB un hex krāsu konvertēšana: precīzs, matemātisks pārveidojums
Šajā rīkā ievadīti trīs skaitļi — sarkanais, zaļais un zilais, katrs no 0 līdz 255 — acumirklī dod sešciparu heksadecimālo kodu (piemēram, #1E90FF). Atšķirībā no daudzām tiešsaistes konvertētājprogrammām, šeit nav atsevišķas “Konvertēt” pogas. Katrs lauks (RGB, hex, HSL, HSV, CMYK, LAB un krāsu atlasītājs) tiek atjaunināts vienlaikus, tiklīdz lietotājs izmaina kādu no tiem. Tikpat svarīgi: RGB un hex pieder vienai un tai pašai krāsu telpai – sRGB, kas ir mūsdienu displeju pamatstandarts. Tāpēc šī konvertācija nav tikai aptuvena; tā ir atsaucama, zaudējumu nav un krāsu gamma netiek apcirpta. Vienīgais ierobežojums: hex izvade vienmēr ir sešciparu, bez astoņciparu formas (ar alfa kanālu) un bez automātiskas saīsināšanas uz trīsciparu stenogrammu.
Kā darbojas RGB un heksadecimālais apzīmējums
RGB ir aditīvs krāsu modelis: sarkanā, zaļā un zilā gaisma sajaucas, radot krāsu. Katrs kanāls atbilst gaismas intensitātei, kas digitālajā pasaulē parasti tiek izteikta kā vesels skaitlis no 0 (izslēgts) līdz 255 (pilnībā ieslēgts). Šis diapazons nav nejaušs — 256 vērtības (0 līdz 255) precīzi iederas vienā baitā (8 biti), un, apvienojot trīs kanālus, iegūstam 24 bitu krāsu dziļumu jeb vairāk nekā 16,7 miljonus krāsu.
Heksadecimālais (hex) krāsu kods, piemēram, #4F46E5, sastāv no # zīmes un sešām heksadecimālajām zīmēm: pirmās divas atbilst sarkanajam kanālam, nākamās divas – zaļajam, pēdējās divas – zilajam. Katrs pāris ir viena kanāla vērtība (0–255), kas izteikta heksadecimālajā skaitīšanas sistēmā (bāze 16). Piemēram, sarkanais 79 decimālajā sistēmā = 4F heksadecimālajā (jo 4 × 16 + 15 = 79). Līdzīgi zaļais 70 = 46 (4 × 16 + 6 = 70), bet zilais 229 = E5 (14 × 16 + 5 = 229). Rezultāts ir #4F46E5.
Šis rīks automātiski paplašina trīsciparu hex stenogrammu (piemēram, #abc), ko lietotājs var ievadīt hex laukā, izvēršot to līdz #AABBCC. Tomēr izvadē vienmēr būs sešciparu forma – tā ir apzināta izvēle, lai izvairītos no neskaidrībām un saglabātu vienveidību CSS un citās vidēs.
Konversijas matemātika: kā no 79 iegūst 4F
Pārejot no decimālā uz heksadecimālo, tiek dalīts ar 16. Aplūkosim sarkano kanālu ar vērtību 79:
- 79 ÷ 16 = 4, atlikums 15. Šī ir pirmā zīme (4).
- Atlikums 15 tiek attēlots kā
Fheksadecimālajā sistēmā. - Rezultāts:
4F.
Tas pats ar vērtību 255 (maksimālā intensitāte):
- 255 ÷ 16 = 15, atlikums 15 →
FunF, tātadFF.
Ja vērtība ir mazāka par 16, piemēram, 5:
- 5 ÷ 16 = 0, atlikums 5 →
05(jo heksadecimālajam pārim vienmēr ir divas zīmes – rīks automātiski pievieno nulli priekšā).
Tādējādi jebkura decimālā vērtība no 0 līdz 255 tiek kartēta uz divzīmju heksadecimālu pāri. Šī ir tieša un atgriezeniska konversija: lasot #1E90FF, jūs varat atgūt RGB vērtības (30, 144, 255).
Kāpēc sRGB telpa nodrošina bezzudumu konversiju
RGB un hex ir tikai divi dažādi vienas un tās pašas krāsu telpas apzīmējumi – sRGB. Šī telpa ir definēta kā standarta RGB krāsu gamma, ko izmanto lielākā daļa mūsdienu monitoru, tīmekļa pārlūkprogrammas un digitālo attēlu formāti (JPEG, PNG utt.). Tāpēc, pārvēršot RGB skaitļus hex kodā, netiek zaudēta nekāda krāsu informācija – nav jāveic interpolācija, apcirpšana vai aproksimācija. Tas pats attiecas uz pretējo virzienu: no hex atpakaļ uz RGB.
Šī bezzudumu īpašība atšķir RGB↔hex konversiju no, piemēram, RGB↔CMYK pārveidojumiem. CMYK ir subtraktīva telpa, kas paredzēta drukāšanai uz papīra, un tā vienmēr ietver krāsu gammas apcirpšanu, jo dažas ekrānā redzamas krāsas nav sasniedzamas ar tinti. Līdzīgi arī pāreja no RGB uz HSL vai LAB var radīt nelielas noapaļošanas kļūdas, bet RGB↔hex ir tieša aritmētiska konversija, nevis modelu transformācija.
Lietotāja kļūdas un ievades formāta prasības
Rīks pieņem RGB ievadi tikai kā trīs skaitļus, kas atdalīti ar komatiem vai atstarpēm (vai abu kombināciju). Piemēram:
79, 70, 22979 70 22979,70,229
Ja ievadītā vērtība nav derīga – piemēram, satur burtus, mazāk par trim skaitļiem vai kāds skaitlis ir ārpus 0–255 diapazona –, rīks parāda kļūdas paziņojumu:
“Enter RGB as three numbers 0–255, like 79, 70, 229.”
(Šis paziņojums tiek rādīts angļu valodā, jo rīks ir starptautisks.)
Īpaši jāuzmanās no negatīvām vērtībām vai skaitļiem, kas pārsniedz 255 – tie vienmēr izraisīs kļūdu. Šādu ievadi varētu radīt, piemēram, Photoshop krāsu atlasītāja eksports, kurā dažkārt ir iekļautas vērtības, kas pārsniedz 100% (procentos). Lai gan rīks nepārveido procentus, to ir viegli koriģēt: 50% sarkanais atbilst 128 (0–255 skalā); 100% – 255.
Kam šis rīks ir noderīgs ikdienas darbā
Galvenā auditorija ir tīmekļa izstrādātāji, kas strādā ar CSS. CSS īpašības color, background-color, border-color un daudzas citas pieņem hex vērtības, un bieži dizaina dokumentācijā krāsas ir dotas kā RGB skaitļi. Piemēram, projekta krāsu paletē var būt RGB (79, 70, 229), taču stilu lapā nepieciešams #4F46E5. Tā vietā, lai manuāli aprēķinātu heksadecimālos pārus, šis rīks to izdara uzreiz.
Tāpat to izmanto:
- Grafiskie dizaineri, kas saņem RGB vērtības no attēlu redaktoriem (Photoshop, GIMP, Figma) un vēlas tās ievietot tīmekļa prototipos.
- Pētnieki un studenti, kas apgūst digitālo krāsu teoriju un vēlas saprast saistību starp decimālo un heksadecimālo apzīmējumu.
- Ikviens, kas strādā ar pārlūkprogrammas izstrādātāju rīkiem un redz RGB vērtības, bet dod priekšroku hex kodam īsākam un vieglāk kopējamam.
Hex kodi CSS un to izmantošanas nianses
CSS atbalsta gan sešciparu hex (#RRGGBB), gan trīsciparu stenogrammu (#RGB). Trīsciparu forma tiek automātiski paplašināta, dublējot katru zīmi: #F0A = #FF00AA. Šis rīks neveic automātisku saīsināšanu, bet pieņem abus formātus ievadē. Ja izvade ir #AABBCC, to var droši izmantot CSS. Ja vēlaties izmantot trīsciparu formu faila lieluma samazināšanai, dariet to manuāli, pārliecinoties, ka katrs pāris sastāv no vienas un tās pašas zīmes (piemēram, #112233 → #123).
Astoņciparu hex (#RRGGBBAA) šeit netiek atbalstīts, jo šis rīks ir veltīts RGB bez caurspīdīguma. Ja nepieciešams alfa kanāls, būtu jāizmanto atsevišķs rīks vai jāpievieno tas manuāli.
Biežāk uzdotie jautājumi (FAQ)
Kāpēc hex izvade vienmēr ir sešciparu, nevis trīsciparu?
Rīks automātiski neapvieno identiskus pārus trīsciparu stenogrammā, lai saglabātu skaidrību un novērstu interpretācijas kļūdas. Trīsciparu forma ir atļauta tikai ievades laukā, kur tā tiek paplašināta.
Ko darīt, ja RGB vērtības ir decimālskaitļi, piemēram, 79,5?
Rīks pieņem tikai veselus skaitļus. Decimāldaļas jānoapaļo līdz tuvākajam veselajam skaitlim (parasti uz leju, bet atkarīgs no avota). Iestatījums, kā rīkoties, nav iebūvēts – tā ir lietotāja atbildība.
Vai šī konvertācija ir pārnesama uz drukāšanu?
Nē. Hex kodi un RGB apzīmē sRGB telpu, kas paredzēta ekrāniem. Drukāšanai ir nepieciešama pāreja uz CMYK vai citu drukāšanas profilu, kas rada krāsu nobīdes. Šis rīks neveic CMYK konvertāciju.
Kāpēc dažas pārlūkprogrammas pieņem #RRGGBB bez #?
CSS specifikācija prasa # zīmi, bet dažas pārlūkprogrammas kļūdu tolerance ļauj izlaist to. Tomēr drošāk vienmēr izmantot #. Rīks izvadā vienmēr iekļauj #.
Vai es varu ievadīt RGB kā procentus (piemēram, 30%, 50%, 100%)?
Nē. Rīks gaidīs skaitļus 0–255. Lai pārvērstu procentus: reiziniet procentu vērtību ar 255 un daliet ar 100 (piemēram, 30% → 30 ÷ 100 × 255 = 76.5 → noapaļot līdz 77).
Kāpēc dažreiz redzu krāsu, kas izskatās atšķirīgi no oriģinālā RGB?
Ja ievadāt vērtības, kas nav sRGB telpā (piemēram, no platākas gammas attēliem), displejs var rādīt atšķirīgu toni. Šis rīks neveic gammas pārveidojumus – tas strādā tikai ar 0–255 sarkanā/zaļā/zilā vērtībām, kā tās ir.