RGB to HEX konverter

Mis see leht teeb ja mis teeb selle eriliseks

Sisestad kolm numbrit – punase, rohelise ja sinise väärtuse – igaüks vahemikus 0 kuni 255, ja leht annab sulle silmapilkselt samaväärse kuueteistkümnendsüsteemi (hex) koodi, näiteks sisendile 79, 70, 229 väljundiks #4F46E5. Koos hex-koodiga kuvatakse ka värvitoon visuaalselt ja uuendatakse kõiki teisi toetatud värviformaate (HSL, HSV, CMYK, LAB ja värvivalija). Saad hex väärtuse otse kopeerida ja kasutada CSS-is, disainitarkvaras või mistahes muus keskkonnas, mis ootab heksa kujul värvi.

See leht erineb paljudest teistest RGB–hex teisenditest järgmistel põhjustel:

• Täpne ja kadudeta teisendus – RGB (kümnend, kolm kanalit 0–255) ja hex (kuueteistkümnend, kuuekohaline) esindavad täpselt sama värviruumi (sRGB). Ühtegi värvitooni ei kärbita ega ligikaudata. Teisendus on täielikult pöörduv: kui teisendad hexist tagasi RGB-sse, saad sama arvu.
• Alati # + kuus kohta – Väljund on alati # märgiga algav kuuekohaline kood (nt #4F46E5). Leht ei lühenda automaatselt kolmekohaliseks (nt #ABC), kuigi sisendväli aktsepteerib kolmekohalist lühendit ja laiendab selle sisemiselt kuuekohaliseks.
• Puudub läbipaistvuskanal – Standardne kuuekohaline hex ei sisalda alfakanalit. Kui vajad läbipaistvust, pead kasutama kaheksakohalist heksa (nt #4F46E580), mida see leht otseselt ei genereeri, kuid võid selle ise järelikult lisada.
• Kõik uuendused on hetkelised – Pole “teisenda” nuppu. Iga formaadi välja redigeerimine uuendab kõiki teisi välju reaalajas.
• Töötlus toimub sinu brauseris – Mitte midagi, mida sisestad, ei laeta üles ega saadeta serverisse.

Kuidas RGB ja hex on omavahel seotud

RGB põhineb aditiivsel värvisünteesil: punase, rohelise ja sinise valguse liitmine erineva intensiivsusega annab lõpptulemuse. Iga kanali väärtus on täisarv vahemikus 0–255, sest see mahub täpselt ühte baiti (8 bitti) ning 2^8 = 256 võimalikku väärtust. 0 tähendab selle kanali minimaalset intensiivsust (tume), 255 maksimaalset (erksaim).

Kuueteistkümnendsüsteem (hex) kasutab alust 16. Iga kanali 0–255 väärtus teisendatakse kaheks kuueteistkümnendkohaks: esimene number tähistab 16-ndike (quotient), teine number jääki (remainder). Näiteks:

• 255 ÷ 16 = 15 (jääk 15) → 15 on hex-s F, seega 255 = FF.
• 0 ÷ 16 = 0 (jääk 0) → 00.
• 70 ÷ 16 = 4 (jääk 6) → 46.
• 229 ÷ 16 = 14 (jääk 5) → E5.

Nii tekibki kolmest numbrist kuuekohaline kood: #4F46E5. See on alati kuus kohta, sest iga kanali kahekohaline esitus on kohustuslik.

Kuna RGB (0–255) ja hex kasutavad sama sRGB värviruumi, on teisendus matemaatiliselt täpne ja vastastikune. Kui teisendad kaheksakohalise heksa (koos alfaga) tagasi RGB-sse, kaob alfakanal, kuid kolm põhikanalit jäävad samaks.

Lehe kasutamine ja sisestusreeglid

Sisesta kolm numbrit eraldajaga – kas komadega (nt 79, 70, 229), tühikutega (79 70 229) või komade ja tühikute seguga. Leht parsib need automaatselt. Kui sisestad midagi valesti või väärtused on väljaspool 0–255 piiri, kuvatakse veateade:

“Enters RGB as three numbers 0–255, like 79, 70, 229.”

(Veateade on ingliskeelne, sest see on fikseeritud faktilehel, kuid eestikeelses artiklis tsiteerime originaali.)

Oluline on märkida, et:

• Sisend on kolm numbrit – mitte neli, mitte üksik number. Kui sisestad näiteks 256, 0, 0, saad veateate, kuna 256 on lubatud maksimumist suurem.
• Heksa sisendväli aktsepteerib kolmekohalist lühendit – #abc laiendatakse #AABBCC-ks. See on kasulik CSS-i kiireks kirjutamiseks, kuid leht ei lühenda ise väljundit vastupidi.
• Kõik muud väljad uuenevad automaatselt – kui muudad RGB-d, uuenevad hex, HSL, HSV, CMYK, LAB ja värvivalija. Kui muudad hex-i, uuenevad RGB ja ülejäänud.

Sisestusnäited

Kes seda lehte vajab ja miks

• Veebiarendajad – CSS-is kasutatakse heksa värvi määramiseks pea kõikjal: color: #4F46E5;, background-color: #4F46E5;. Kui saad disainerilt RGB väärtused, on see leht kiireim viis need CSS-i sobivaks teisendada.
• UI/UX disainerid – Sageli töötavad nad pilditöötlustarkvaras (Photoshop, GIMP, Figma), kus värve esitatakse RGB-numbritena. Veebipõhise prototüübi või koodi jaoks on vaja heksa. See leht võimaldab ühe silmapilguga võrrelda ja kontrollida.
• Graafilised disainerid – Värvide konsistentsi tagamiseks erinevate väljundite (ekraan vs. print) vahel on oluline, et RGB ja hex oleksid samas sRGB ruumis. Kuigi printimiseks läheb vaja CMYK-i, on selle lehe HSL/CMYK uuendused abiks.
• Õpilased ja harrastajad – Digitaalse värvi põhimõtete õppimine. See leht aitab mõista, kuidas kümnendarv ja kuueteistkümnendarv on seotud – saad katsetada erinevaid väärtusi ja näha kohe tulemust.
• Kõik, kes kasutavad värvivalijat – Brauseri arendaja tööriistad, Photoshop jne annavad RGB väärtusi. Heksa kood on sageli mugavam jagada või koodi panna.

Erillised juhud ja piirangud

Gammakärpimine ja sRGB

Kuna RGB ja hex teisendus toimub samas sRGB ruumis, ei esine gammakärpimist ega toonide kaotust. Mõned veebitööriistad teisendavad RGB-d heksa ja seejärel tagasi erinevasse ruumi (nt Adobe RGB), tekitades erinevusi. Siin aga jääb värv identseks.

Alfakanal

Lehe hex-väljund on alati kuuekohaline. Alfakanalit (läbipaistvus) ei lisata. Kui vajad kaheksakohalist heksa, saad lisada kaks tähemärki käsitsi (nt #4F46E5 → #4F46E580 50% läbipaistvuse jaoks). Pane tähele, et CSS-is kasutatakse kaheksakohalist heksa alates CSS Color Level 4-st, kuid brauseri tugi on lai.

Kolmekohaline lühend

Lehe hex sisendväli aktsepteerib kolmekohalist kuju, kuid väljund on alati kuuekohaline. See on CSS-i reeglitega kooskõlas: kolmekohaline #abc võrdub #aabbcc. Kui sisestad #ABC, teisendab leht selle #AABBCC-ks ja uuendab RGB väärtused vastavalt (nt #ABC → RGB: 170, 187, 204).

Veateated ja valideerimine

Kui sisestatud väärtused ei vasta formaadile (nt 79, 70 või 79, 70, 300), kuvatakse veateade ja ühtegi värvi ei uuendata. See takistab valede andmete kasutamist ja hoiab ära segaduse.

KKK

1. Kas ma saan sisestada ka ainult kahe või nelja numbriga RGB?

Ei. Leht ootab täpselt kolme numbrit vahemikus 0–255, mis on eraldatud komade või tühikutega. Kahe või nelja numbri korral kuvatakse veateade.

2. Kas teisendus on pöörduv? Ehk kui ma teisendan hexist tagasi RGB-sse, kas saan täpselt sama värvi?

Jah. Kuna mõlemad formaadid kasutavad sama sRGB värviruumi ja iga RGB väärtus teisendatakse üheselt kaheks hex-kohaks, on teisendus täielikult pöörduv. Näiteks #4F46E5 teisendatakse alati tagasi RGB-ks 79, 70, 229.

3. Kas leht toetab ka alfakanaliga heksat (kaheksakohaline)?

Leht ei genereeri kaheksakohalist heksat, kuid sisendväljas saad seda kasutada. Kui sisestad näiteks #4F46E580, tõlgendab leht seda kuuekohalisena (alfakanal eiratakse) ja kuvab RGB väärtuse 79, 70, 229. Alfakanalit ei salvestata ega edastata.

4. Mida teha, kui mul on vaja teisendada printimiseks CMYK-i?

See leht kuvab ka CMYK väärtuse (mis on tuletatud sRGB-st teisendusalgoritmiga). Kuid pidage meeles, et tegelik printimine võib erineda sõltuvalt värviprofiilist ja paberist. CMYK siin on ligikaudne ja mõeldud kiireks võrdluseks.

5. Kas andmeid saadetakse serverisse?

Ei. Kogu töötlus toimub sinu brauseris JavaScripti abil. Mitte ühtegi sisestatud värvi, numbrit ega IP-aadressi ei edastata kuhugi. See tähendab, et saad turvaliselt kasutada ka tundlike disainiprojektide puhul.

6. Kas ma saan kasutada lühendatud heksa sisendis?

Jah. Kui sisestad #abc, laiendab leht selle #AABBCC-ks ja uuendab kõiki välju vastavalt. See on mugav kiireks sisestamiseks, kuid väljundis kuvatakse ikkagi kuuekohaline kood.