Artikel

Alat warna untuk web: hex, palet dan kebolehcapaian

Memilih warna untuk laman web kelihatan mudah sehingga anda berhadapan dengan kod hex, triplet RGB dan sudut HSL yang semuanya menerangkan perkara yang sama dengan cara berbeza. Artikel ini menjelaskan bagaimana format itu saling berkaitan, cara menukar satu warna jenama menjadi palet yang boleh digunakan, dan cara memastikan hasilnya kekal mudah dibaca untuk orang yang melihat warna secara berbeza.

Ditulis oleh Bastien Sulyan · Diterbitkan pada 21 Jun 2026

Hex, RGB dan HSL menerangkan warna yang sama

Warna pada skrin dicampur daripada cahaya merah, hijau dan biru. Tatatanda hex menulis ketiga-tiga saluran itu sebagai kod enam aksara seperti #2563eb, di mana setiap pasangan aksara ialah satu saluran daripada 00 ke ff. RGB menulis tiga nombor yang sama dalam perpuluhan, dari 0 ke 255, yang lebih mudah dibaca tetapi tidak menambah apa-apa. HSL mengambil pendekatan berbeza: ia menerangkan warna mengikut rona (kedudukan pada roda warna dari 0 ke 360 darjah), ketepuannya (sejauh mana ia terang) dan kecerahannya (sejauh mana ia hampir kepada putih atau hitam). HSL ialah format yang dirujuk pereka apabila mereka mahu mengubah suai warna, kerana menaikkan kecerahan atau mengalihkan rona ialah satu perubahan intuitif dan bukannya tiga nombor yang terikat bersama. Penukar membolehkan anda berpindah antara ketiga-tiganya supaya anda boleh membaca nilai dalam satu format dan menggunakannya dalam format lain.

Warna ambar yang sama ditulis dalam tiga cara: hex #E8A33D, rgb(232, 163, 61) dan hsl(36, 79%, 57%).

Menukar satu warna menjadi palet

Satu warna jenama jarang mencukupi. Palet yang berkesan biasanya memerlukan satu warna utama, satu atau dua aksen, dan satu set kelabu neutral untuk teks dan latar belakang. Hubungan antara warna mengikut peraturan mudah pada roda warna: warna pelengkap terletak bertentangan antara satu sama lain, warna analog terletak bersebelahan untuk rasa yang tenang, dan set triadik menyebarkan tiga warna secara sama rata untuk kontras tanpa berlanggar. Alat skema warna menerapkan peraturan ini pada warna permulaan anda dan memberi anda kod hex yang sepadan, jadi anda tidak perlu mengira sudut secara manual. Jika anda sudah mempunyai imej yang suasananya anda gemari, pengekstrak palet membaca warna dominan daripadanya, yang merupakan cara pantas untuk mengasaskan laman pada gambar atau logo.

Kontras dan buta warna

Palet yang kelihatan baik pada skrin anda masih boleh menyukarkan pembaca. Kira-kira satu daripada dua belas lelaki dan satu daripada dua ratus wanita mempunyai sejenis kekurangan penglihatan warna, paling biasa kesukaran membezakan merah daripada hijau. Jika satu-satunya isyarat anda untuk ralat ialah teks merah pada butang hijau, pembaca itu akan terlepas. Penyelesaiannya bukan mengelak warna tetapi tidak pernah bergantung pada warna sahaja: gandingkannya dengan ikon, label atau bentuk, dan kekalkan kontras kecerahan yang mencukupi antara teks dan latar belakangnya. Penyimulasi buta warna menunjukkan rupa palet anda di bawah jenis penglihatan warna yang biasa, supaya anda boleh menangkap masalah sebelum ia dihantar dan bukan selepas aduan.

Dua contoh teks pada kad gelap: teks kontras rendah yang gagal WCAG AA di bawah 4.5:1, dan teks mudah dibaca yang lulus pada 4.5:1 atau lebih.

Melakukan semua ini dalam pelayar

Tiada satu pun langkah ini memerlukan pelayan. Menukar kod hex, menjana skema, membaca warna daripada imej dan menyimulasi buta warna semuanya pengiraan kecil yang dikendalikan oleh pelayar dengan serta-merta. Itu penting apabila imej yang anda sampel ialah reka bentuk yang belum dikeluarkan atau logo pelanggan: dengan alat di sini, fail kekal pada peranti anda dan tiada apa-apa yang dimuat naik. Anda mendapat hasil yang sama seperti daripada perkhidmatan dalam talian, tanpa menyerahkan karya seni itu. Penukar warna, penjana skema warna, pengekstrak palet dan penyimulasi buta warna semuanya berjalan secara setempat dan berfungsi dengan cara yang sama di luar talian setelah halaman dimuatkan.

OKLCH dan ruang warna yang lebih luas

Hex, RGB dan HSL semuanya menerangkan warna dalam gamut sRGB yang telah digunakan skrin selama bertahun-tahun. Paparan terkini mampu memaparkan lebih banyak warna, dan CSS kini boleh mencapainya dengan fungsi color() dan ruang Display P3, yang menambah hijau dan merah cerah yang tidak dapat diwakili oleh sRGB. Anjakan yang lebih besar ialah OKLCH, iaitu cara penulisan warna sebagai kecerahan, kroma dan rona yang mengikut cara mata sebenarnya memproses kecerahan. Dalam HSL, warna kuning dan biru pada kecerahan 50% yang sama kelihatan sangat berbeza: kuning nampak terang, biru nampak gelap. Dalam OKLCH, mengekalkan nilai kecerahan dan menukar rona sahaja mengekalkan kecerahan yang dirasai secara konsisten. Ini memudahkan pembinaan palet warna di mana setiap ton mencapai sasaran kontras yang sama dengan mengunci satu nilai, berbanding menala setiap warna secara manual.

Alat dalam artikel ini

Soalan lazim

Apakah perbezaan antara hex dan RGB?

Kedua-duanya ialah dua cara menulis warna yang sama. Hex memuatkan saluran merah, hijau dan biru ke dalam kod enam aksara dalam asas 16, manakala RGB menyenaraikan tiga saluran yang sama sebagai nombor perpuluhan dari 0 ke 255. #ff0000 dan rgb(255, 0, 0) ialah warna merah yang serupa. Hex padat dan biasa dalam CSS dan fail reka bentuk, RGB lebih mudah dibaca sepintas lalu, dan menukar antara keduanya tidak mengubah apa-apa tentang warna itu sendiri.

Bagaimana saya tahu jika warna saya boleh dibaca untuk pengguna buta warna?

Jalankan palet anda melalui penyimulasi buta warna, yang melukis semula warna anda seperti yang akan dilihat oleh seseorang dengan setiap jenis penglihatan warna yang biasa. Perhatikan pasangan yang bergabung menjadi bayang yang sama, terutamanya merah dan hijau. Tabiat paling selamat ialah tidak pernah menggunakan warna sebagai satu-satunya petunjuk: sokong ia dengan teks, ikon atau corak, dan kekalkan perbezaan kecerahan yang jelas antara latar depan dan latar belakang supaya maknanya bertahan walaupun ketika ronanya tidak.