Skip to main content

Konverter RGB ke HSL Ubah nilai RGB menjadi format warna HSL dengan penggeser interaktif.

Konverter RGB ke HSL illustration
🎨

Konverter RGB ke HSL

Ubah nilai RGB menjadi format warna HSL dengan penggeser interaktif.

1

Atur Nilai RGB

Sesuaikan penggeser Merah, Hijau, dan Biru atau ketik nilai dari 0 hingga 255.

2

Lihat Keluaran HSL

Lihat nilai Hue, Satuasi, dan Kecerahan yang dihitung secara waktu nyata.

3

Salin Nilai HSL

Salin string CSS hsl() untuk digunakan langsung dalam stylesheet Anda.

Loading tool...

What Is Konverter RGB ke HSL?

Konverter RGB ke HSL mengubah nilai saluran warna Merah, Hijau, dan Biru menjadi model warna Hue, Saturation, dan Lightness. Konversi ini menjembatani dua cara mendasar untuk mendeskripsikan warna: RGB, yang merupakan bagaimana layar secara fisik memproduksi warna dengan mencampur cahaya, dan HSL, yang merupakan bagaimana manusia secara alami mempersepsikan dan mendeskripsikan warna. Ketika seorang desainer mengatakan "buat biru ini sedikit lebih terang," mereka berpikir dalam istilah HSL - simpan hue, simpan saturasi, tingkatkan lightness. Alat ini melakukan terjemahan itu secara instan, membuatnya lebih mudah untuk bekerja dengan warna dalam cara yang lebih intuitif. Konverter ini sangat penting untuk setiap alur kerja yang dimulai dengan nilai RGB presisi (dari pemilih warna, API, atau analisis gambar) dan perlu memanipulasi warna secara konseptual. Ini mengeluarkan notasi CSS hsl() standar yang berfungsi di semua browser modern.

Why Use Konverter RGB ke HSL?

  • Penggeser berwarna membuatnya mudah untuk memvisualisasikan setiap kanal RGB secara independen
  • Keluaran HSL membantu Anda memahami kualitas perseptual dari warna RGB apa pun
  • Konversi waktu nyata tanpa penundaan saat Anda menyesuaikan nilai-nilai
  • Keluaran hsl() CSS siap untuk digunakan langsung dalam pengembangan web
  • Membantu menjembatani kesenjangan antara RGB teknis dan manipulasi warna yang intuitif

Common Use Cases

Analisis Warna

Pahami sifat-sifat perseptual dari warna RGB apa pun dengan melihat sudut hue, tingkat saturasi, dan kecerahan.

Pembuatan Palet

Konversi warna dasar ke HSL, lalu ubah satu dimensi secara sistematis untuk membuat palet yang harmonis.

Penemaan Dinamis

Konversi warna merek RGB ke HSL untuk sistem variabel CSS yang mendukung pengalihan tema waktu nyata.

Pendidikan Warna

Pelajari bagaimana nilai-nilai RGB memetakan sifat-sifat hue, saturasi, dan kecerahan yang dapat dikenali manusia.

Technical Guide

Algoritma RGB ke HSL menormalkan R, G, B dari 0-255 ke rentang 0-1, kemudian mengidentifikasi nilai saluran maksimum dan minimum. Lightness adalah rata-rata dari max dan min: L = (max + min) / 2. Untuk warna akromatik (max = min), hue dan saturasi keduanya 0. Untuk warna kromatik, Saturasi = delta / (1 - |2L - 1|) di mana delta = max - min. Perhitungan Hue tergantung pada saluran mana yang maksimum: max adalah R → H = (G-B)/delta mod 6; max adalah G → H = (B-R)/delta + 2; max adalah B → H = (R-G)/delta + 4. Kalikan dengan 60 untuk mendapatkan derajat. Nilai hue negatif disesuaikan dengan menambahkan 360. Nilai HSL yang dihasilkan menjelaskan warna yang sama dalam sistem koordinat silinder. Wawasan kunci: dua warna dengan hue dan saturasi yang sama tetapi lightness yang berbeda akan terasa seperti nuansa alami satu sama lain. Sifat ini membuat HSL ideal untuk menghasilkan skala warna, tugas yang jauh lebih sulit dilakukan dengan benar di ruang RGB.

Tips & Best Practices

  • 1
    Nilai R, G, B yang sama selalu menghasilkan hue=0, saturasi=0 (abu-abu murni)
  • 2
    Saturasi tinggi + kecerahan 50% menghasilkan versi paling hidup dari setiap hue
  • 3
    HSL lebih baik daripada RGB untuk membuat ramp warna dan token desain yang konsisten
  • 4
    Gunakan konversi ini untuk mendeteksi apakah suatu warna hangat (H: 0-60° atau 300-360°) atau sejuk (H: 120-240°)
  • 5
    CSS hsl() didukung secara luas dan sering lebih disukai daripada rgb() untuk stylesheet yang dapat dipertahankan

Related Tools

Frequently Asked Questions

Q Mengapa mengonversi RGB ke HSL?
HSL menjelaskan warna dalam istilah yang dipahami manusia: apa warnanya (hue), seberapa hidup (saturasi), dan seberapa terang (kecerahan). Ini membuat manipulasi warna lebih intuitif daripada menyesuaikan kanal R, G, B.
Q Apakah konversi ini tanpa kehilangan?
Konversi ini mempertahankan semua informasi warna. Anda dapat mengonversi RGB → HSL → RGB dan mendapatkan kembali nilai asli (dengan kemungkinan perubahan minor).
Q Apa artinya hue 0?
Hue 0° (dan 360°) mewakili merah. Roda hue berjalan: Merah(0°) → Kuning(60°) → Hijau(120°) → Cyan(180°) → Biru(240°) → Magenta(300°) → Merah(360°).
Q Bagaimana saya membuat warna lebih kusam menggunakan HSL?
Kurangi nilai saturasi. Saturasi 100% adalah paling hidup, sedangkan nilai yang lebih rendah menciptakan nada abu-abu yang lebih kusam. Pada saturasi 0%, Anda mendapatkan abu-abu murni.
Q Apa hubungan antara kecerahan dan kekuatan?
Dalam HSL, kecerahan 0% selalu hitam, 100% selalu putih, dan 50% mewakili bentuk paling murni dari hue. Ini berbeda dengan kekuatan/nilai dalam HSV di mana 100% adalah warna murni.

About This Tool

Konverter RGB ke HSL is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.