Konverter Warna
Konversi antara HEX, RGB, HSL
Cara menggunakan Konverter Warna
Konversi antara HEX, RGB, HSL Alat online gratis, tanpa pendaftaran, tanpa iklan mengganggu. Gunakan sekarang.
Kapan Anda perlu mengonversi kode warna?
Warna dalam desain digital hadir dalam berbagai format, masing-masing sesuai untuk konteks yang berbeda. Desainer web, developer frontend, dan desainer grafis yang bekerja dengan berbagai alat dan platform perlu mengonversi antar format secara rutin dalam pekerjaan sehari-hari mereka.
- Pengembangan CSS: Alat desain mengekspor dalam HEX (#7B35F5), tetapi CSS juga menerima RGB (rgb(123,53,245)) dan HSL (hsl(264,91%,58%)). Konversi antara format CSS untuk menjaga konsistensi kode dan memudahkan pemeliharaan.
- Konsistensi warna merek: Warna korporat perlu direpresentasikan secara akurat dalam HEX untuk web, CMYK untuk cetak, dan RGB untuk layar. Konversikan untuk memastikan warna cocok persis di semua media — penting untuk brand identity perusahaan Indonesia yang konsisten di semua touchpoint.
- Aksesibilitas: HSL memudahkan penyesuaian kecerahan sambil mempertahankan rona warna — berguna untuk membuat varian warna aksesibel dengan kontras yang cukup sesuai pedoman WCAG.
- Handoff desain ke developer: Figma dan Adobe XD mengekspor dalam HEX. Beberapa developer lebih memilih HSL untuk model rona/saturasi/kecerahan yang lebih intuitif untuk melakukan penyesuaian warna secara langsung di CSS.
- Persiapan materi cetak: Warna layar (RGB) perlu dikonversi ke CMYK untuk percetakan profesional — RGB memiliki gamut warna lebih luas dan beberapa warna cerah di layar tidak dapat direproduksi dalam cetak dengan tinta standar.
Ringkasan format: HEX (#RRGGBB) ringkas dan universal untuk web. RGB (0-255 per saluran) adalah format native layar. HSL (rona 0-360°, saturasi 0-100%, kecerahan 0-100%) paling intuitif bagi manusia. CMYK (0-100% per saluran) untuk percetakan profesional.
Frequently Asked Questions
Apa perbedaan RGB dan RGBA?
RGBA menambahkan saluran transparansi (alpha) ke RGB: rgba(123,53,245,0.5) adalah ungu 50% transparan. Nilai alpha berkisar dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram). HEX mendukung alpha dalam notasi 8 digit: #7B35F580 (80 hexadesimal = 50% opasitas).
Mengapa RGB dan CMYK memiliki gamut warna yang berbeda?
RGB adalah pencampuran warna aditif — menggabungkan cahaya merah, hijau, dan biru menghasilkan putih (untuk layar). CMYK adalah pencampuran subtraktif — tinta cyan, magenta, kuning, dan hitam menyerap cahaya (untuk percetakan). RGB dapat merepresentasikan warna lebih cerah dan jenuh dari yang dapat dicetak dengan tinta CMYK standar.
Apa itu HSL dan mengapa berguna?
HSL (Hue, Saturation, Lightness) dirancang agar intuitif bagi manusia. Hue adalah warna (0°=merah, 120°=hijau, 240°=biru). Saturation adalah intensitas (0%=abu-abu, 100%=cerah). Lightness adalah kecerahan (0%=hitam, 50%=warna murni, 100%=putih). Untuk membuat warna lebih gelap atau terang tanpa mengubah rona, cukup ubah nilai L.
Bagaimana cara mengonversi HEX ke RGB secara manual?
Bagi 6 digit HEX menjadi 3 pasang, konversi setiap pasang dari heksadesimal ke desimal. #7B35F5: 7B=123 (merah), 35=53 (hijau), F5=245 (biru) → rgb(123,53,245). Alat konversi melakukan ini seketika, tetapi memahami cara kerjanya memudahkan membaca nilai HEX langsung dalam kode.
Apa itu profil warna (sRGB, AdobeRGB, Display P3)?
Profil warna mendefinisikan gamut warna yang dapat ditampilkan perangkat. sRGB adalah standar untuk web dan monitor umum. AdobeRGB mencakup sekitar 50% lebih banyak spektrum yang terlihat, digunakan dalam fotografi profesional. Display P3 (perangkat Apple) sekitar 25% lebih luas dari sRGB. Untuk konten web, selalu gunakan sRGB sebagai standar yang paling kompatibel.
Konverter warna vs color picker vs palette generator
Konverter warna mengubah nilai warna yang ada antar format. Color picker (DevTools browser, color picker OS) memungkinkan pemilihan warna secara visual dan mengekspor nilainya. Palette generator menggunakan teori warna untuk membuat kombinasi warna yang harmonis dari satu warna dasar. Contrast checker memeriksa apakah kombinasi warna memenuhi standar aksesibilitas WCAG. Keempatnya digunakan secara saling melengkapi dalam alur kerja desainer modern.