Tiga deskripsi dari warna sRGB
Sebuah enam digit HEX warna membungkus merah, hijau dan biru nilai saluran ke pasangan digit heksadesimal. RGB menulis tiga saluran yang sama sebagai angka desimal dari 0 melalui 255 dalam alat-alat ini. HSL mengatur ulang warna sRGB yang sama menjadi rona, saturasi, dan tingkat kecerahan HSL. Ini berguna ketika Anda ingin berpikir tentang keluarga warna, tetapi cahaya adalah parameter dari model ini daripada ukuran langsung dari kecerahan yang dirasakan. HEX dan RGB adalah dua notasi untuk nilai saluran; HSL memerlukan perhitungan. Ketiga dapat menentukan warna tampilan yang cocok ketika konversi dilakukan secara konsisten. Alat MultiVerto di sini menangani warna opak dan format input yang ditampilkan, bukan setiap sintak warna CSS yang mungkin.
Hitung contoh warna biru
Ambil #336699. Pasangannya adalah 33, 66 dan 99 dalam heksadesimal, yang menjadi desimal 51, 102 dan 153. Alat HEX-to-RGB karena itu menunjukkan rgb(51, 102, 153). Konversi nilai RGB tersebut ke HSL memberikan hsl(210, 50%, 40%) pada tool's rounded display. Hue 210 derajat terletak di wilayah biru; saturasi 50% dan kejernihan 40% menjelaskan koordinat HSL tertentu ini. Masukkan #336699 di bawah dan kemudian tempelkan hasil RGB ke dalam alat RGB-ke-HSL yang terhubung. Batalkan rute dengan HSL-to-RGB dan RGB-to-HEX. Untuk contoh ini, nilai-nilai sederhana kembali ke warna enam digit asli.
- HEX #336699 → saluran 33 66 99
- RGB rgb(51, 102, 153)
- HSL hsl(210, 50%, 40%)
Perjalanan dan presisi
Pasangan HEX mengidentifikasi nilai kanal integer dengan tepat. Sebuah HSL representasi dari kanal RGB arbitrari mungkin memerlukan lebih banyak digit pecahan daripada sebuah layar pendek menunjukkan. MultiVerto membulatkan tampilan komponen HSL ke dua tempat desimal dan konverter terbalik membulatkan kanal RGB ke bilangan bulat penuh. Untuk banyak masukan perjalanan pulang-pergi tetap visual dekat, tetapi perubahan kecil dari satu saluran dapat terjadi. Simpan HEX atau RGB asli jika warna yang dapat dibaca mesin adalah bagian dari sistem desain. Nilai HEX tiga digit singkatan memperluas setiap digit, sehingga #369 menjadi #336699; bukan tiga angka desimal. Alat ini tidak menerima transparansi alfa dalam konverter sampel, sehingga warna transparan memerlukan aliran kerja terpisah.
Konversi bukanlah tes aksesibilitas
Warna numerik yang sama mungkin terlihat berbeda pada latar belakang yang berbeda atau pada perangkat yang berbeda. Kecerahan HSL tidak memberitahukan apakah teks putih atau hitam memenuhi persyaratan kontras. Kontras tergantung pada dua warna dan formula aksesibilitas, bukan pada satu warna's HSL persentase sendiri. Jika warna digunakan untuk teks, uji pasangan teks dan latar belakang yang sebenarnya terhadap kriteria WCAG yang relevan. Juga periksa hover, fokus dan keadaan terkunci di mana warna lain mungkin muncul. Alat konversi membantu Anda mempertahankan notasi di CSS, berkas token desain atau respon API; mereka tidak memilih palet yang dapat diakses secara otomatis. Jangan menyimpulkan kemampuan membaca dari keluaran konverter tunggal.
Sebuah aliran kerja desain-token praktis
Pilih satu token kanonikal, seperti #336699, dan rekam di mana ia digunakan. Konversi ke RGB ketika antarmuka meminta nomor saluran, atau ke HSL ketika menyetel warna dan saturasi secara sengaja. Setelah mengedit HSL, konverter nilai baru kembali ke RGB atau HEX dan simpan hasil sebagai token baru daripada dengan diam-diam menulis ulang yang lama. Bandingkan sampel yang dirender dalam tata letak nyata, lalu jalankan periksa kontras dengan warna tetangga yang sebenarnya. Jaga warna alfa dan wide-gamut CSS di luar perbandingan tiga-saluran sederhana ini kecuali tujuan secara eksplisit mendukung mereka. Sebuah token sumber yang jelas plus varian yang diuji membuat pemeliharaan kemudian lebih mudah daripada menyalin tiga string warna yang tidak terkait.