Anda menemukan warna sempurna dalam format HEX, tetapi alat desain yang Anda gunakan memerlukan RGB. Atau klien mengirim warna dalam RGB dan Anda membutuhkan nilai HSL untuk CSS Anda. Konversi format warna adalah tugas harian bagi desainer dan developer. Color Converter kami membuatnya instan.
Yang Anda butuhkan
- Nilai warna dalam format apa pun (HEX, RGB, HSL, atau lainnya)
- Browser web (Chrome, Firefox, Safari, atau Edge)
- Tidak perlu akun atau instalasi
Panduan langkah demi langkah
Masukkan nilai warna Anda
Buka alat Color Converter. Ketik atau tempel nilai warna Anda dalam format apa pun yang didukung. Misalnya, masukkan #3B82F6 sebagai nilai HEX, rgb(59, 130, 246) sebagai RGB, atau hsl(217, 91%, 60%) sebagai HSL. Alat ini mengenali format secara otomatis.
Lihat semua konversi format
Alat ini langsung menampilkan warna Anda dalam setiap format yang didukung: HEX, RGB, HSL, dan lainnya. Anda dapat melihat pratinjau langsung warna bersama semua nilai ekuivalennya. Jika Anda perlu menyesuaikan warna, gunakan color picker untuk menyempurnakannya secara visual.
Salin format yang Anda butuhkan
Klik tombol salin di sebelah format mana pun untuk menyalin nilai ke clipboard Anda. Tempel langsung ke file CSS, alat desain, atau di mana pun Anda membutuhkannya. Tidak perlu mengetik ulang secara manual.
Perlu diketahui Color Converter berjalan sepenuhnya di browser Anda. Dapat digunakan offline setelah dimuat dan tidak memerlukan akun atau instalasi.
Memahami format warna
Alat dan konteks yang berbeda menggunakan format warna yang berbeda. Berikut kapan menggunakan masing-masing:
HEX
Format paling umum di web. Warna HEX dimulai dengan # diikuti enam karakter (huruf dan angka), seperti #FF5733.
- Digunakan di: CSS, HTML, alat desain (Figma, Sketch, Photoshop)
- Format:
#RRGGBBdi mana setiap pasang adalah nilai heksadesimal dari 00 hingga FF - Contoh:
#3B82F6(biru sedang)
RGB
Mendeskripsikan warna menggunakan komponen Merah (Red), Hijau (Green), dan Biru (Blue), masing-masing berkisar dari 0 hingga 255.
- Digunakan di: CSS (fungsi
rgb()), bahasa pemrograman, pencahayaan LED - Format:
rgb(merah, hijau, biru) - Contoh:
rgb(59, 130, 246)
HSL
Mendeskripsikan warna menggunakan Hue/Rona (0-360 derajat pada roda warna), Saturation/Saturasi (0-100%), dan Lightness/Kecerahan (0-100%).
- Digunakan di: CSS (fungsi
hsl()), teori warna, sistem desain - Format:
hsl(rona, saturasi%, kecerahan%) - Contoh:
hsl(217, 91%, 60%)
Tips HSL adalah format yang paling intuitif untuk menyesuaikan warna. Ingin nuansa lebih terang? Tingkatkan nilai kecerahan. Ingin nada lebih redup? Kurangi saturasi. Ini membuat HSL ideal untuk membangun sistem warna dan membuat variasi dari warna dasar.
Kapan menggunakan format mana
| Situasi | Format yang direkomendasikan |
|---|---|
| Menulis CSS secara manual | HEX (singkat dan familier) atau HSL (mudah disesuaikan) |
| Spesifikasi alat desain | HEX (standar industri) |
| Manipulasi warna dinamis dalam kode | HSL (paling mudah disesuaikan secara programatik) |
| Mengkomunikasikan warna ke klien | HEX (paling dikenal secara universal) |
| Desain cetak | CMYK (terpisah dari format layar) |
Melampaui warna tunggal
Setelah mengonversi warna, Anda mungkin ingin menjelajahi alat terkait:
- Gradient Generator: Buat gradien CSS yang mulus menggunakan warna Anda. Masukkan dua warna atau lebih dan dapatkan kode gradien siap pakai.
- Color Palette Generator: Hasilkan palet warna yang harmonis berdasarkan warna awal Anda. Dapatkan skema warna komplementer, analog, triadik, dan lainnya secara otomatis.
Alat-alat ini bekerja bersama Color Converter untuk membantu Anda membangun sistem warna lengkap untuk proyek Anda.
Penting Warna dapat terlihat berbeda di layar yang berbeda karena kalibrasi tampilan, profil warna, dan pengaturan kecerahan. Ketika akurasi warna sangat penting (branding, desain cetak), selalu verifikasi warna Anda pada media target, bukan hanya di layar Anda.
Pertanyaan yang sering diajukan
Apa perbedaan antara HEX dan RGB?
Keduanya mewakili informasi yang sama dalam notasi berbeda. HEX menggunakan heksadesimal (basis-16) dan RGB menggunakan desimal (basis-10). #FF0000 dan rgb(255, 0, 0) keduanya adalah merah murni.
Bisakah saya mengonversi ke CMYK untuk cetak? Format warna layar (HEX, RGB, HSL) dan format cetak (CMYK) adalah model warna yang fundamentally berbeda. Konversi matematis ada, tetapi untuk warna cetak yang akurat Anda harus menggunakan alat manajemen warna profesional.
Bagaimana dengan transparansi (alpha)?
HEX mendukung alpha dengan dua karakter tambahan (#3B82F680). RGB dan HSL mendukungnya sebagai fungsi rgba() dan hsla(). Color Converter menangani format-format ini juga.
Langkah selanjutnya
Dengan warna Anda yang sudah dikonversi, coba Gradient Generator untuk membuat gradien CSS yang indah, atau gunakan Color Palette Generator untuk membangun skema warna lengkap di sekitar warna yang Anda pilih.