Penukar warna

Penukar warna ialah alat percuma yang menukar warna dalam format HEX, HEX alpha, RGB, RGBA, HSV, HSL atau HSLA kepada beberapa format warna lain yang setara.

Apakah format warna yang boleh saya tukar?

Masukkan nilai HEX, HEX alpha, RGB, RGBA, HSV, HSL atau HSLA untuk melihat nilai sepadannya dalam setiap format yang disokong. Ini berguna apabila spesifikasi reka bentuk, helaian gaya atau API pihak ketiga menggunakan format yang berbeza untuk warna yang sama.

• HEX mewakili saluran merah, hijau dan biru dengan pasangan perenambelasan, biasanya dalam bentuk #RRGGBB.
• HEX Alfa menambahkan saluran kelegapan. Dalam tatatanda CSS moden, format ini lazimnya ditulis sebagai #RRGGBBAA.
• RGB menggunakan nilai saluran merah, hijau dan biru, lazimnya dalam julat 0 hingga 255.
• RGBA menambahkan ketelusan alpha pada RGB.
• HSV menerangkan rona, ketepuan dan nilai. Format ini biasa digunakan dalam pemilih warna, tetapi bukan fungsi warna CSS standard.
• HSL menerangkan rona, ketepuan dan kecerahan. CSS menyokong HSL secara langsung.
• HSLA ialah HSL dengan nilai alpha.

RGB dan HSL ialah penerangan matematik yang berbeza bagi sesuatu warna, bukannya warna yang berlainan. Penukaran membolehkan anda menukar cara warna diwakili sambil mengekalkan warna asal sedekat yang dibenarkan oleh format sasaran.

Bagaimanakah cara menggunakan penukar warna?

Masukkan satu nilai warna yang lengkap dalam medan Color menggunakan salah satu format yang diterima. Kemudian, lihat atau salin nilai yang dijana daripada medan output.

1. Salin nilai sumber dengan tepat, termasuk tanda pagar di hadapan, koma, kurungan, tanda peratus atau komponen alpha jika berkenaan.
2. Masukkan nilai itu ke dalam medan Color.
3. Lihat nilai setara yang dipaparkan di bawah HEX, HEX Alfa, RGB, RGBA, HSV, HSL dan HSLA.
4. Pilih format warna yang disokong oleh sistem sasaran anda. Untuk peraturan CSS, HEX, RGB, RGBA, HSL dan HSLA ialah pilihan yang biasa digunakan. HSV lebih kerap digunakan dalam antara muka penyuntingan dan pengiraan warna.

Penukaran diproses pada pelayan. Input anda dihantar ke pelayan melalui HTTPS dan tidak disimpan. Walaupun satu warna jarang dianggap sensitif, pertimbangkan sama ada palet yang belum diterbitkan atau set token reka bentuk anda bersifat sulit sebelum menghantarnya kepada mana-mana perkhidmatan dalam talian.

Ruang dan tanda baca merupakan sebahagian daripada sintaks RGB, HSL dan format berkaitan, manakala tanda peratus membezakan nilai peratusan. Nombor sahaja, nilai kosong atau teks rawak tidak mengenal pasti sesuatu warna. Teks beraksen dan teks bukan Latin juga tidak mempunyai makna yang ditetapkan dalam format berangka ini.

Bagaimanakah cara membaca nilai yang ditukar?

Baca setiap hasil sebagai tatatanda lain bagi warna yang sama. Berikan perhatian khusus kepada julat saluran, peratusan dan ketelusan alpha. Medan yang perlu disalin bergantung pada tatatanda warna yang disokong oleh sistem penerima.

Dalam HEX enam digit, pasangan pertama mewakili merah, pasangan kedua hijau dan pasangan ketiga biru. Sebagai contoh, #336699 mengandungi nilai saluran perenambelasan 33, 66 dan 99, yang sepadan dengan nilai RGB perpuluhan 51, 102 dan 153.

Rona biasanya dinyatakan sebagai sudut pada roda warna. Ketepuan dan kecerahan atau nilai pula lazimnya dinyatakan sebagai peratusan. Kecerahan HSL dan nilai HSV menggunakan pengiraan yang berbeza, jadi peratusannya tidak patut dibandingkan seolah-olah kedua-duanya mengukur sifat yang sama.

Alpha menerangkan kelegapan. Warna yang legap sepenuhnya tidak memerlukan format dengan sokongan alpha, tetapi warna separa telus memerlukannya. Jika anda menyalin warna RGBA atau HSLA ke dalam RGB biasa, HSL atau HEX enam digit, tatatanda sasaran itu tidak mempunyai ruang untuk merekodkan saluran alpha.

Penukar ini tidak didokumenkan sebagai pengesah sintaks yang menyediakan mesej diagnostik terperinci. Jangan bergantung padanya untuk mengenal pasti aksara tertentu yang menyebabkan input tidak sah. Kesilapan sintaks warna yang biasa termasuk tanda pagar HEX yang tiada, kurungan yang tidak berpadanan, tanda peratus yang tertinggal, nilai alpha di luar julat yang dijangkakan atau penggunaan bercampur antara konvensyen saluran HSL dengan RGB.

Contoh penukaran warna

Contoh ringkas ini menunjukkan kaitan antara HEX, RGB, HSL dan HSV. Merah tulen boleh ditulis dalam 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 yang kurang tepu, #336699 bersamaan dengan rgb(51, 102, 153). Perwakilan HSLnya ialah hsl(210, 50%, 40%), manakala perwakilan HSVnya mempunyai rona 210 darjah, ketepuan kira-kira 66.7% dan nilai 60%. Antara muka mungkin membundarkan nilai perpuluhan atau menggunakan jarak yang berbeza tanpa mengubah maksud praktikalnya.

Ketelusan memberikan satu lagi contoh yang mudah. rgba(255, 0, 0, 0.5) dan hsla(0, 100%, 50%, 0.5) kedua-duanya menerangkan warna merah dengan kelegapan separuh. Mengikut konvensyen HEX CSS lapan digit yang lazim, nilai sepadannya ialah #ff000080, dengan 80 sebagai bait alpha yang dikuantumkan.

Bilakah warna perlu ditukar?

Penukaran warna berguna apabila aplikasi penerima memerlukan tatatanda yang berbeza atau apabila perwakilan lain memudahkan penyahpepijatan. Antara situasi biasa termasuk menukar nilai Figma kepada sifat tersuai CSS, menyemak nilai RGBA yang ditemui dalam Chrome DevTools, menyediakan medan warna untuk muatan API atau meneliti data tema pihak ketiga sebelum digunakan.

Penukaran biasanya tidak diperlukan jika tatatanda warna sedia ada sudah disokong oleh sistem sasaran. Menukar HEX enam digit kepada RGB semata-mata untuk CSS yang boleh dibaca mesin tidak banyak memberikan manfaat. Penukaran berulang-alik juga boleh menyebabkan pembundaran pada nilai HSL atau HSV. Begitu juga, jangan tambahkan saluran alpha jika semua warna diketahui legap sepenuhnya.

Jika anda mahu memilih warna secara visual dan bukannya menukar nilai yang sudah diketahui, gunakan Pemilih warna. Penukaran juga bukan pengganti ujian kontras, simulasi buta warna atau pengurusan profil warna. Nilai berangka yang setara tidak membuktikan bahawa teks latar depan memenuhi keperluan kontras WCAG.

Soalan lazim

Bolehkah saya masukkan nama warna CSS?

Tidak. Format input yang didokumenkan hanyalah HEX, HEX alpha, RGB, RGBA, HSV, HSL dan HSLA. Oleh itu, nama seperti red, rebeccapurple atau transparent tidak disenaraikan sebagai input yang disokong. Tukarkan nama warna kepada nilai CSS berangka sebelum memasukkannya.

Bolehkah saya masukkan nilai HEX tiga digit?

Input yang diterima merangkumi HEX, tetapi panjang HEX yang disokong tidak didokumenkan. Untuk mendapatkan input yang boleh dijangka, kembangkan bentuk ringkas seperti #369 kepada #336699. Prinsip yang sama terpakai pada bentuk ringkas empat digit yang mengandungi alpha.

Bolehkah saya tampal pengisytiharan CSS dan bukannya nilai warna?

Masukkan nilai warna, bukan keseluruhan pengisytiharan. Sebagai contoh, gunakan #336699 dan bukannya color: #336699; kerana nama sifat dan koma bertitik bukan sebahagian daripada warna itu sendiri. Buang tanda petik di sekeliling nilai apabila menyalinnya daripada JSON atau fail konfigurasi.

Adakah hasil penukaran mengekalkan gamut luas atau maklumat profil warna?

Tidak. Tiada format gamut luas atau profil warna terbenam disenaraikan sebagai format yang disokong. Data Display P3, Lab, LCH dan profil ICC mengandungi maklumat yang tidak dapat dinyatakan oleh medan HEX, RGB, HSL dan HSV yang tersedia. Gunakan aplikasi dengan pengurusan warna apabila penukaran yang mengambil kira profil diperlukan.

Mengapakah nilai yang ditukar kadangkala mengandungi perpuluhan?

Pengiraan HSL dan HSV boleh menghasilkan peratusan pecahan walaupun saluran RGB sumber terdiri daripada nombor bulat. Pembundaran angka tersebut mungkin mengubah sedikit hasil penukaran semula kepada RGB. Kekalkan ketepatan yang tersedia apabila menyimpan token reka bentuk, kemudian bundarkan hanya jika format sasaran atau piawaian pengekodan memerlukannya.