Pemilih warna

Pemilih warna ialah alat percuma yang membolehkan anda memilih warna dalam pelayar dan mendapatkan nilainya dalam format yang diperlukan.

Apakah hasil yang diberikan oleh pemilih warna?

Pemilih warna memberikan perwakilan berangka bagi warna yang dipilih pada roda warna. Warna yang kelihatan sama boleh dinyatakan dalam beberapa format, lazimnya perenambelasan, RGB, RGBA, HSL atau HSLA.

Setiap format menghuraikan warna dengan cara yang berbeza. Perenambelasan dan RGB menetapkan nilai saluran merah, hijau dan biru. HSL menggunakan rona, ketepuan dan kecerahan, yang memudahkan pelarasan secara sistematik. Format dengan saluran alfa turut menyatakan kelegapan.

• Nilai perenambelasan menggunakan tanda pagar diikuti digit perenambelasan, contohnya #336699.
• Nilai RGB biasanya menyatakan setiap saluran sebagai nombor dari 0 hingga 255, contohnya rgb(51, 102, 153).
• Nilai HSL menyatakan sudut rona serta nilai peratusan untuk ketepuan dan kecerahan, contohnya hsl(210, 50%, 40%).
• RGBA dan HSLA menambahkan kelutsinaran. Nilai alfa 0 bermaksud lut sinar sepenuhnya, manakala 1 bermaksud legap sepenuhnya.

CSS juga menyokong nama warna, tetapi pilihan nama terhad kepada set tertentu dan kurang sesuai untuk token reka bentuk yang tepat. Nilai berangka yang dijana biasanya lebih mudah dipindahkan antara sistem reka bentuk, helaian gaya dan kod aplikasi.

Bagaimanakah cara menggunakan pemilih warna?

Pilih medan Color, tentukan titik yang dikehendaki pada roda warna, kemudian gunakan nilai yang terhasil dalam format yang diperlukan oleh aplikasi anda. Semua pemprosesan dilakukan dalam pelayar dan input warna tidak pernah dimuat naik ke pelayan.

Untuk antara muka sedia ada, mulakan dengan format yang sudah digunakan dalam pangkalan kod. Langkah ini mengelakkan penukaran warna yang tidak perlu dan memudahkan semakan permintaan tarik. Apabila memeriksa data pihak ketiga, pastikan sama ada nilainya merangkumi kelegapan sebelum menggantikannya dengan warna yang kelihatan setara.

Aliran kerja yang praktikal sebelum pelaksanaan ialah memilih atau menghasilkan semula warna yang dikehendaki, menyalin notasi yang sesuai, kemudian menyemaknya dalam keadaan sebenar komponen. Uji keadaan biasa, tuding, fokus dan dinyahdayakan secara berasingan kerana kelegapan serta gaya yang diwarisi boleh mengubah hasil paparan akhir.

Cara membaca hasil

Baca hasil berdasarkan model warnanya dan semak sebarang komponen alfa sebelum menyalinnya ke dalam kod. Dalam RGB, setiap nilai saluran mengawal keamatan komponen merah, hijau atau biru yang sepadan. Dalam HSL, rona bergerak mengelilingi roda warna, manakala ketepuan mengawal keamatan warna dan kecerahan mengawal keseimbangan antara hitam dengan putih.

Sintaks warna perlu tepat apabila digunakan dalam CSS atau data berstruktur. Kesilapan lazim semasa penyuntingan manual termasuk:

• tertinggal tanda pagar pada permulaan nilai CSS perenambelasan;
• menggunakan lima atau tujuh digit perenambelasan, yang bukan panjang perenambelasan standard yang sah;
• meletakkan peratusan apabila pelaksanaan RGB memerlukan nombor saluran;
• terlupa koma dalam sintaks RGB lama atau mencampurkan sintaks lama dengan sintaks moden yang tidak serasi;
• menyalin nilai yang mempunyai alfa ke dalam perisian yang hanya menerima perenambelasan enam digit;
• menggunakan koma perpuluhan, seperti 0,5, sedangkan CSS memerlukan titik perpuluhan, seperti 0.5.

Pemilih ini menjana nilai warna dan bukannya berfungsi sebagai pengesah CSS umum. Alat ini tidak membuktikan bahawa pengisytiharan di sekelilingnya, dokumen JSON atau fail tema adalah sah. Oleh itu, ralat sintaks di luar nilai warna masih perlu diperiksa dengan penghurai atau alat pembangunan yang berkaitan.

Contoh penukaran warna

Warna perenambelasan enam digit memadankan setiap pasangan digit dengan merah, hijau dan biru. Sebagai contoh, perwakilan berikut menerangkan warna legap yang sama.

Nilai perenambelasan #336699

Nilai RGB setara rgb(51, 102, 153)

Nilai HSL setara hsl(210, 50%, 40%)

Perenambelasan tiga digit ialah bentuk ringkas. Setiap digit diulang untuk membentuk nilai enam digit.

Nilai perenambelasan ringkas #fff

Perenambelasan penuh #ffffff

Nilai RGB setara rgb(255, 255, 255)

Perenambelasan lapan digit menyertakan alfa selepas pasangan merah, hijau dan biru. Berhati-hati dengan sistem yang menggunakan susunan saluran berbeza atau tidak menerima notasi lapan digit. Warna pepejal yang kelihatan sama juga boleh memberikan hasil berbeza apabila kelegapan digunakan di atas latar belakang lain.

Format warna manakah yang patut saya pilih?

Pilih notasi warna yang sudah diperlukan oleh destinasi, kecuali ada sebab yang jelas untuk menukarnya. Perenambelasan enam digit ringkas dan lazim digunakan dalam pemboleh ubah CSS serta fail token reka bentuk. RGB sesuai apabila perisian memaparkan nilai saluran secara langsung, manakala HSL berguna untuk menghasilkan warna berkaitan dengan melaraskan kecerahan atau ketepuan.

• Gunakan perenambelasan enam digit untuk warna web legap apabila keringkasan dan kemudahan dibaca secara meluas penting.
• Gunakan perenambelasan lapan digit hanya apabila persekitaran sasaran menyokong alfa dalam notasi tersebut secara jelas.
• Gunakan RGB atau RGBA apabila bekerja dengan saluran merah, hijau dan biru secara berasingan.
• Gunakan HSL atau HSLA untuk variasi tema berprogram yang berasaskan rona, ketepuan atau kecerahan.
• Gunakan Penukar warna jika anda sudah mempunyai nilai dan perlu menukarnya, bukannya memilih warna baharu secara visual.

Jangan anggap nilai RGB pada skrin sebagai spesifikasi cetakan. Percetakan komersial mungkin memerlukan nilai CMYK, profil warna ICC, pruf dan persetujuan dengan pihak pencetak. Penukaran matematik semata-mata tidak dapat menjamin bahawa warna cetakan akan sepadan dengan skrin bercahaya.

Bilakah warna tidak perlu dipilih atau ditukar?

Warna tidak perlu dipilih atau ditukar jika nilai sedia ada sudah menggunakan format yang diperlukan oleh destinasi. Penukaran berulang boleh menyebabkan perbezaan pembundaran, penggunaan huruf besar dan kecil yang tidak konsisten, atau perubahan yang tidak perlu pada fail sumber.

Anda juga mungkin lebih baik mengekalkan token reka bentuk bernama, seperti pemboleh ubah tema, daripada menggantikannya dengan nilai harfiah. Token mengekalkan hubungan antara komponen dan membolehkan warna diubah secara berpusat. Begitu juga, warna yang hanya digunakan oleh mesin tidak memerlukan perwakilan yang lebih mudah dibaca manusia, melainkan seseorang perlu memeriksa atau menyelenggaranya.

Pemilih warna sahaja tidak dapat menentukan sama ada sesuatu pilihan mempunyai kontras yang mencukupi, mematuhi spesifikasi jenama atau masih dapat dibezakan oleh individu yang mengalami kekurangan penglihatan warna. Semak gabungan latar depan dan latar belakang menggunakan alat kontras khusus, kemudian periksa antara muka dalam konteks sebenar.

Soalan lazim

Bolehkah hasil ini digunakan dalam pemboleh ubah CSS?

Ya, dengan syarat notasi yang dipilih ialah CSS yang sah untuk pelayar dan alat binaan yang anda sokong. Simpan nilai lengkap dalam sifat tersuai, kemudian rujuk nilai itu menggunakan fungsi var(). Jika projek mengolah saluran secara berasingan, mungkin lebih mudah untuk menyimpan saluran tersebut mengikut kelaziman sedia ada dalam projek.

Mengapakah warna yang sama kelihatan berbeza pada skrin lain?

Setiap paparan berbeza dari segi penentukuran, kecerahan, teknologi panel dan sokongan gamut warna. Pengurusan warna pelayar serta profil paparan sistem pengendalian juga boleh mempengaruhi pemaparan. Oleh itu, nilai berangka yang sepadan tidak menjamin rupa fizikal yang sama pada setiap peranti.

Adakah huruf besar dan kecil dalam nilai perenambelasan mengubah warna?

Tidak. Digit perenambelasan A hingga F tidak peka huruf besar atau kecil, jadi #AABBCC dan #aabbcc mewakili warna yang sama. Ikut kelaziman huruf yang digunakan oleh repositori untuk mengelakkan perubahan pemformatan semata-mata.

Bolehkah nilai warna mengandungi aksara beraksen atau bukan Latin?

Notasi perenambelasan, RGB dan HSL standard menggunakan digit, huruf serta tanda baca ASCII. Aksara beraksen atau bukan Latin bukan sebahagian daripada sintaks warna berangka ini. Aksara tersebut boleh muncul dalam nama pemboleh ubah atau metadata di sekelilingnya jika dibenarkan oleh bahasa dan pengekodan fail yang berkaitan.

Adakah warna lut sinar sama seperti tiada warna?

Tidak. Warna yang lut sinar sepenuhnya masih mempunyai nilai saluran, walaupun nilai itu tidak kelihatan dengan sendirinya. Saluran tersembunyi tersebut boleh mempengaruhi animasi, interpolasi, penggubahan atau perubahan kelegapan pada masa akan datang. Jadi, kekalkan nilainya apabila aplikasi bergantung pada gelagat tersebut.

Perlukah saya membundarkan nilai perpuluhan saluran?

Bundarkan saluran warna perpuluhan dan nilai alfa hanya kepada ketepatan yang diterima oleh destinasi dan diperlukan untuk menghasilkan output yang konsisten. Ketepatan berlebihan menyukarkan semakan nilai, manakala pembundaran yang terlalu kasar boleh menyebabkan sedikit perbezaan warna. Selepas pembundaran, semak komponen yang dipaparkan dengan latar belakang dan keadaan interaksi yang dikehendaki.