Pagrindinis šio puslapio tikslas – RGB į hex konvertavimas su momentiniu atvaizdavimu
Ši priemonė skirta vienai konkrečiai užduočiai: jūs įvedate tris skaičius – raudonos, žalios ir mėlynos spalvos kanalų reikšmes nuo 0 iki 255 – ir iškart matote atitinkamą šešioliktainį spalvos kodą, pradedant # simboliu. Pavyzdžiui, įvedus 79, 70, 229 gaunamas #4F46E5. Be paties kodo, įrankis parodo ir spalvos vizualizaciją – kvadratą, užpildytą ta spalva. Be to, akimirksniu atnaujinamos visos kitos palaikomos spalvų formato reikšmės: HSL, HSV, CMYK, LAB ir spalvų parinkiklis. Tai reiškia, kad nereikia spausti jokio mygtuko „Konvertuoti“ – kiekvienas įvesties lauko pakeitimas sinchronizuoja visus likusius.
Skirtingai nuo kitų panašių įrankių, šiame puslapyje nėra jokių aproksimacijų ar spalvų erdvės apribojimų. RGB ir hex – tai dvi tos pačios sRGB erdvės reprezentacijos. Kadangi abi operuoja tame pačiame spalvų diapazone, konvertavimas yra tikslus ir visiškai grįžtamas. Jei gaunate #4F46E5, atgalinis vertimas į RGB visada duos 79, 70, 229. Jokių spalvų, esančių už monitoriaus ribų, čia nėra – tai tas pats, kaip skirtingi to paties skaičiaus užrašymo būdai. Hex išvestis visada yra šešių skaitmenų; pavyzdžiui, #AABBCC nebus automatiškai sutrumpintas iki #ABC, nors pačiame hex įvesties lauke galima naudoti trijų skaitmenų trumpinį (pvz., #abc), kurį įrankis išplės viduje.
RGB spalvų modelis: kodėl 0–255 ir kaip veikia adityvus maišymas
RGB spalvų modelis yra adityvus – spalva kuriama sudedant šviesą iš trijų pagrindinių šaltinių: raudonos (R), žalios (G) ir mėlynos (B). Kiekvienas kanalas aprašomas vienu baitu, kuris gali turėti 256 skirtingas reikšmes (nuo 0 iki 255). 0 reiškia visišką to kanalo nebuvimą, o 255 – didžiausią įmanomą intensyvumą. Ši skalė nėra atsitiktinė – ji kyla iš 8 bitų talpos: 2^8 = 256. Kompiuterių monitoriai, televizoriai ir beveik visi skaitmeniniai ekranai naudoja sRGB erdvę, todėl šis 0–255 diapazonas yra visuotinis standartas.
Adityvus maišymas veikia priešingai nei tapybos ar spausdinimo pasaulyje. Kai sumaišote raudoną ir žalią šviesą, gaunate geltoną. Raudona ir mėlyna duoda purpurinę, o visų trijų kanalų maksimali reikšmė (255, 255, 255) sukuria baltą. Minimumas (0, 0, 0) – juodą. Šiame puslapyje taikoma būtent ši logika: įvedate trijų kanalų reikšmes, o įrankis atspindi, kaip atrodys galutinė spalva, kai šviesa susidės ekrane.
Šešioliktainio kodo struktūra ir konversijos matematika
Hex spalvos kodas visada prasideda # simboliu, po kurio seka šeši šešioliktainiai skaitmenys. Jie sugrupuojami poromis: pirmi du simboliai – raudona (RR), kiti du – žalia (GG), paskutiniai du – mėlyna (BB). Kiekviena pora atitinka vieną 0–255 reikšmę, išreikštą šešioliktainėje sistemoje. Ši sistema naudoja 16 simbolių: 0–9 ir A–F, kur A reiškia 10, B – 11, C – 12, D – 13, E – 14, F – 15.
Konversija iš dešimtainės į šešioliktainę yra paprasta: kiekvieną RGB kanalo reikšmę padalinkite iš 16. Gautas sveikasis skaičius tampa pirmuoju šešioliktainiu skaitmeniu, o liekana – antruoju. Pavyzdžiui, kai raudona reikšmė yra 79: 79 / 16 = 4 su liekana 15. 4 šešioliktainėje sistemoje yra "4", o 15 – "F". Taigi 79 tampa "4F". Žalia reikšmė 70: 70 / 16 = 4 su liekana 6, taigi "46". Mėlyna 229: 229 / 16 = 14 su liekana 5, o "E" atitinka 14, todėl gauname "E5". Sudėjus poras, gaunamas #4F46E5. Ši matematika yra tiesioginė, todėl konversija vyksta akimirksniu. Šešioliktainiai skaitmenys nėra jautrūs didžiosioms ar mažosioms raidėms, tačiau bendra praktika – naudoti didžiąsias (A–F).
Taisyklės, kraštiniai atvejai ir įvesties formatavimas
Įrankis tikisi trijų skaičių, atskirtų kableliais arba tarpais. Pavyzdžiui, galioja ir 79, 70, 229, ir 79 70 229. Jei įvesite reikšmes, esančias už 0–255 ribų, arba netinkamą formatą, bus rodomas klaidos pranešimas: „Įveskite RGB kaip tris skaičius 0–255, pavyzdžiui, 79, 70, 229.“ Tai reiškia, kad nebus automatiškai karpomos reikšmės – jei įvesite 300, sistema nebandys jos pritaikyti, o praneš apie klaidą. Tokia elgsena svarbi, nes RGB ir hex dalijasi ta pačia sRGB erdve; nėra jokios prasmės koreguoti ribas, nes abi sistemos veikia tame pačiame diapazone.
Hex išvestis visada yra šešių simbolių, net jei kiekvieną kanalą sudarytų du vienodi skaitmenys (pvz., #FFFFFF). Įrankis nesutraukia porų į trijų simbolių trumpinį, nors toks trumpinys yra CSS standarte (pvz., #fff). Tačiau hex įvesties lauke galima naudoti trijų skaitmenų variantą – sistema jį išplėss į šešis simbolius viduje. Visi skaičiavimai vyksta jūsų naršyklėje – niekas, ką įvedate, nėra siunčiama į serverį. Tai užtikrina privatumą ir greitą atsaką.
Kodėl ši konversija yra tiksli ir negrįžtama tik sRGB erdvėje
RGB (0–255) ir hex (šeši skaitmenys) yra dvi tos pačios sRGB spalvų erdvės išraiškos. sRGB yra standartinė erdvė, naudojama daugumoje monitorių, skaitmeninių kamerų ir interneto naršyklių. Kadangi abu formatai veikia toje pačioje erdvėje, konvertavimas yra tiesiog skaičių sistemos pakeitimas – jokio spalvų suspaudimo, jokio aproksimavimo. Tai privalumas, palyginti, pavyzdžiui, su konvertavimu tarp RGB ir CMYK. CMYK (spausdinimo) erdvė yra subtraktyvi ir siauresnė nei sRGB, todėl kai kurios ryškios RGB spalvos neturi tikslaus atitikmens CMYK – jos yra „už erdvės ribų“. Šiame puslapyje tokia problema nekyla, nes abu formatai apima identišką spalvų aibę.
Svarbu ir tai, kad hex kodas, naudojamas šiame įrankyje, neturi alfa kanalo (permatomumo). Aštuonių skaitmenų hex (pvz., #4F46E580) galėtų pridėti permatomumo informaciją, tačiau čia pateikiamas tik šešių skaitmenų variantas. Jei reikia alfa reikšmės, ją tektų nurodyti atskirai, pavyzdžiui, CSS naudojant rgba() arba aštuonių skaitmenų hex.
Kam ši priemonė naudingiausia? Praktiniai naudojimo scenarijai
Ši priemonė skirta bet kam, kas dirba su skaitmeninėmis spalvomis ir turi RGB reikšmes, bet reikia hex kodo. Front-end kūrėjai, rašantys CSS, dažnai susiduria su situacija, kai dizaino įrankis pateikia RGB reikšmes, o kodo aplinka laukia # pavidalo hex. Užuot ranka skaičiavę šešioliktainius kodus, jie gali įvesti trijulę ir nukopijuoti gatavą rezultatą.
UI/UX dizaineriai, dirbantys su „Photoshop“ ar „Figma“, gali gauti RGB specifikacijas iš spalvų parinkiklių, bet perduoti jas kūrėjams patogiausia hex formatu. Grafiniai dizaineriai, kurdami interneto išteklius, gali naudoti šią priemonę, kad užtikrintų spalvų nuoseklumą tarp prototipų ir galutinio kodo. Studentai ar entuziastai, mokydamiesi, kaip veikia skaitmeninės spalvos, gali eksperimentuoti su skirtingomis reikšmėmis ir stebėti, kaip keičiasi hex kodas ir spalva. Galiausiai, bet kas, kam reikia konvertuoti RGB reikšmes iš naršyklės kūrėjo įrankių ar kitų programų, čia ras greitą ir tikslų sprendimą.
DUK (Dažniausiai užduodami klausimai)
1. Kokį formatą turi atitikti RGB įvestis?
Reikia trijų skaičių nuo 0 iki 255, atskirtų kableliais arba tarpais. Pavyzdžiui, 79, 70, 229 arba 79 70 229 yra tinkami. Žvaigždės, raidės ar kiti simboliai sukels klaidą.
2. Kodėl gaunu klaidos pranešimą, kai įvedu 300 arba -5?
Šis įrankis neleidžia naudoti reikšmių, esančių už 0–255 intervalo. Kadangi RGB ir hex dalijasi ta pačia sRGB erdve, nėra prasmės automatiškai koreguoti ribų – 300 yra neleistina reikšmė. Klaidos pranešimas: „Įveskite RGB kaip tris skaičius 0–255, pavyzdžiui, 79, 70, 229.“
3. Ar galiu naudoti trijų skaitmenų hex trumpinį, pvz., #abc?
Taip, hex įvesties lauke galima įvesti trijų skaitmenų trumpinį, pavyzdžiui, #abc. Įrankis jį išplės į šešis skaitmenis (#AABBCC) ir atitinkamai atnaujins kitus laukus. Tačiau išvestyje visada bus rodomas šešių skaitmenų hex.
4. Ar šis įrankis gali konvertuoti spalvas su permatomumu (alfa kanalu)?
Ne, šis puslapis naudoja šešių skaitmenų hex formatą be alfa kanalo. Jei reikia aštuonių skaitmenų hex su permatomumu, turėsite jį nurodyti atskirai.
5. Ar mano įvesti duomenys yra siunčiami į serverį?
Ne. Visi skaičiavimai atliekami jūsų naršyklėje. Nieko nėra įrašoma ar siunčiama. Tai užtikrina jūsų privatumą ir greitą veikimą.
6. Kodėl hex kodas visada yra šešių simbolių, o ne, pavyzdžiui, #ABC?
CSS standartas leidžia trijų simbolių trumpinį, tačiau ši priemonė visada pateikia pilną šešių simbolių versiją. Tai daroma siekiant aiškumo ir nuoseklumo, kad kiekvienas kanalas būtų aiškiai identifikuojamas. Jei įvesite trijų simbolių variantą, jis bus išplėstas.