Konverter Warna
Konversikan warna apa pun antara HEX, RGB, HSL, HSV, dan CMYK. Pilih warna atau ketik nilai dalam format apa pun — setiap notasi lainnya diperbarui secara instan, langsung di browser Anda.
HEX
RGB
HSL
HSV
hsv(18, 95%, 96%)
CMYK
cmyk(0%, 66%, 95%, 4%)
Cara menggunakan Konverter Warna
- 1
Pilih atau tempel warna
Klik petak warna untuk membuka pemilih warna, atau tempel nilai ke kolom HEX, RGB, atau HSL. Seluruh alat mengikuti warna mana pun yang Anda pilih.
- 2
Edit dalam format apa pun
Ketik langsung di kolom HEX, RGB, atau HSL. Setiap notasi lainnya — termasuk HSV dan CMYK — dihitung ulang begitu Anda membuat perubahan.
- 3
Baca setiap notasi
Lihat warna yang sama dinyatakan dalam lima cara sekaligus, sehingga Anda dapat mencocokkan desain di seluruh CSS, cetak, dan editor gambar tanpa perlu alat kedua.
- 4
Salin yang Anda butuhkan
Gunakan tombol salin di samping nilai mana pun untuk menyalinnya ke papan klip Anda, siap dimasukkan ke stylesheet atau berkas desain Anda.
Panduan Praktis tentang Format Warna
Warna yang sama, notasi yang berbeda
HEX, RGB, HSL, HSV, dan CMYK bukanlah warna yang berbeda; untuk pekerjaan layar, semuanya adalah cara yang berbeda untuk menuliskan satu titik yang sama dalam ruang warna. Merah murni bisa ditulis #ff0000, rgb(255, 0, 0), atau hsl(0, 100%, 50%), dan ketiganya ditampilkan secara identik. Memilih sebuah notasi sebenarnya soal mana yang paling mudah dipikirkan untuk tugas yang sedang Anda hadapi, dan itulah sebabnya konverter yang menampilkannya berdampingan benar-benar menghemat waktu. Anda tinggal memilih format yang sesuai dengan alat Anda lalu menyalinnya, alih-alih menghitung sendiri secara manual.
Satu-satunya pengecualian adalah CMYK, yang ditujukan untuk tinta alih-alih cahaya sehingga tidak dapat dipetakan secara sempurna ke format lainnya, sebuah hal yang patut diingat dan akan kita bahas lagi di bawah.
HEX dan RGB adalah angka yang sama
RGB menggambarkan warna sebagai tiga saluran, yaitu red, green, dan blue, masing-masing berkisar dari 0 hingga 255, yang dicampur sebagai cahaya. HEX hanyalah ketiga angka yang sama itu yang ditulis dalam basis enam belas, dua digit heksadesimal per saluran. Jadi dalam #f5530c, bagian f5 adalah saluran merah, yaitu 245, bagian 53 adalah hijau, yaitu 83, dan bagian 0c adalah biru, yaitu 12, sehingga menghasilkan persis rgb(245, 83, 12). Karena satu byte menampung nilai 0 hingga 255, setiap saluran membutuhkan persis dua digit heksadesimal, dan konversi antara keduanya bersifat tanpa kehilangan data serta langsung.
HEX singkat adalah sebuah kemudahan: kode tiga digit menggandakan setiap digitnya, sehingga #f50 diperluas menjadi #ff5500. Alat ini membaca bentuk singkat persis seperti yang dilakukan browser, dan menerima kode dengan atau tanpa tanda pagar di depan, dalam huruf besar maupun kecil.
Alpha: RGBA dan HSLA
Menambahkan saluran alpha membuat warna menjadi sebagian transparan. RGBA dan HSLA menambahkan nilai keempat, yaitu opasitas dari 0 untuk sepenuhnya transparan hingga 1 untuk sepenuhnya buram, sehingga rgba(245, 83, 12, 0.5) adalah oranye yang sama dengan opasitas setengah. CSS modern juga mendukung HEX delapan digit, di mana dua digit terakhir mengkodekan alpha sebagai satu byte, sehingga alpha setengah kira-kira adalah pasangan heksadesimal 80 yang ditambahkan ke warnanya.
Alpha adalah yang memungkinkan sebuah warna berpadu dengan apa pun yang ada di belakangnya, dan ini penting untuk overlay, scrim, bayangan lembut, serta efek kaca berwarna. Ingatlah bahwa alpha yang sama akan terlihat berbeda di atas latar yang berbeda, karena transparansi berarti tampilan akhirnya adalah campuran dari warna Anda dan lapisan di bawahnya.
Mengapa HSL lebih mudah disesuaikan
HSL menggambarkan warna seperti cara seseorang memikirkannya: hue adalah posisi pada roda warna dari 0 hingga 360 derajat, saturation adalah seberapa pekat warnanya dalam persentase, dan lightness adalah seberapa terang warnanya dalam persentase. Struktur itu membuat penyesuaian manual menjadi intuitif. Untuk mendapatkan rona yang lebih gelap dari warna yang sama, Anda cukup menurunkan lightness dan membiarkan hue serta saturation tetap; untuk meredam sebuah warna, Anda menurunkan saturation-nya. Melakukan hal setara dalam RGB mentah berarti mengubah ketiga saluran secara serempak, yang jauh lebih sulit diperkirakan dengan mata.
Inilah sebabnya HSL unggul untuk membangun sistem warna. Ingin keadaan hover yang sedikit lebih gelap dari warna dasar, atau sederet petak warna yang berbagi hue yang sama tetapi bertahap melalui lightness? Cukup geser satu angka HSL. HSV, yang juga ditulis HSB, sangat erat kaitannya tetapi memadukan hue dan saturation dengan value, atau brightness, alih-alih lightness, dan inilah model yang ditampilkan oleh banyak editor gambar dan pemilih warna, sehingga kemampuan membaca keduanya membuat Anda fasih di berbagai alat desain.
Contoh nyata: putih, hitam, dan warna menengah
Titik-titik ujungnya bersih. Putih adalah #ffffff, yaitu rgb(255, 255, 255) dan hsl(0, 0%, 100%): setiap saluran maksimal, atau dalam istilah HSL adalah lightness penuh tanpa saturation sehingga hue menjadi tidak relevan. Hitam adalah #000000, yaitu rgb(0, 0, 0), dan hsl(0, 0%, 0%): semuanya nol. Abu-abu menengah berada di tengah, mendekati #808080 dan rgb(128, 128, 128), yang dalam HSL adalah hsl(0, 0%, 50%), dengan baik menunjukkan bahwa setiap warna netral memiliki saturation nol dan lightness yang mengikuti kecerahannya.
Sekarang warna nyata: oranye yang sama itu, #f5530c, terbaca sebagai rgb(245, 83, 12) dan kira-kira hsl(18, 92%, 50%). Bentuk HSL-nya langsung memberi tahu Anda bahwa itu adalah hue hangat di dekat merah-oranye, sangat pekat, dan pada lightness sedang, informasi yang disembunyikan oleh untaian heksadesimalnya. Tempel salah satu dari ini ke dalam alat dan saksikan format lainnya terisi secara instan.
CMYK dan batas dari layar ke cetak
CMYK adalah singkatan dari cyan, magenta, yellow, dan key, di mana key adalah hitam, dan ini merupakan model substraktif yang dibuat untuk tinta di atas kertas alih-alih cahaya di atas layar. Karena ia bekerja dengan mengurangi cahaya yang dipantulkan kertas, ia tidak dapat mereproduksi setiap warna pekat yang dapat dipancarkan layar bercahaya, sehingga biru atau hijau yang cemerlang di layar sering kali tampak lebih kusam saat dicetak. Nilai CMYK yang dilaporkan alat ini adalah konversi matematis langsung dari RGB dan benar-benar berguna sebagai titik awal, tetapi bukan pengganti alur kerja cetak yang dikelola warnanya.
Untuk cetak yang kritis terhadap warna, selalu periksa terhadap profil ICC aktual printer Anda dan sebuah proof, karena perangkat, kertas, dan tinta semuanya menggeser hasilnya. Anggaplah keluaran CMYK di sini sebagai perkiraan cepat, bukan jaminan.
Warna bernama dan lompatan ke wide gamut
CSS juga menyertakan sekitar 150 warna bernama, kata-kata seperti tomato, rebeccapurple, dan slategray, yang masing-masing hanyalah alias untuk nilai heksadesimal tertentu. Warna-warna ini praktis untuk pembuatan prototipe cepat dan untuk rona yang mudah diingat, meskipun untuk sistem desain yang sungguhan, nilai heksadesimal atau HSL yang eksplisit memberi Anda kontrol dan konsistensi yang lebih halus. Warna bernama adalah label yang praktis, bukan ruang warna tersendiri.
Menatap ke depan, fungsi warna CSS yang lebih baru bergerak melampaui gamut sRGB klasik yang diasumsikan oleh format-format ini. Fungsi untuk ruang seperti oklch yang seragam secara persepsi dan display-p3 yang lebih luas dapat menyatakan warna yang lebih pekat daripada yang dapat dijangkau HEX dan RGB, yang menjadi penting seiring layar modern semakin canggih. Nilai HEX, RGB, HSL, dan HSV yang ditangani alat ini tetap menjadi mata uang sehari-hari web, dan memahaminya adalah fondasi untuk mengadopsi ruang-ruang baru itu dengan percaya diri.
Pertanyaan yang sering diajukan
Bagaimana cara mengonversi warna HEX ke RGB?
Apa perbedaan antara HSL dan HSV?
Apakah ini mendukung HEX singkat 3 digit?
Untuk apa CMYK digunakan?
Apakah data saya diunggah ke server?
Alat terkait
Lanjutkan dengan alat praktis ini