Konverter HSL ke RGB

Apa yang Dilakukan Halaman Ini

Halaman konversi HSL ke RGB menyediakan transformasi instan dari satu model warna ke model lainnya. Anda memasukkan nilai hue dalam derajat (0–360), saturasi dan lightness dalam persen, dan alat ini langsung menampilkan padanan RGB dalam bentuk tiga angka 0–255, plus HEX, HSL, HSV, CMYK, dan LAB. Perubahan pada satu nilai HSL langsung membarui semua output lainnya tanpa perlu menekan tombol. Proses konversi terjadi sepenuhnya di peramban Anda; tidak ada data yang dikirim ke server.

Tujuan utama halaman ini adalah menjembatani dua cara berbeda dalam merepresentasikan warna: HSL yang dirancang untuk penalaran manusia, dan RGB yang merupakan ruang kerja eksak untuk matematika warna layar. Ketika Anda mengubah lightness di HSL, hue tetap utuh—itulah mengapa HSL digunakan secara luas untuk pembuatan palet dan tema warna. Sebaliknya, mengubah brightness atau value pada RGB sering menggeser hue secara tak terduga. Dengan alat ini, Anda bisa merancang warna di “bahasa” yang alami bagi mata manusia, lalu mendapatkan angka pasti yang dibutuhkan perangkat lunak dan perangkat keras.

Keunikan Konversi HSL ke RGB

Beberapa hal membedakan konversi HSL→RGB dari konversi lainnya seperti LAB→RGB atau CMYK→RGB:

1. Lossless. Setiap nilai HSL yang valid (hue 0–360, saturasi 0–100%, lightness 0–100%) memetak ke triplet RGB yang unik dalam rentang 0–255. Tidak ada kehilangan informasi. Jika Anda mengonversi RGB ke HSL lalu kembali ke RGB, Anda akan mendapatkan angka yang sama persis, asalkan tidak ada pembulatan yang tidak perlu.

2. Tanpa clipping gamut. Konversi dari LAB atau CMYK ke RGB sering menghasilkan warna di luar gamut layar—nilai RGB negatif atau di atas 255—sehingga perlu dipotong (clipping) ke batas aman. Proses clipping menyebabkan pergeseran warna: apa yang Anda lihat di layar tidak lagi sama dengan warna asli di ruang LAB atau CMYK. HSL tidak memiliki masalah ini karena HSL dan RGB bekerja dalam gamut yang sama: model warna RGB aditif yang digunakan oleh monitor. Setiap titik HSL sudah berada dalam gamut RGB, sehingga tidak perlu penyesuaian.

3. Rumus standar. Algoritma konversi HSL→RGB di halaman ini mengikuti standar CSS Color Module Level 4 dan spesifikasi W3C. Secara formal, lightness dihitung sebagai L = (max(R,G,B) + min(R,G,B)) / 2, kemudian saturasi dan hue diturunkan dari jarak antara nilai maksimum dan minimum. Konversi baliknya menggunakan fungsi trigonometri sederhana yang terdefinisi dengan baik untuk semua sudut.

Memahami Input dan Output

Input yang Diterima

• Hue: bilangan bulat atau desimal antara 0 dan 360, mewakili derajat pada roda warna. 0° atau 360° = merah, 120° = hijau, 240° = biru.
• Saturation: persentase (0–100%) tanpa simbol persen opsional? Bidang input menerima angka dengan simbol % atau tanpa. Misalnya 75% atau 75.
• Lightness: persentase (0–100%). 0% = hitam, 100% = putih, 50% = warna murni.

Format input yang benar: 243, 75%, 59% atau 243 75% 59%. Jika Anda memasukkan nilai di luar rentang atau format salah, alat akan menampilkan pesan: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."

Output yang Dihasilkan

Perhatikan bahwa CMYK yang ditampilkan adalah perkiraan layar. Nilai ini dihitung melalui transformasi RGB→CMYK sederhana yang mengasumsikan profil warna sRGB. Dalam percetakan profesional, nilai CMYK aktual bergantung pada tipe kertas, tinta, dan profil ICC mesin cetak. Jangan gunakan angka ini langsung untuk produksi cetak tanpa verifikasi dengan alat profiling khusus.

Cara Kerja Konversi di Balik Layar

Secara singkat, algoritme mengikuti langkah-langkah ini:

1. Jika lightness (L) ≤ 50%, maka t = L * (1 + S/100), jika L > 50%, maka t = L + S - L * S/100. Di sini S dan L dalam skala 0–1.
2. Hitung p = 2 * L - t (dengan L dalam 0–1).
3. Bagi hue (H) dengan 360 untuk mendapatkan nilai 0–1.
4. Untuk setiap komponen RGB (merah, hijau, biru), hitung nilai sementara tC = (H + 1/3), tC = H, tC = (H - 1/3) untuk merah, hijau, biru berturut-turut.
5. Jika tC < 0 tambah 1; jika tC > 1 kurangi 1.
6. Untuk setiap tC, terapkan aturan:
   • Jika tC < 1/6, maka color = p + (t - p) * 6 * tC
   • Jika tC < 1/2, maka color = t
   • Jika tC < 2/3, maka color = p + (t - p) * (2/3 - tC) * 6
   • Selain itu color = p
7. Kalikan masing-masing komponen (0–1) dengan 255 dan bulatkan ke bilangan bulat terdekat.

Hasilnya adalah triplet RGB yang dapat langsung digunakan dalam CSS, SVG, canvas, atau library grafis.

Aturan dan Kasus Batas

• Nilai di luar rentang: Jika hue > 360 atau < 0, atau saturasi/lightness > 100% atau < 0%, alat menolak input dan menampilkan pesan kesalahan. Hue secara siklik sebenarnya berulang (misalnya 400° setara dengan 40°), tetapi halaman ini tidak melakukan normalisasi—Anda harus memasukkan nilai dalam rentang standar.

• Nilai desimal: Hue dapat berupa desimal (misalnya 243.5°). RGB hasil akan dibulatkan ke bilangan bulat karena standar RGB 8-bit per saluran hanya mengenali bilangan bulat 0–255.

• Format persen: Saturation dan lightness harus disertai simbol % atau tidak? Berdasarkan fakt sheet, format contoh mencantumkan 75%. Alat menerima input dengan atau tanpa simbol persen, tetapi jika Anda mengetik 75 tanpa %, tool mungkin mengartikannya sebagai angka mentah (0–100) dan tidak membedakan dengan persen. Sebaiknya ikuti format eksplisit: 243, 75%, 59%.

• Warna achromatic: Jika saturasi = 0%, hue tidak relevan (warna abu-abu). Dalam kasus ini, RGB akan memiliki ketiga saluran sama dengan nilai lightness yang dikonversi ke skala 0–255 (L% × 2.55). Contoh: hsl(0, 0%, 50%) = rgb(128, 128, 128).

• Ekstrem lightness: L = 0% → hitam (rgb(0,0,0)); L = 100% → putih (rgb(255,255,255)). Pada kedua ekstrem, saturasi dan hue tidak memengaruhi output.

• CMYK sebagai estimasi: Diulangi: output CMYK hanyalah konversi matematis dari RGB menggunakan model CMY sederhana dengan black generation, bukan nilai yang siap cetak. Perbedaan bisa mencapai 10–20% dari nilai aktual tergantung pada perangkat cetak.

Siapa yang Membutuhkan Alat Ini

• Desainer antarmuka yang membangun palet warna atau tema. Mereka biasa bekerja di HSL untuk mengubah lightness tanpa mengubah hue, lalu membutuhkan nilai RGB untuk dikodekan dalam CSS, Swift, atau Flutter.

• Pengembang front-end yang menerjemahkan nilai warna dari alat desain (Figma, Sketch, Adobe XD) yang sering menampilkan HSL ke kode yang menggunakan RGB atau HEX.

• Siapa pun yang lebih suka bernalar tentang warna dalam istilah manusiawi—hue, saturasi, lightness—dan membutuhkan angka eksak untuk layar. Misalnya, untuk menulis fungsi gradien atau animasi di mana interpolasi lightness lebih alami daripada interpolasi RGB.

• Pendidik dan pelajar yang ingin memahami hubungan antara model warna. Dengan memasukkan nilai yang sama ke HSL dan melihat langsung perubahan RGB, HSV, LAB, mereka dapat mengamati bagaimana setiap ruang warna mendeskripsikan warna yang sama secara berbeda.

FAQ

1. Mengapa CMYK yang ditampilkan hanya perkiraan?
CMYK dikembangkan untuk percetakan dengan tinta fisik di atas kertas. Konversi RGB→CMYK yang dilakukan di sini mengasumsikan ruang warna sRGB dan formula generasi hitam (black generation) yang disederhanakan. Di dunia nyata, setiap mesin cetak memiliki profil warna tersendiri yang memengaruhi nilai C, M, Y, K aktual. Oleh karena itu, angka CMYK dari alat ini tidak boleh digunakan sebagai acuan produksi.

2. Apakah konversi ini akurat untuk semua nilai HSL?
Ya, selama nilai berada dalam rentang yang ditentukan (hue 0–360, saturasi 0–100%, lightness 0–100%). Konversi bersifat deterministik dan mengikuti standar CSS/Matematika warna. Tidak ada aproksimasi atau koreksi gamut yang menyebabkan distorsi.

3. Bagaimana jika saya memasukkan nilai di luar rentang?
Alat akan menolak input dan menampilkan pesan kesalahan. Tidak ada normalisasi otomatis. Misalnya, jika Anda memasukkan hue 400°, alat tidak akan mengubahnya menjadi 40°—Anda harus memperbaiki sendiri.

4. Apa perbedaan antara HSL dan HSV yang juga ditampilkan?
HSL (Hue, Saturation, Lightness) dan HSV (Hue, Saturation, Value) menggunakan konsep saturasi dan kecerahan yang berbeda. Di HSV, value berkisar dari 0 (hitam) hingga 1 (warna murni), sedangkan di HSL, lightness 0 = hitam, 1 = putih, 0.5 = warna murni. Akibatnya, untuk warna terang, LS dan HSV akan berbeda secara signifikan. Contoh: kuning murni hsl(60°, 100%, 50%) setara dengan hsv(60°, 100%, 100%); tetapi hsl(60°, 100%, 70%) akan menghasilkan hsv(60°, 60%, 100%). Perbedaan ini penting saat memilih model untuk pekerjaan tertentu.

5. Bisakah saya menggunakan nilai RGB hasil konversi langsung di CSS?
Tentu. Nilai RGB yang dihasilkan (misalnya 79, 70, 229) dapat langsung digunakan dalam properti CSS color: rgb(79, 70, 229) atau background-color: rgba(79, 70, 229, 1). Juga bisa ditulis sebagai HEX #4F46E5. Semua format tersebut valid di semua peramban modern.

6. Apakah ada kemungkinan perbedaan hasil antara alat ini dengan konversi di perangkat lunak desain?
Secara teori, karena semua mengikuti standar yang sama, seharusnya tidak ada perbedaan. Praktiknya, beberapa perangkat lunak mungkin menggunakan versi lama standar atau menambahkan koreksi gamma. Namun, untuk nilai HSL yang paling umum, perbedaan biasanya kurang dari 1 digit RGB. Jika Anda menemukan perbedaan signifikan, periksa apakah perangkat lunak tersebut menggunakan HSL atau HSB (Brightness) yang berbeda.