Pengonversi warna

Pengonversi warna adalah alat gratis untuk mengonversi warna dalam format HEX, HEX alpha, RGB, RGBA, HSV, HSL, atau HSLA ke berbagai format warna yang setara.

Format warna apa saja yang bisa dikonversi?

Kamu bisa memasukkan nilai HEX, HEX alpha, RGB, RGBA, HSV, HSL, atau HSLA, lalu melihat nilai yang sesuai dalam setiap format yang didukung. Fitur ini berguna ketika spesifikasi desain, stylesheet, atau API pihak ketiga menyatakan warna yang sama dengan format berbeda.

• HEX menyatakan kanal merah, hijau, dan biru dalam pasangan heksadesimal, biasanya dengan bentuk #RRGGBB.
• HEX Alpha menambahkan kanal opasitas. Dalam notasi CSS modern, format ini biasanya ditulis sebagai #RRGGBBAA.
• RGB menggunakan nilai kanal merah, hijau, dan biru, biasanya dalam rentang 0 hingga 255.
• RGBA menambahkan transparansi alpha ke RGB.
• HSV menyatakan rona, saturasi, dan nilai. Format ini umum digunakan dalam pemilih warna, tetapi bukan fungsi warna CSS standar.
• HSL menyatakan rona, saturasi, dan kecerahan. CSS mendukung HSL secara langsung.
• HSLA adalah HSL dengan nilai alpha.

RGB dan HSL merupakan cara matematis yang berbeda untuk menyatakan sebuah warna, bukan warna yang berbeda. Konversi mengubah cara penulisannya sambil mempertahankan warna yang dimaksud semirip mungkin, sesuai kemampuan format tujuan.

Bagaimana cara menggunakan pengonversi warna?

Masukkan satu nilai warna lengkap ke kolom Color dengan salah satu format yang diterima, lalu lihat atau salin nilai yang dihasilkan dari kolom keluaran.

1. Salin nilai sumber secara persis, termasuk tanda pagar di awal, koma, tanda kurung, tanda persen, atau komponen alpha jika ada.
2. Masukkan nilai tersebut ke kolom Color.
3. Lihat nilai setara yang ditampilkan pada bagian HEX, HEX Alpha, RGB, RGBA, HSV, HSL, dan HSLA.
4. Pilih salah satu format warna yang didukung oleh sistem tujuan. Untuk aturan CSS, HEX, RGB, RGBA, HSL, dan HSLA merupakan pilihan yang umum. HSV lebih sering digunakan dalam antarmuka penyuntingan dan perhitungan warna.

Proses konversi berjalan di server. Input dikirim ke server melalui HTTPS dan tidak disimpan. Meskipun satu warna biasanya bukan data sensitif, pertimbangkan apakah palet yang belum dirilis atau kumpulan token desain bersifat rahasia sebelum mengirimkannya ke layanan online apa pun.

Spasi dan tanda baca merupakan bagian dari sintaks RGB, HSL, dan format terkait, sedangkan tanda persen membedakan nilai persentase. Angka tanpa keterangan, nilai kosong, atau teks sembarang tidak dapat dikenali sebagai warna. Teks beraksen dan teks non-Latin juga tidak memiliki arti yang ditetapkan dalam format numerik ini.

Bagaimana cara membaca hasil konversi?

Baca setiap hasil sebagai notasi lain untuk warna yang sama. Perhatikan rentang kanal, persentase, dan transparansi alpha. Kolom yang perlu disalin bergantung pada notasi warna yang didukung oleh sistem penerima.

Dalam HEX enam digit, pasangan pertama menyatakan merah, pasangan kedua hijau, dan pasangan ketiga biru. Sebagai contoh, #336699 berisi nilai kanal heksadesimal 33, 66 dan 99, yang setara dengan nilai RGB desimal 51, 102 dan 153.

Rona biasanya dinyatakan sebagai sudut pada roda warna. Saturasi dan kecerahan atau nilai umumnya dinyatakan dalam persentase. Kecerahan HSL dan nilai HSV dihitung dengan cara berbeda, jadi persentasenya tidak boleh dibandingkan seolah-olah mengukur sifat yang sama.

Alpha menyatakan opasitas. Warna yang sepenuhnya buram tidak memerlukan format yang mendukung alpha, tetapi warna semitransparan memerlukannya. Jika warna RGBA atau HSLA disalin ke RGB biasa, HSL, atau HEX enam digit, notasi tujuan tersebut tidak menyediakan tempat untuk mencatat kanal alpha.

Pengonversi ini tidak didokumentasikan sebagai validator sintaks dengan pesan diagnostik terperinci. Jangan mengandalkannya untuk menunjukkan karakter tertentu yang menyebabkan input tidak valid. Kesalahan sintaks warna yang umum antara lain tidak adanya tanda pagar pada HEX, tanda kurung yang tidak berpasangan, tanda persen yang hilang, nilai alpha di luar rentang yang semestinya, atau pencampuran aturan kanal HSL dan RGB.

Contoh konversi warna

Contoh sederhana berikut menunjukkan hubungan antara HEX, RGB, HSL, dan HSV. Merah murni dapat ditulis dalam bentuk-bentuk setara berikut.

• Input HEX #ff0000
• Nilai RGB setara rgb(255, 0, 0)
• Nilai HSL setara hsl(0, 100%, 50%)
• Nilai HSV setara hsv(0, 100%, 100%)

Untuk warna dengan saturasi lebih rendah, #336699 setara dengan rgb(51, 102, 153). Bentuk HSL-nya adalah hsl(210, 50%, 40%), sedangkan bentuk HSV-nya memiliki rona 210 derajat, saturasi sekitar 66,7%, dan nilai 60%. Antarmuka dapat membulatkan angka desimal atau menggunakan spasi yang berbeda tanpa mengubah makna praktisnya.

Transparansi memberikan contoh sederhana lainnya. rgba(255, 0, 0, 0.5) dan hsla(0, 100%, 50%, 0.5) sama-sama menyatakan warna merah dengan setengah opasitas. Dalam konvensi umum HEX CSS delapan digit, nilai yang sesuai adalah #ff000080, dengan 80 sebagai byte alpha yang dikuantisasi.

Kapan warna perlu dikonversi?

Konversi warna berguna ketika aplikasi penerima memerlukan notasi berbeda, atau ketika bentuk lain memudahkan proses pencarian masalah. Contoh umum mencakup mengubah nilai Figma menjadi properti kustom CSS, memeriksa nilai RGBA yang ditemukan di Chrome DevTools, menyiapkan kolom warna untuk payload API, atau meninjau data tema pihak ketiga sebelum penerapan.

Konversi biasanya tidak diperlukan jika notasi warna yang ada sudah didukung oleh sistem tujuan. Mengubah HEX enam digit menjadi RGB hanya untuk CSS yang dibaca mesin tidak banyak memberikan manfaat. Konversi bolak-balik juga dapat menimbulkan pembulatan pada nilai HSL atau HSV. Selain itu, jangan tambahkan kanal alpha jika semua warna diketahui sepenuhnya buram.

Jika ingin memilih warna secara visual, bukan mengubah nilai yang sudah diketahui, gunakan Pemilih warna. Konversi juga tidak menggantikan pengujian kontras, simulasi buta warna, atau pengelolaan profil warna. Nilai numerik yang setara tidak membuktikan bahwa teks latar depan memenuhi persyaratan kontras WCAG.

Pertanyaan umum

Apakah pengonversi ini menerima nama warna CSS?

Tidak. Format input yang didokumentasikan hanya HEX, HEX alpha, RGB, RGBA, HSV, HSL, dan HSLA. Karena itu, nama seperti red, rebeccapurple atau transparent tidak tercantum sebagai input yang didukung. Ubah nama warna menjadi nilai numerik CSS sebelum memasukkannya.

Bisakah saya memasukkan nilai HEX tiga digit?

HEX termasuk format input yang diterima, tetapi panjang HEX yang didukung tidak didokumentasikan. Agar input dapat diproses secara konsisten, perluas bentuk singkat seperti #369 menjadi #336699. Prinsip yang sama berlaku untuk bentuk singkat empat digit yang memuat alpha.

Bisakah saya menempelkan deklarasi CSS lengkap?

Masukkan nilai warnanya saja, bukan seluruh deklarasi. Misalnya, gunakan #336699 dan bukan color: #336699; karena nama properti dan titik koma bukan bagian dari warna. Hapus tanda kutip di sekeliling nilai saat menyalinnya dari JSON atau berkas konfigurasi.

Apakah hasilnya mempertahankan informasi gamut luas atau profil warna?

Tidak ada format gamut luas atau profil warna tertanam yang tercantum sebagai format yang didukung. Display P3, Lab, LCH, dan data profil ICC memuat informasi yang tidak dapat dinyatakan oleh kolom HEX, RGB, HSL, dan HSV yang tersedia. Gunakan aplikasi dengan pengelolaan warna jika konversi harus memperhitungkan profil.

Mengapa hasil konversi terkadang memuat angka desimal?

Perhitungan HSL dan HSV dapat menghasilkan persentase pecahan meskipun kanal RGB sumber berupa bilangan bulat. Pembulatan angka tersebut dapat sedikit mengubah hasil jika nantinya dikonversi kembali ke RGB. Pertahankan presisi yang tersedia saat menyimpan token desain, lalu bulatkan hanya jika format tujuan atau standar penulisan kode mengharuskannya.