Memahami RGB dan HSL
RGB ke HSL Converter menerjemahkan warna berbasis kanal cahaya menjadi model hue, saturation, dan lightness. RGB umum dipakai layar dan gambar digital, sedangkan HSL sering lebih mudah untuk menyusun variasi warna antarmuka. Hue menunjukkan posisi pada roda warna dari 0 sampai 360 derajat. Saturation mengatur intensitas, sedangkan lightness mengatur terang dan gelap.
Konversi dua arah
Masukkan nilai merah, hijau, dan biru dari 0 sampai 255 untuk memperoleh HSL, HSLA, HEX, HSV, dan CMYK. Pilih arah HSL ke RGB apabila nilai awal menggunakan hue, saturation, dan lightness. Input angka dipasangkan dengan slider agar perubahan cepat tetap dapat dilakukan menggunakan keyboard atau pointer. Alpha opsional dipertahankan pada format yang mendukung transparansi.
Rumus yang digunakan
RGB lebih dahulu dinormalisasi ke rentang 0–1. Nilai maksimum dan minimum menentukan chroma. Lightness adalah rata-rata maksimum dan minimum. Saturation dihitung dari chroma dengan memperhitungkan lightness, sedangkan hue ditentukan oleh kanal maksimum. Untuk warna abu-abu yang tidak memiliki chroma, saturation dan hue dinyatakan nol. Hasil dibulatkan seperlunya agar mudah dibaca tanpa menghilangkan ketelitian praktis.
Penggunaan dalam desain
HSL membantu membuat hover state, latar lebih terang, border lebih gelap, atau variasi tema dengan mempertahankan hue. Contohnya, rgb(255, 0, 0) menjadi sekitar hsl(0, 100%, 50%). Warna abu-abu seperti rgb(128, 128, 128) memiliki saturation nol. Anda dapat menyalin satu format atau seluruh hasil untuk stylesheet, dokumentasi token, dan prototipe.
Validasi dan privasi
Tool menolak RGB di luar 0–255, hue di luar 0–360, serta saturation, lightness, atau alpha di luar rentangnya. Semua proses berlangsung di perangkat pengguna. Input dan hasil tidak dikirim atau disimpan. Statistik penggunaan baru dicatat setelah perhitungan valid berhasil. Gunakan Color Contrast Checker untuk memastikan kombinasi warna tetap terbaca.
Praktik penggunaan warna yang bertanggung jawab
Angka hasil konversi sebaiknya diperlakukan sebagai bagian dari alur desain, bukan satu-satunya dasar keputusan. Periksa warna pada layar dan perangkat yang berbeda, pertimbangkan mode terang serta gelap, dan gunakan token desain agar perubahan dapat diterapkan konsisten. Jika warna dipakai untuk menyampaikan status, sertakan ikon, teks, pola, atau bentuk sehingga informasi tidak hanya bergantung pada persepsi warna. Pengguna dengan buta warna atau kondisi penglihatan tertentu mungkin membaca kombinasi yang sama dengan cara berbeda. Karena itu, selalu uji foreground dan background menggunakan pemeriksa kontras serta lakukan evaluasi nyata dengan ukuran dan berat font yang dipakai.
Integrasi ke workflow desain dan pengembangan
Hasil dapat disalin ke CSS, variabel custom property, SVG, Canvas, dokumentasi design system, materi pembelajaran, atau spesifikasi handoff. Simpan warna sumber dan tujuan konversi agar anggota tim memahami ruang warna yang digunakan. Hindari pembulatan berulang dengan mengonversi bolak-balik terlalu banyak kali; gunakan nilai sumber sebagai referensi utama dan bulatkan hanya saat ditampilkan. Transparansi juga perlu diuji di atas latar sebenarnya karena warna komposit dapat berbeda dari swatch tunggal. Toolora menampilkan beberapa format sekaligus untuk membantu pemeriksaan silang, tetapi browser, profil monitor, dan proses cetak tetap dapat memengaruhi tampilan akhir.