Cara Mengubah Warna antara HEX, RGB, dan HSL

HEX, RGB, dan HSL adalah tiga format warna yang dipakai di CSS dan alat desain. HEX ringkas untuk CSS, RGB mendukung alpha, dan HSL paling intuitif untuk membangun palet karena Anda dapat mengubah lightness tanpa menghitung ulang komponen lain. Gunakan Konverter Warna NeatForge untuk mengubah antara ketiga format secara real-time langsung di browser Anda.

Apa itu format warna HEX, RGB, dan HSL?

Tiga format ini mendeskripsikan warna yang sama dengan cara berbeda:

• HEX — notasi heksadesimal #RRGGBB. Contoh: #2563EB.
• RGB — komponen merah, hijau, biru (0–255). Contoh: rgb(37, 99, 235).
• HSL — hue (0–360°), saturation (%), lightness (%). Contoh: hsl(217, 83%, 53%).

Ketiganya menghasilkan warna identik; perbedaannya hanya pada cara penulisan dan kenyamanan manipulasi.

Kapan menggunakan masing-masing format?

• HEX — default untuk CSS karena ringkas dan didukung semua browser. Cocok untuk nilai warna statis.
• RGB — diperlukan saat menambahkan alpha. rgba(37, 99, 235, 0.5) mendukung transparansi.
• HSL — terbaik untuk desain dan palet. Mengubah lightness untuk membuat shade/tint jauh lebih mudah daripada di RGB.

Banyak desainer memilih warna di HSL (karena intuitif) lalu menyalin hasil HEX ke CSS.

Apa perbedaan RGB dan HSL?

RGB mendeskripsikan warna dari komponen merah, hijau, dan biru — persis seperti layar menampilkan piksel. Sayangnya, mengubah satu komponen RGB mengubah seluruh karakter warna, sehingga sulit membuat variasi terang/gelap.

HSL mendeskripsikan warna berdasarkan:

• Hue — sudut pada roda warna (0° merah, 120° hijau, 240° biru).
• Saturation — intensitas warna (0% abu-abu, 100% penuh).
• Lightness — kecerahan (0% hitam, 50% normal, 100% putih).

Untuk membuat shade lebih gelap dari satu warna, Anda cukup menurunkan lightness di HSL — komponen lain tetap. Di RGB, Anda harus menghitung ulang ketiga nilai. Itulah alasan HSL lebih intuitif untuk desain.

Cara mengubah HEX ke RGB dan HSL

1. Buka Konverter Warna.
2. Ketik nilai HEX (mis. #2563EB) atau sesuaikan angka RGB/HSL.
3. Pratinjau warna diperbarui secara instan di bagian atas.
4. Klik tombol Salin di sebelah HEX, RGB, atau HSL untuk menyalin nilai siap CSS.

Alat ini juga mendukung singkatan HEX 3 digit — mengetik #fff otomatis diperluas menjadi #FFFFFF. Output selalu menggunakan bentuk 6 digit untuk kompatibilitas maksimum.

Tips CSS: color-mix dan opacity modern

CSS modern memungkinkan pencampuran warna tanpa preprocessor:

.button {
  background: color-mix(in srgb, #2563EB 80%, white);
}

Untuk transparansi, gunakan notasi modern dengan spasi (tanpa koma):

.overlay {
  background: rgb(37 99 235 / 0.5);
}

Notasi ini didukung browser modern dan lebih konsisten dengan sintaks HSL/RGB baru.

FAQ

Apakah alat ini mendukung HEX 3 digit? Ya. Mengetik #fff otomatis diperluas menjadi #FFFFFF. Output selalu 6 digit.

Bisakah saya menyalin nilai siap CSS? Ya. Tombol Salin memberi #2563EB, rgb(37, 99, 235), atau hsl(217, 83%, 53%) yang dapat langsung ditempel ke CSS.

Apa yang terjadi jika HEX tidak valid? Bidang HEX menerima teks bebas, tetapi RGB dan HSL hanya diperbarui saat HEX valid, sehingga Anda dapat bereksperimen tanpa kehilangan warna sebelumnya.

→ Buka Konverter Warna gratis