Apa Iki Kaca rgb-to-hsl?
Kaca iki ngowahi warna RGB—telung angka saka 0 nganti 255 sing nuduhake carane layar nyampur cahya abang, ijo, lan biru—dadi warna HSL (hue ing derajat, saturation lan lightness ing persen). Sampeyan ngetik warna RGB, lan langsung weruh padha karo HSL, HEX, HSV, CMYK (taksiran layar), lan LAB. Kabeh nilai bisa disalin kanggo proyek sampeyan.
Bedane karo kaca konversi liyane: kaca iki ngowahi saka model RGB sing asli kanggo layar dadi model HSL sing digawe kanggo nalar manungsa babagan warna. Ing RGB, ngganti siji saluran asring ngrusak hue sing dirasakake. Nanging ing HSL, sampeyan bisa ngatur lightness kanthi mandiri tanpa ngganti hue. Iki nggawe HSL dadi model sing disenengi kanggo nggawe palet warna, tema, lan variasi kontras sing bisa diakses.
Input RGB kudu telung angka 0–255 sing dipisahake koma utawa spasi. Yen salah, tool nuduhake: “Enter RGB as three numbers 0–255, like 79, 70, 229.” Sampeyan uga bisa ngetik HSL langsung—hue 0–360, saturation lan lightness minangka persen—kanggo ngowahi bali dadi RGB. Yen salah, tool nuduhake: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” Kabeh konversi kedadeyan ing browser; ora ana data sing dikirim menyang server.
Cara RGB Makarya ing Layar
RGB minangka model aditif. Layar ngasilake warna kanthi nyorot lampu abang, ijo, lan biru ing intensitas beda. Saben saluran disimpen minangka integer 8-bit, 0–255. Nalika kabeh telung saluran 255, asile yaiku putih; nalika 0, ireng. Ruang kerja standar yaiku sRGB.
Contone, RGB (79, 70, 229) yaiku warna biru-ungu sing padhang. Angka 79 nuduhake abang, 70 ijo, 229 biru. Campuran iki ora langsung dimangerteni dening manungsa: apa warnane? sepira padhang? Nanging ing model HSL, hue diwenehi minangka sudut ing bunder: 243°, sing jelas nuduhake warna biru-ungu.
Cara HSL Model Persepsi Manungsa
HSL nggambarake warna kanthi telung komponen:
- Hue (0–360°) – posisi ing bunder warna. 0° abang, 120° ijo, 240° biru.
- Saturation (0%–100%) – kemurnian warna. 0% abu-abu, 100% warna murni.
- Lightness (0%–100%) – padhang sing dirasakake. 0% ireng, 100% putih, 50% warna normal (ora ditambah ireng utawa putih).
Kanggo warna ing ndhuwur, HSL yaiku (243°, 75%, 59%). Iki artine hue biru-ungu, saturation cukup dhuwur (75%), lightness rada padhang (59%). Sampeyan bisa ngira-ngira warna mung saka angka.
Ing RGB, lightness ora langsung katon. Contone, RGB (255, 0, 0) abang nduweni lightness 50%, nanging RGB (0, 0, 255) biru uga nduweni lightness 50% miturut HSL. Nanging sacara visual, biru katon luwih peteng amarga sensitivitas mata manungsa beda. Iki minangka watesan HSL, sing bakal dirembug mengko.
Carane Konversi RGB dadi HSL
Konversi kasebut nggunakake matematika prasaja. Kabeh kedadeyan ing browser, nanging ngerti rumus penting kanggo ngerti watesane.
Langkah 1: Normalake angka RGB menyang 0–1. R = r/255, G = g/255, B = b/255.
Langkah 2: Temokake nilai maksimal (Mmax) lan minimal (Mmin) saka R, G, B. Hitung chroma: C = Mmax - Mmin.
Langkah 3: Hitung lightness (L): L = (Mmax + Mmin) / 2.
Langkah 4: Hitung hue (H) adhedhasar saluran sing maksimal:
- Yen Mmax = R: H = 60 * ((G - B) / C) mod 360.
- Yen Mmax = G: H = 60 * ((B - R) / C) + 120.
- Yen Mmax = B: H = 60 * ((R - G) / C) + 240. Yen C = 0, hue ora ditemtokake (biasane 0).
Langkah 5: Hitung saturation (S):
- Yen C = 0: S = 0.
- Yen C > 0: S = C / (1 - |2L - 1|).
Conto kanggo RGB (79, 70, 229): R=0.3098, G=0.2745, B=0.8980. Mmax=0.8980 (B), Mmin=0.2745 (G). C=0.6235. L = (0.8980+0.2745)/2 = 0.5863 → 58.63% (dibunderake dadi 59%). Hue: amarga B max, H = 60 * ((0.3098-0.2745)/0.6235) + 240 = 60*(0.0566)+240 = 3.396+240 = 243.396° → 243°. S: |2L-1| = |1.1726-1| = 0.1726. 1 - 0.1726 = 0.8274. S = 0.6235/0.8274 = 0.7534 → 75.34% → 75%.
Mula HSL (243°, 75%, 59%). Tool nampilake persis kaya ngono.
Nganggo HSL kanggo Palet lan Aksesibilitas
UI/UX desainer milih HSL amarga bisa ngganti lightness tanpa ngrusak hue. Kanggo nggawe palet monokromatik, sampeyan bisa njaga hue lan saturation tetep, banjur mung ngowahi lightness. Contone, warna inti HSL (243°, 75%, 59%). Kanggo varian peteng, lightness diturunake dadi 40%; kanggo varian padhang, ditingkatake dadi 80%. Kabeh varian isih katon asale saka hue sing padha. Ing RGB, sampeyan kudu nyetel telung saluran bebarengan.
Kanggo aksesibilitas, HSL mbantu nyukupi rasio kontras WCAG. Desainer bisa nambah lightness kanggo nggawe teks luwih waca ing latar mburi peteng, utawa ngurangi lightness kanggo teks ing latar mburi padhang, nalika njaga identitas warna merek. Contone, kanggo entuk kontras 4.5:1 ing latar mburi putih, sampeyan bisa ngedhunke lightness werna biru saka 59% dadi 30% tanpa ngganti hue.
Pembangun tema nganggo HSL kanggo nggawe mode petang lan padhang. Kode CSS nganggo hsl() utawa hsla() bisa diganti mung kanthi nyetel variabel lightness. Ing JavaScript, manipulasi gaya dinamis dadi luwih gampang amarga hue tetep.
Watesan HSL lan Model Warna Liyane
HSL ora seragam sacara persepsi. Warna kuning lan biru kanthi lightness sing padha (contohe 50%) ora katon padha padhange amarga sensitivitas mata manungsa beda. Iki amodel kasedhiya kanggo kebalikan ing bunder, nanging bobote ora rata.
Model kaya LAB luwih seragam sacara persepsi. Tool iki uga nampilake LAB supaya sampeyan bisa verifikasi. Nanging HSL luwih intuisi kanggo palet cepet.
Watesan liyane: RGB lan HSL minangka model sing digandheng karo layar (display-referenced). Nalika ngowahi saka CMYK (taksiran layar) utawa LAB, bisa uga ana warna sing metu saka gamut RGB. Contone, CMYK jero bisa ngasilake warna sing luwih peteng tinimbang sing bisa ditampilake layar. Tool nyetel warna kasebut menyang warna sing paling cedhak sing bisa ditampilake. Yen sampeyan ngowahi maneh warna sing wis disetel, bisa ana owah-owahan tipis.
Pangguna profesional percetakan kudu ngelingi yen CMYK ing tool iki mung taksiran layar. Aja digunakake kanggo cetak profesional tanpa verifikasi proof.
Panggunaan Praktis ing Web Development
Front-end developer asring nampa spesifikasi warna saka alat desain minangka RGB (contoh saka Figma). Kaca iki ngowahi cepet dadi HSL kanggo digunakake ing CSS hsl() fungsi. Contone:
.element {
background-color: hsl(243, 75%, 59%);
color: hsl(243, 75%, 30%); /* warna peteng kanggo kontras */
}
Sampeyan uga bisa nggawe palet dinamis kanthi JavaScript nggunakake HSL. Contone, yen sampeyan pengin nambah transparansi (alpha), hsla() ngidini sampeyan nambah alpha tanpa ngganti hue utawa saturation.
Tool nyedhiyakake HEX uga, sing migunani kanggo ngrampungake desain lawas utawa ing ngendi browser lawas diwajibake. Nanging kanggo proyek modern, HSL luwih gampang dimanipulasi.
Pitakonan sing Asring Ditakokake
1. Apa bedane RGB lan HSL? RGB asli kanggo layar (aditif, saluran 0-255). HSL digawe kanggo manungsa: hue minangka sudut, saturation minangka kemurnian, lightness minangka padhang. HSL ngidini sampeyan ngatur brightness tanpa ngganti hue.
2. Kenapa HSL digunakake kanggo palet warna? Amarga sampeyan bisa njaga hue lan saturation tetep, lan mung ngowahi lightness kanggo nggawe variasi (tints, shades, tones). Iki angel ing RGB amarga sampeyan kudu nyetel telung saluran bebarengan.
3. Apa sing kedadeyan yen aku ngetik angka koma ing RGB? Tool nunggu telung integer 0-255 sing dipisahake koma utawa spasi. Yen sampeyan ngetik angka kaya "79.5, 70, 229", tool bakal nampilake pesen kesalahan: "Enter RGB as three numbers 0–255, like 79, 70, 229."
4. Apa warna CMYK ing tool iki bisa digunakake kanggo cetak? Ora, iki mung taksiran on-screen. Aja digunakake kanggo cetak profesional tanpa verifikasi. Konversi CMYK sing akurat mbutuhake profil printer tartamtu.
5. Kenapa sawetara warna LAB utawa CMYK sing daklebokake ora padha nalika diowahi bali? Yen nilai kasebut ngluwihi gamut RGB (ora bisa ditampilake ing layar), tool nyetel menyang warna sing paling cedhak. Nalika sampeyan ngowahi bali, bisa ana owah-owahan cilik amarga werna asli wis ilang.
6. Apa HSL padha karo HSB (HSV)? Ora. HSB (utawa HSV) nggunakake brightness tinimbang lightness. Ing HSB, brightness yaiku nilai maksimal saka saluran, dene HSL nggunakake rata-rata maksimal lan minimal. Tool iki uga nuduhake HSV supaya sampeyan bisa mbandhingake.