RGB to HSL konverter

Miks teisendada RGB HSL-i?

RGB (punane, roheline, sinine) on ekraanide loomulik keel. Iga piksel süttib vastavalt kolme kanali intensiivsusele vahemikus 0 kuni 255. See on aditiivne mudel: kui liidad maksimaalselt punast, rohelist ja sinist (255, 255, 255), saad valge. Kui kanalid on nullis, saad musta. See töötab masina jaoks suurepäraselt, kuid inimese jaoks on see logiline värviloogika kohmakas. Kui soovid muuta RGB-s värvi heledamaks – tõstad punast? Langetad sinist? Ootamatult võib toon nihkuda hoopis teise suunda.

Sellepärast see leht ongi loodud. See võtab sinu RGB väärtused (näiteks 79, 70, 229) ja teisendab need hetkega HSL-i – mudelisse, mis on ehitatud inimese värvitaju järgi. HSL (Hue, Saturation, Lightness) annab sulle võimaluse muuta heledust (Lightness) ilma, et toon (Hue) muutuks. See on põhjus, miks disainerid ja teemade ehitajad eelistavad HSL-i RGB-le või HEX-ile: see võimaldab luua värvipalette, tumedaid režiime ja ligipääsetavaid kontraste täpse matemaatilise kontrolli all.

Kuidas RGB ekraanil töötab

RGB tugineb sRGB värviruumile, mis on digitaalmaailma standard. Iga kanali väärtus 0–255 esindab valguse intensiivsust. Kui sisestad 255, 0, 0, on tulemuseks puhas punane. Kui sisestad 128, 128, 128, on tulemuseks keskmine hall – kõik kolm kanalit on võrdsel määral põlema pandud.

See tööriist eeldab, et sisestad täpselt kolm täisarvu, mis on eraldatud komade või tühikutega. Kui sisestad näiteks 256, 0, 0 või 79 70, kuvatakse teade: “Enter RGB as three numbers 0–255, like 79, 70, 229.” Sinu sisendit ei salvestata kuskil; kogu teisendus toimub sinu brauseris. See tähendab, et tundlikke projekti värve saad teisendada täiesti privaatselt.

HSL: intuitiivne värvimudel arendajale

HSL erineb RGB-st põhimõtteliselt. Selle asemel, et mõelda kolme valguse seguna, mõtled sa värvi omadustes:

• Hue (toon): Värv ise kraadides 0–360. 0° on punane, 120° on roheline, 240° on sinine. See on värviratta asukoht.
• Saturation (küllastus): Värvi puhtus protsentides. 100% on täiesti puhas toon. 0% on hall – toon kaob täielikult.
• Lightness (heledus): Värvi tajutav heledus protsentides. 0% on alati must, 100% on alati valge. Puhas punane (255, 0, 0) on HSL-is heledusega 50%.

See erinevus on praktikas ülioluline. RGB-s muutub iga kanali väärtuse muutmisega sageli ka värv ise. HSL-is saad muuta ainult heledust (L), jättes tooni (H) ja küllastuse (S) absoluutselt samaks. See on põhjus, miks HSL on vaikimisi valik palettide genereerimisel ja CSS-i hsl() funktsioon on palju loetavam kui #4F46E5 või rgb(79, 70, 229).

Kuidas teisendus matemaatiliselt töötab

Tööriist teeb selle automaatselt, kuid loogika teadmine aitab mõista, miks tulemused on täpselt sellised, nagu nad on.

1. Normaliseeri RGB skaalale 0–1. Jaga iga kanali väärtus 255-ga. Meie näites 79, 70, 229:

   • R ≈ 0.310
   • G ≈ 0.275
   • B ≈ 0.898

2. Leia miinimum ja maksimum. Siin max = 0.898 (sinine), min = 0.275 (roheline).

3. Arvuta heledus (L). L = (max + min) / 2 L = (0.898 + 0.275) / 2 = 0.5865 ≈ 59%

4. Arvuta küllastus (S). See sõltub heledusest. Kui L > 0.5: S = (max - min) / (2.0 - max - min) S = (0.898 - 0.275) / (2.0 - 0.898 - 0.275) = 0.623 / 0.827 ≈ 0.753 ≈ 75%

5. Arvuta toon (H). See sõltub sellest, milline kanal on maksimaalne. Kuna sinine (B) on max: H = 4.0 + (R - G) / (max - min) H = 4.0 + (0.310 - 0.275) / 0.623 = 4.0 + 0.056 = 4.056 Korruta 60-ga, et saada kraadid: 4.056 × 60 = 243.4 ≈ 243°

Tulemuseks on hsl(243°, 75%, 59%). See on sinine, mis kaldu kergelt rohelise (tsüaani) suunas. Tööriist väljastab samaaegselt ka HEX, HSV, CMYK ja LAB väärtused. Kui muudad mõnda neist, uuendatakse kõiki teisi välju reaalajas.

Kuidas seda praktikas kasutada

• Disainisüsteemid ja teemad: Kui sul on brändivärv, saad HSL-i abil luua sellest kohe terve pere. Heledust tõstes (näiteks 59% → 75%) saad taustavärvi. Heledust langetades (59% → 35%) saad tumeda teksti või piirjoone. Küllastust vähendades (75% → 20%) saad neutraalse variandi. Kõik need sälitavad algse tooni.
• Ligipääsetavus (WCAG): Heleduskanal (Lightness) on otseselt seotud kontrastiga. Saad süstemaatiliselt testida ja reguleerida oma värvide heledust, et saavutada AA või AAA kontrastisuhte nõuded ilma tooni muutmata.
• Andmete visualiseerimine: Järjestikuste värviskaalade jaoks on HSL-i Lightness intuitiivne viis luua gradiente, mis loogiliselt heledast tumedaks liiguvad.
• CSS-i dünaamiline manipuleerimine: Kui kasutad JavaScripti, saad stiile muuta otse HSL-i komponente muutes: hsl(${hue}, ${saturation}, ${lightness + 10}%). HEX-iga sama tegemine nõuaks keerulist stringi parsitud või teegi kasutamist.

Piirangud, mida pead teadma

HSL ei ole täiuslik. Ta on ehitatud mugavuse, mitte teadusliku täpsuse jaoks.

• Mitteperceptuaalselt ühtlane: Sama heleduse väärtus (L) tundub erinevate toonide puhul erineva heledusena. Erekollane tundub palju heledam kui sinine, isegi kui nende L väärtus on sama (näiteks 50%). Kui vajad rangelt perceptuaalselt ühtlast skaalat, kasuta LAB-i – seda tööriist samuti väljastab.
• Gamut ja CMYK: Kui sisestad LAB-i või CMYK-i väärtuse, mis jääb sRGB värvigamutist välja, kohandab tööriist selle lähimaks kuvatavaks värviks. Selle värvi tagasi teisendamine võib anda algsetest väärtustest veidi erineva tulemuse. Tähelepanu: CMYK väljund on ainult ekraanipõhine hinnang ja seda ei tohi kasutada professionaalseks trükiks ilma eelneva kontrollimiseta.
• Sisestusvorming: Kui soovid teisendada otse HSL-ist, pead sisestama täpse vormingu. HSL-i sisestamine vabalt kujul ei tööta. Õige vorming on: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” Vale vormingu korral tööriist seda ei tuvasta.

KKK

• Kas ma saan teisendada ka HSL-ist tagasi RGB-sse? Jah. Tööriist töötab mõlemas suunas. Sisesta HSL täpses vormingus (näiteks 243, 75%, 59%) ja kõik ülejäänud väljad uuendatakse automaatselt.
• Miks CMYK väärtus on "ainult hinnang"? CMYK on subraktiivne mudel (tint paberil). sRGB ekraan suudab kuvada värve, mida CMYK tint ei suuda jäljendada ja vastupidi. Seetõttu on teisendus alati ligikaudne ja mõeldud ainult visuaalseks ettekujutuseks, mitte trükkimiseks.
• Mis juhtub, kui sisestan LAB-i väärtuse, mida ekraan ei suuda näidata? Tööriist kohandab värvi lähimaks kuvatavaks värvi sRGB ruumis. See võib põhjustada väikseid nihkeid, eriti kui teisendad värvi edasi-tagasi.
• Kus mu värvid salvestatakse? Mitte kuskil. Kogu teisendus töötab sinu brauseri sees (kliendipoolne töötlus). Ühtegi sisestatud väärtust ei saadeta serverisse.
• Mille poolest erineb HSL HSV-st (või HSB-st)? Mõlemad kasutavad tooni (Hue). Erinevus on kolmanda kanali tähenduses. HSL-i Lightness liigub mustast (0%) valgeni (100%) – puhas värv on alati 50% juures. HSV väärtus (Value/Brightness) liigub mustast (0%) puhta värvini (100%) – puhas värv on 100% juures. See tööriist väljastab mõlemat, et oleksid paindlik.