Anda menemui warna sempurna dalam format HEX, tetapi alat reka bentuk yang anda gunakan memerlukan RGB. Atau pelanggan menghantar warna dalam RGB dan anda memerlukan nilai HSL untuk CSS anda. Penukaran format warna adalah tugas harian untuk pereka dan pembangun. Penukar Warna kami menjadikannya segera.
Apa yang anda perlukan
- Nilai warna dalam mana-mana format (HEX, RGB, HSL, atau lain-lain)
- Pelayar web (Chrome, Firefox, Safari, atau Edge)
- Tiada akaun atau pemasangan diperlukan
Panduan langkah demi langkah
Masukkan nilai warna anda
Buka alat Penukar Warna. Taip atau tampal nilai warna anda dalam mana-mana format yang disokong. Contohnya, masukkan #3B82F6 sebagai nilai HEX, rgb(59, 130, 246) sebagai RGB, atau hsl(217, 91%, 60%) sebagai HSL. Alat mengenali format secara automatik.
Lihat semua penukaran format
Alat memaparkan warna anda dengan segera dalam setiap format yang disokong: HEX, RGB, HSL, dan banyak lagi. Anda boleh melihat pratonton langsung warna bersama semua nilai setaraanya. Jika anda perlu melaraskan warna, gunakan pemilih warna untuk memperhalusinya secara visual.
Salin format yang anda perlukan
Klik butang salin di sebelah mana-mana format untuk menyalin nilai ke papan klip anda. Tampalkannya terus ke dalam fail CSS, alat reka bentuk, atau di mana sahaja anda memerlukannya. Tiada perlu menaip semula secara manual.
Baik untuk diketahui Penukar Warna berjalan sepenuhnya dalam pelayar anda. Ia berfungsi di luar talian setelah dimuatkan dan tidak memerlukan akaun atau pemasangan.
Memahami format warna
Alat dan konteks berbeza menggunakan format warna yang berbeza. Inilah bila menggunakan setiap:
HEX
Format paling biasa di web. Warna HEX bermula dengan # diikuti oleh enam aksara (huruf dan nombor), seperti #FF5733.
- Digunakan dalam: CSS, HTML, alat reka bentuk (Figma, Sketch, Photoshop)
- Format:
#RRGGBBdi mana setiap pasangan adalah nilai heksadesimal dari 00 hingga FF - Contoh:
#3B82F6(biru sederhana)
RGB
Menerangkan warna menggunakan komponen Merah, Hijau, dan Biru, setiap satu dari 0 hingga 255.
- Digunakan dalam: CSS (fungsi
rgb()), bahasa pengaturcaraan, pencahayaan LED - Format:
rgb(merah, hijau, biru) - Contoh:
rgb(59, 130, 246)
HSL
Menerangkan warna menggunakan Rona (0-360 darjah pada roda warna), Ketepuan (0-100%), dan Kecerahan (0-100%).
- Digunakan dalam: CSS (fungsi
hsl()), teori warna, sistem reka bentuk - Format:
hsl(rona, ketepuan%, kecerahan%) - Contoh:
hsl(217, 91%, 60%)
Petua HSL adalah format yang paling intuitif untuk melaraskan warna. Mahu warna yang lebih cerah? Tingkatkan nilai kecerahan. Mahu ton yang lebih ditapis? Kurangkan ketepuan. Ini menjadikan HSL ideal untuk membina sistem warna dan mencipta variasi dari warna asas.
Bila menggunakan format yang mana
| Situasi | Format yang disyorkan |
|---|---|
| Menulis CSS dengan tangan | HEX (pendek dan biasa) atau HSL (mudah diubah) |
| Spesifikasi alat reka bentuk | HEX (standard industri) |
| Manipulasi warna dinamik dalam kod | HSL (paling mudah disesuaikan secara atur cara) |
| Menyampaikan warna kepada pelanggan | HEX (paling dikenali secara universal) |
| Reka bentuk cetakan | CMYK (berasingan dari format skrin) |
Melangkaui warna tunggal
Setelah anda menukar warna, anda mungkin mahu meneroka alat berkaitan:
- Penjana Kecerunan: Cipta kecerunan CSS yang halus menggunakan warna anda. Masukkan dua warna atau lebih dan dapatkan kod kecerunan sedia untuk ditampal ke lembaran gaya anda.
- Penjana Palet Warna: Jana palet warna yang harmoni berdasarkan warna permulaan anda. Dapatkan skim warna komplementari, analog, triadik, dan lain-lain secara automatik.
Alat-alat ini berfungsi beriringan dengan Penukar Warna untuk membantu anda membina sistem warna lengkap untuk projek anda.
Penting Warna boleh kelihatan berbeza pada skrin yang berbeza kerana penentukuran paparan, profil warna, dan tetapan kecerahan. Apabila ketepatan warna adalah kritikal (penjenamaan, reka bentuk cetakan), sentiasa sahkan warna anda pada medium sasaran, bukan hanya pada skrin anda.
Soalan yang sering ditanya
Apakah perbezaan antara HEX dan RGB?
Ia mewakili maklumat yang sama dalam notasi berbeza. HEX menggunakan heksadesimal (asas-16) dan RGB menggunakan desimal (asas-10). #FF0000 dan rgb(255, 0, 0) kedua-duanya adalah merah tulen.
Bolehkah saya menukar ke CMYK untuk cetakan? Format warna skrin (HEX, RGB, HSL) dan format cetakan (CMYK) adalah model warna yang berbeza secara asasnya. Penukaran matematik wujud, tetapi untuk warna cetakan yang tepat anda perlu menggunakan alat pengurusan warna profesional.
Bagaimana pula dengan ketelusan (alpha)?
HEX menyokong alpha dengan dua aksara tambahan (#3B82F680). RGB dan HSL menyokongnya sebagai fungsi rgba() dan hsla(). Penukar Warna mengendalikan format-format ini juga.
Langkah seterusnya
Dengan warna anda ditukar, cuba Penjana Kecerunan untuk mencipta kecerunan CSS yang indah, atau gunakan Penjana Palet Warna untuk membina skim warna lengkap di sekitar warna pilihan anda.