Cara Mengonversi Warna Antara HEX, RGB, dan HSL
Jawaban Cepat
Untuk mengonversi warna: buka Color Converter, masukkan warna dalam format apa pun (HEX, RGB, HSL), dan alat akan langsung menampilkan warna yang setara dalam semua format lainnya. Semua konversi terjadi secara lokal di browser Anda — tidak ada data yang diunggah.
Perkenalan
Warna dapat direpresentasikan dalam berbagai format: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)), dan lainnya. Alat dan konteks yang berbeda menggunakan format yang berbeda — CSS sering kali menggunakan HEX atau RGB, alat desain dapat menggunakan HSL, dan APIs dapat menggunakan format apa pun. Mengonversi antar format memungkinkan Anda menggunakan warna yang ditentukan dalam satu sistem dalam konteks yang memerlukan sistem lain. Panduan ini menunjukkan cara mengonversi warna di browser Anda.
Langkah demi Langkah
-
Buka alat Konverter Warna
Buka halaman alat Konverter Warna. Alat ini mendukung format HEX, RGB, HSL, HSV, dan CMYK.
-
Masukkan warna Anda
Ketik atau tempel nilai warna dalam format apa pun yang didukung. Contoh: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. Alat ini secara otomatis mendeteksi format masukan.
-
Tinjau semua format yang setara
Alat ini menampilkan warna dalam semua format secara bersamaan: HEX, RGB, HSL, HSV, dan CMYK. Ini juga menunjukkan contoh pratinjau warna sehingga Anda dapat memverifikasi kebenaran konversi.
-
Salin format yang Anda perlukan
Klik tombol Salin di samping format apa pun untuk menyalin nilai tersebut ke papan klip Anda. Gunakan di CSS, alat desain, atau aplikasi Anda.
-
Sesuaikan warnanya (opsional)
Beberapa alat memungkinkan Anda menyesuaikan warna dengan penggeser (untuk HSL: rona, saturasi, kecerahan) dan melihat semua format diperbarui secara real-time. Ini berguna untuk menemukan warna atau corak terkait.
Contoh
HEX hingga RGB dan HSL
Masukan: #ff6600
Keluaran: __TETAP_34__: rgb(255, 102, 0)
__TETAP_36__: hsl(24, 100%, 50%)
RGB hingga HEX
Masukan: rgb(0, 128, 255)
Keluaran: __TETAP_35__: #0080ff
__TETAP_36__: hsl(210, 100%, 50%)
HSL hingga HEX
Masukan: hsl(120, 100%, 50%)
Keluaran: __TETAP_35__: #00ff00
__TETAP_34__: rgb(0, 255, 0)
Masalah Umum
- HEX dengan vs tanpa # —beberapa alat memerlukan awalan #, yang lain tidak. Konverter kami menerima keduanya.
- 3-digit vs 6-digit HEX —#f60 adalah singkatan dari #ff6600. Keduanya sah; konverter dinormalisasi menjadi 6 digit.
- HSL rentang rona —rona adalah 0-360 derajat (lingkaran). 0 dan 360 keduanya berwarna merah. Nilai di atas 360 membungkus.
- Perbedaan ruang warna —HEX, RGB, dan HSL semuanya sRGB. CMYK adalah ruang warna yang berbeda (cetak) dan konversinya merupakan perkiraan.
Kiat
- Gunakan HSL untuk membuat variasi warna —menyesuaikan corak, saturasi, atau kecerahan lebih intuitif daripada RGB.
- Gunakan HEX untuk CSS — ini adalah format paling ringkas dan didukung secara luas di stylesheet.
- Gunakan RGB ketika Anda perlu mengatur transparansi alfa —rgb(255, 102, 0, 0.5) untuk opacity 50% (atau gunakan 8-digit HEX: #ff660080).
- Gunakan Pengonversi Warna kami untuk konversi instan dan pribadi antara semua format warna.