HEX į RGB konverteris

HEX į RGB: kaip šešioliktainis kodas virsta ekrano spalvomis

Šiame puslapyje įvedate šešioliktainį (HEX) spalvos kodą, pavyzdžiui, #4f46e5 arba #abc, ir iškart matote atitinkamas RGB reikšmes – tris skaičius nuo 0 iki 255, kuriuos naudoja ekranai. Rezultatas rodomas šalia kitų spalvų formatų, todėl galite jį nukopijuoti tiesiai į kodą ar dizaino programinę įrangą.

Kuo šis puslapis skiriasi nuo įprastų spalvų keitiklių

Šis puslapis atlieka šešioliktainės (16‑tainės) spalvos konversiją į dešimtainius (10‑tainius) RGB kanalus, kuriuos tiesiogiai naudoja ekranai ir spalvų maišymo matematika. Nors HEX kodai yra kompaktiški ir plačiai naudojami CSS, jie iš esmės yra tie patys trys 8 bitų kanalai, kuriuos RGB pateikia skaitmeniškai.

Kadangi tai tikslinė HEX→RGB konversija, galioja griežtos taisyklės:

• HEX kodai pateikiami šešiais skaitmenimis (#RRGGBB) arba trijų skaitmenų trumpiniu (#RGB), kai kiekvienas trumpinio skaitmuo dubliuojamas, kad gautųsi pilnas šešiaženklis kodas.
• Simbolis # yra neprivalomas – įrankis priima kodus tiek su juo, tiek be jo.
• Tiksliniai RGB kanalai visada yra sveikieji skaičiai nuo 0 iki 255, be alfa kanalo. Aštuonių skaitmenų HEX kodai su alfa kanalu šiame puslapyje neapdorojami; tikimasi tik šešių ar trijų skaitmenų HEX.
• Konversija yra griežtai matematinė: kiekviena šešioliktainė skaitmenų pora dauginama iš 16 laipsnių, todėl rezultatas yra tikslus ir grįžtamasis (jokio apvalinimo ar spalvų diapazono ribojimo).

Tai reiškia, kad jei turite HEX kodą, galite būti visiškai tikri, jog RGB reikšmė, kurią matote, yra vienintelė teisinga – neapvalinta, neapkarpyta ir neinterpretuota.

Trys HEX formatai: šeši skaitmenys, trys skaitmenys ir # simbolis

HEX spalvų kodai gali būti pateikiami keliais būdais, ir šis įrankis juos visus supranta.

Šešių skaitmenų formatas (#RRGGBB)

Tai standartinis formatas. Kiekviena spalvų pora (raudona, žalia, mėlyna) užima du šešioliktainius skaitmenis. Pavyzdžiui, #4f46e5:

• Raudona: 4f (šešioliktainėje sistemoje) = 4 × 16 + 15 = 79
• Žalia: 46 = 4 × 16 + 6 = 70
• Mėlyna: e5 = 14 × 16 + 5 = 229 Gautas RGB trejetas: 79, 70, 229.

Trijų skaitmenų trumpinys (#RGB)

Kai kiekviena spalva užima vieną šešioliktainį skaitmenį, pvz., #abc. Šis formatas naudojamas CSS kaip trumpinys, kai kiekvienas skaitmuo dubliuojamas: #abc tampa #aabbcc. Įrankis tai atlieka automatiškai. Taigi #abc duoda RGB 170, 187, 204 (nes aa=170, bb=187, cc=204).

# simbolis

Simbolis # yra neprivalomas. Galite įvesti #4f46e5 arba tiesiog 4f46e5 – rezultatas bus toks pats. Tai patogu, kai kopijuojate kodus iš įvairių šaltinių, kuriuose formatavimas gali skirtis.

Tiksli konversijos formulė ir pavyzdžiai

Konversijos procesas yra paprastas, bet tikslus. Kiekviena šešioliktainė skaitmenų pora verčiama į dešimtainį skaičių pagal formulę:

Dešimtainė reikšmė = (pirmasis skaitmuo × 16) + antrasis skaitmuo

Kur šešioliktainiai skaitmenys verčiami taip:

• 0–9 atitinka skaičius 0–9
• a–f (arba A–F) atitinka skaičius 10–15

Darbinis pavyzdys su #1E90FF (Dodger Blue)

Paimkime populiarų mėlynos atspalvį #1E90FF:

1. Atskiriame poras: 1E, 90, FF
2. Raudona (1E): 1 × 16 + 14 = 16 + 14 = 30
3. Žalia (90): 9 × 16 + 0 = 144 + 0 = 144
4. Mėlyna (FF): 15 × 16 + 15 = 240 + 15 = 255 Rezultatas: rgb(30, 144, 255).

Kodėl nėra apvalinimo?

Kadangi kiekviena šešioliktainė pora reiškia tiksliai vieną skaičių nuo 0 iki 255, o konversija iš 16‑tainės į 10‑tainę sistemą yra deterministinė, jokio apvalinimo nereikia. Tai reiškia, kad jei RGB reikšmę 79, 70, 229 paversite atgal į HEX, vėl gausite #4f46e5. Šis procesas yra grįžtamasis be informacijos praradimo.

Visų spalvų formatų atnaujinimas

Kai įvedate HEX kodą, įrankis akimirksniu apskaičiuoja ne tik RGB, bet ir kitus spalvų formatus: HSL, HSV, CMYK, LAB. Visi laukai atnaujinami vienu metu. Ir atvirkščiai – jei pakeisite bet kurį kitą lauką (pavyzdžiui, HSL), HEX ir RGB laukai taip pat pasikeis. Tai leidžia dirbti su spalva iš bet kurios perspektyvos.

Klaidų pranešimai ir ribiniai atvejai

Klaidų atveju įrankis pateikia aiškų pranešimą: „Įveskite šešioliktainę spalvą, pavyzdžiui, #4f46e5 arba #abc.“ Šis pranešimas rodomas tada, kai įvedamas formatas neatitinka lūkesčių.

Dažniausios klaidos, kurias žmonės daro

Atkreipkite dėmesį: įvedus #abc, trumpinys automatiškai išplečiamas į #aabbcc, todėl jokios klaidos nebus. Taip pat #ABC (didžiosios raidės) veikia taip pat, kaip #abc.

Praktinis pritaikymas: kam to reikia ir kodėl

Ši konversija nėra tik akademinė – ji kasdien naudojama programuojant, dizaine ir skaitmeniniame mene.

Front-end kūrėjai

CSS galite naudoti color: #ff6600 arba color: rgb(255,102,0). Abu variantai naršyklės interpretuojami vienodai, bet kartais reikia RGB reikšmių – pavyzdžiui, kai dirbate su JavaScript ir canvas API, kur spalvos nurodomos kaip ctx.fillStyle = 'rgb(255,102,0)'. Arba kai reikia dinamiškai keisti spalvos kanalus programiškai, pvz., sumažinti raudonos kanalo reikšmę perpus.

Dizaineriai ir skaitmeniniai menininkai

Dizaino programinė įranga („Adobe Photoshop“, „Figma“, „Sketch“) dažnai naudoja RGB slankiklius arba skaitines reikšmes. Jei pradedate nuo HEX kodo iš prekės ženklo gairių, šis įrankis leidžia greitai gauti reikiamus skaičius be rankinio skaičiavimo.

Spalvų teorija ir prieinamumas (accessibility)

RGB kanalų reikšmės yra būtinos apskaičiuojant spalvų kontrasto santykį pagal WCAG (Web Content Accessibility Guidelines) standartus. Kontrasto apskaičiavimui naudojama formulė, kurioje naudojami RGB kanalų svertiniai dydžiai. Pavyzdžiui, santykinis šviesumas apskaičiuojamas taip:

• Raudona: 0,2126 × (R/255)^2.2
• Žalia: 0,7152 × (G/255)^2.2
• Mėlyna: 0,0722 × (B/255)^2.2

Be tikslių RGB reikšmių šis skaičiavimas neįmanomas.

Kodėl HEX vis dar naudojamas?

HEX kodai yra kompaktiškesni už RGB rašymą – #ff6600 vietoj rgb(255,102,0). Jie atsirado iš ankstyvųjų kompiuterių, kai 8 bitų spalvų kanalai buvo natūraliai aprašomi dviem šešioliktainiais skaitmenimis. Nors CSS šiandien palaiko ir kitus formatus, HEX išlieka populiarus dėl tradicijos ir trumpumo.

Dažniausiai užduodami klausimai (DUK)

Kuo skiriasi #RRGGBB nuo #RGB? #RRGGBB naudoja du skaitmenis kiekvienam kanalui (0–255), o #RGB – vieną skaitmenį, kuris dubliuojamas (pvz., #f00 tampa #ff0000). #RGB formatas yra CSS trumpinys, taupantis vietą, kai spalvos kanalai susideda iš pasikartojančių reikšmių.

Kodėl negalima įvesti #RRGGBBAA (su alfa kanalu)? Šis puslapis specializuotas HEX→RGB konversijai, o alfa kanalas (skaidrumas) nėra RGB dalis. Alfa kanalas yra atskiras matmuo, kurį apdoroja kiti įrankiai. Jei turite aštuonių skaitmenų HEX, pirmiausia atskirkite pirmuosius šešis skaitmenis spalvai, o paskutinius du – alfa kanalui (0–255, kur 0 = visiškai skaidrus, 255 = visiškai nepermatomas).

Ar galiu naudoti didžiąsias raides (pvz., #ABCDEF)? Taip, didžiosios ir mažosios raidės yra priimtinos. #1E90FF veikia lygiai taip pat, kaip #1e90ff. Rezultatas visada bus RGB skaičiai.

Kodėl RGB reikšmės yra nuo 0 iki 255, o ne nuo 0 iki 1? RGB kanalai 8 bitų spalvų gylio sistemose saugomi kaip vienas baitas (8 bitai), kuris gali reikšti 256 skirtingas reikšmes (0–255). Tai istorinis standartas, kilęs iš kompiuterinės grafikos standartų. Dalis programinės įrangos naudoja dešimtainį formatą (0.0–1.0), bet tai tik skalės pakeitimas: reikšmę 0–255 padalijus iš 255 gaunama reikšmė 0.0–1.0.

Ar šis įrankis išsaugo mano įvestus duomenis? Ne. Visi spalvų skaičiavimai atliekami tiesiogiai jūsų naršylyje. Nieko, ką įvedate, nėra įkeliama į serverį ar saugoma. Tai reiškia, kad galite saugiai naudoti įrankį net su konfidencialiais prekės ženklų kodais.

Ką daryti, jei gaunu klaidą „Įveskite šešioliktainę spalvą, pavyzdžiui, #4f46e5 arba #abc“? Patikrinkite, ar įvestas kodas atitinka vieną iš formatų: šeši skaitmenys (0–9, a–f, A–F) su arba be #; arba trys skaitmenys su arba be #. Atminkite, kad spalvų pavadinimai („raudona“, „mėlyna“) nepriimami. Taip pat patikrinkite, ar nėra papildomų tarpų ar simbolių, pvz., kabučių.