Artikel
Alat warna untuk web: hex, palet, dan aksesibilitas
Memilih warna untuk sebuah situs tampak sederhana sampai Anda berhadapan dengan kode hex, triplet RGB, dan sudut HSL yang semuanya menggambarkan hal yang sama dengan cara berbeda. Artikel ini menjelaskan bagaimana format-format itu saling berhubungan, cara mengubah satu warna merek menjadi palet yang dapat dipakai, dan cara memastikan hasilnya tetap terbaca bagi orang yang melihat warna secara berbeda.
Hex, RGB, dan HSL menggambarkan warna yang sama
Warna di layar dicampur dari cahaya merah, hijau, dan biru. Notasi hex menulis ketiga kanal itu sebagai kode enam karakter seperti #2563eb, di mana setiap pasang karakter adalah satu kanal dari 00 hingga ff. RGB menulis tiga angka yang sama dalam desimal, dari 0 hingga 255, yang lebih mudah dibaca tetapi tidak menyampaikan apa pun lebih. HSL mengambil sudut berbeda: ia menggambarkan warna lewat rona (posisi pada roda warna dari 0 hingga 360 derajat), saturasi (seberapa cerah), dan kecerahan (seberapa dekat ke putih atau hitam). HSL adalah format yang dipilih desainer ketika ingin menyetel warna, karena menaikkan kecerahan atau menggeser rona adalah satu perubahan yang intuitif alih-alih tiga angka yang saling terkait. Sebuah konverter memungkinkan Anda berpindah di antara ketiganya sehingga Anda dapat membaca sebuah nilai dalam satu format dan memakainya dalam format lain.
Mengubah satu warna menjadi palet
Satu warna merek jarang cukup. Palet yang berfungsi biasanya membutuhkan satu warna utama, satu atau dua aksen, dan satu set abu-abu netral untuk teks dan latar. Hubungan antarwarna mengikuti aturan sederhana pada roda warna: warna komplementer berada saling berseberangan, warna analog berada bersebelahan untuk kesan tenang, dan set triadik menyebarkan tiga warna secara merata untuk kontras tanpa bentrok. Sebuah alat skema warna menerapkan aturan ini pada warna awal Anda dan memberikan kode hex yang cocok, sehingga Anda tidak perlu menghitung sudutnya secara manual. Jika Anda sudah punya sebuah gambar yang suasananya Anda sukai, sebuah pengekstrak palet membaca warna dominan darinya, yaitu cara cepat untuk mendasarkan situs pada sebuah foto atau logo.
Kontras dan buta warna
Palet yang terlihat bagus di layar Anda tetap bisa menyusahkan pembaca. Sekitar satu dari dua belas pria dan satu dari dua ratus wanita memiliki bentuk kekurangan penglihatan warna, yang paling umum adalah kesulitan memisahkan merah dari hijau. Jika satu-satunya sinyal kesalahan Anda adalah teks merah pada tombol hijau, para pembaca itu akan melewatkannya. Solusinya bukan menghindari warna melainkan tidak pernah mengandalkan warna saja: padukan dengan ikon, label, atau bentuk, dan jaga kontras kecerahan yang cukup antara teks dan latarnya. Sebuah simulator buta warna menunjukkan tampilan palet Anda pada jenis penglihatan warna yang umum, sehingga Anda bisa menangkap masalah sebelum dirilis alih-alih setelah ada keluhan.
Melakukan semua ini di peramban
Tidak ada langkah di atas yang memerlukan server. Mengonversi kode hex, menghasilkan skema, membaca warna dari gambar, dan menyimulasikan buta warna semuanya adalah perhitungan kecil yang ditangani peramban secara instan. Itu penting saat gambar yang Anda ambil sampelnya adalah desain yang belum dirilis atau logo klien: dengan alat di sini, berkasnya tetap di perangkat Anda dan tidak ada yang diunggah. Anda mendapat hasil yang sama seperti dari layanan daring, tanpa menyerahkan karya itu. Konverter warna, generator skema warna, pengekstrak palet, dan simulator buta warna semuanya berjalan secara lokal dan bekerja sama saat luring begitu halaman selesai dimuat.
OKLCH dan ruang warna yang lebih luas
Hex, RGB, dan HSL semuanya mendeskripsikan warna di dalam gamut sRGB yang telah digunakan layar selama bertahun-tahun. Layar terbaru menampilkan lebih banyak warna, dan CSS kini bisa menjangkaunya dengan fungsi color() dan ruang Display P3, yang menambahkan hijau dan merah vivid yang tidak bisa direpresentasikan oleh sRGB. Pergeseran yang lebih besar adalah OKLCH, sebuah cara penulisan warna sebagai kecerahan (lightness), intensitas warna (chroma), dan rona (hue) yang mencerminkan cara mata sesungguhnya mempersepsikan kecerahan. Dalam HSL, warna kuning dan biru dengan nilai lightness yang sama, misalnya 50%, terlihat sangat berbeda: kuning tampak terang, biru tampak gelap. Dalam OKLCH, mempertahankan nilai lightness tetap dan hanya mengubah hue membuat kecerahan yang dipersepsikan tetap konsisten. Hal ini memudahkan pembangunan palet warna di mana setiap nuansa mencapai target kontras yang sama hanya dengan mengunci satu angka, tanpa perlu menyetel setiap warna satu per satu.
Alat dalam artikel ini
- Konverter WarnaKonversi warna antara HEX, RGB, HSL, HSV, dan CMYK. Pemeriksa kontras WCAG disertakan. Tanpa unggah.
- Generator Skema WarnaBuat palet komplementer, analog, triadik, tetradik, dan monokromatik dari warna dasar. Tanpa unggah.
- Ekstrak palet warnaEkstrak warna dominan dari gambar sebagai swatch HEX. Salin warna mana pun. Tanpa unggah.
- Simulator kebutaan warnaSimulasikan protanopia, deuteranopia, tritanopia, dan akromatopsia pada gambar. Tanpa unggah.
Pertanyaan yang sering diajukan
Apa perbedaan antara hex dan RGB?
Keduanya adalah dua cara menulis warna yang sama. Hex mengemas kanal merah, hijau, dan biru menjadi kode enam karakter dalam basis 16, sedangkan RGB mencantumkan tiga kanal yang sama sebagai angka desimal dari 0 hingga 255. #ff0000 dan rgb(255, 0, 0) adalah merah yang identik. Hex ringkas dan umum dalam CSS serta berkas desain, RGB lebih mudah dibaca sekilas, dan mengonversi di antara keduanya tidak mengubah apa pun pada warnanya sendiri.
Bagaimana saya tahu apakah warna saya terbaca bagi pengguna buta warna?
Jalankan palet Anda melalui sebuah simulator buta warna, yang menggambar ulang warna Anda sebagaimana dilihat seseorang dengan tiap jenis penglihatan warna yang umum. Perhatikan pasangan yang menyatu menjadi corak yang sama, terutama merah dan hijau. Kebiasaan paling aman adalah tidak pernah memakai warna sebagai satu-satunya petunjuk: dukung dengan teks, ikon, atau pola, dan jaga perbedaan kecerahan yang jelas antara latar depan dan latar belakang agar maknanya bertahan bahkan ketika ronanya tidak.