Pemilih warna

Pemilih warna adalah alat gratis untuk memilih warna di browser dan mendapatkan nilainya dalam format yang dibutuhkan.

Apa yang dihasilkan pemilih warna?

Pemilih warna menghasilkan representasi numerik dari warna yang dipilih pada roda warna. Warna yang terlihat sama dapat dinyatakan dalam beberapa format, paling umum berupa heksadesimal, RGB, RGBA, HSL, atau HSLA.

Setiap format menggambarkan warna dengan cara berbeda. Heksadesimal dan RGB menentukan nilai kanal merah, hijau, dan biru. HSL menggunakan rona, saturasi, dan kecerahan sehingga penyesuaian sistematis bisa lebih mudah dilakukan. Format dengan kanal alfa juga menyatakan opasitas.

• Nilai heksadesimal diawali tanda pagar dan diikuti digit heksadesimal, misalnya #336699.
• Nilai RGB biasanya menyatakan setiap kanal sebagai angka dari 0 hingga 255, misalnya rgb(51, 102, 153).
• Nilai HSL menyatakan sudut rona serta persentase saturasi dan kecerahan, misalnya hsl(210, 50%, 40%).
• RGBA dan HSLA menambahkan transparansi. Nilai alfa 0 berarti sepenuhnya transparan, sedangkan 1 berarti sepenuhnya buram.

CSS juga mendukung nama warna, tetapi pilihannya terbatas pada sekumpulan nama tetap dan kurang cocok untuk token desain yang presisi. Nilai numerik yang dihasilkan biasanya lebih mudah dipindahkan antara sistem desain, lembar gaya, dan kode aplikasi.

Bagaimana cara menggunakan pemilih warna?

Pilih bidang Color, tentukan titik yang diinginkan pada roda warna, lalu gunakan nilai yang dihasilkan dalam format yang dibutuhkan aplikasi. Seluruh proses berlangsung di browser dan input warna tidak pernah diunggah ke server.

Untuk antarmuka yang sudah ada, mulailah dengan format yang digunakan dalam basis kode. Langkah ini menghindari konversi warna yang tidak perlu dan membuat pull request lebih mudah ditinjau. Saat memeriksa data dari pihak ketiga, pastikan dahulu apakah nilainya menyertakan opasitas sebelum menggantinya dengan warna yang tampak setara.

Alur kerja yang praktis sebelum penerapan adalah memilih atau membuat ulang warna yang diinginkan, menyalin notasi yang sesuai, lalu memeriksanya pada status komponen yang sebenarnya. Uji status normal, hover, fokus, dan nonaktif secara terpisah karena opasitas serta gaya yang diwarisi dapat mengubah hasil akhir yang ditampilkan.

Cara membaca hasil

Baca hasil sesuai model warnanya dan periksa komponen alfa sebelum menyalinnya ke dalam kode. Dalam RGB, setiap nilai kanal mengatur intensitas komponen merah, hijau, atau biru yang bersangkutan. Dalam HSL, rona bergerak mengelilingi roda warna, sedangkan saturasi mengatur intensitas warna dan kecerahan mengatur keseimbangan antara hitam dan putih.

Sintaks warna harus ditulis secara tepat saat digunakan dalam CSS atau data terstruktur. Kesalahan yang umum terjadi ketika nilai diedit secara manual meliputi:

• tidak menyertakan tanda pagar di awal nilai heksadesimal CSS;
• menggunakan lima atau tujuh digit heksadesimal, yang bukan panjang hex standar yang valid;
• memasukkan persentase ketika implementasi RGB mengharapkan angka kanal;
• lupa menambahkan koma dalam sintaks RGB lama atau mencampur sintaks lama dan modern yang tidak kompatibel;
• menyalin nilai yang memiliki alfa ke perangkat lunak yang hanya menerima hex enam digit;
• menggunakan koma desimal, seperti 0,5, ketika CSS mengharuskan titik desimal, seperti 0.5.

Pemilih ini menghasilkan nilai warna, bukan berfungsi sebagai validator CSS umum. Alat ini tidak membuktikan bahwa deklarasi di sekitarnya, dokumen JSON, atau file tema sudah valid. Karena itu, kesalahan sintaks di luar nilai warna tetap perlu diperiksa menggunakan parser atau alat pengembangan yang sesuai.

Contoh konversi warna

Warna heksadesimal enam digit memasangkan setiap dua digit dengan kanal merah, hijau, dan biru. Sebagai contoh, representasi berikut menggambarkan warna buram yang sama.

Nilai hex #336699

Padanan RGB rgb(51, 102, 153)

Padanan HSL hsl(210, 50%, 40%)

Hex tiga digit merupakan bentuk singkat. Setiap digit diulang untuk membentuk nilai enam digit.

Nilai hex singkat #fff

Hex lengkap #ffffff

Padanan RGB rgb(255, 255, 255)

Hex delapan digit menyertakan alfa setelah pasangan merah, hijau, dan biru. Berhati-hatilah dengan sistem yang memakai urutan kanal berbeda atau tidak menerima notasi delapan digit. Warna solid yang tampak sama juga dapat memberikan hasil berbeda saat opasitas diterapkan di atas latar belakang lain.

Format warna mana yang sebaiknya dipilih?

Pilih notasi warna yang sudah diharapkan oleh tujuan penggunaan, kecuali ada alasan jelas untuk mengubahnya. Hex enam digit ringkas dan umum digunakan dalam variabel CSS serta file token desain. RGB praktis ketika perangkat lunak menampilkan nilai kanal secara langsung, sedangkan HSL berguna untuk membuat warna terkait dengan menyesuaikan kecerahan atau saturasi.

• Gunakan hex enam digit untuk warna web buram jika keringkasan dan kemudahan dibaca secara luas menjadi pertimbangan.
• Gunakan hex delapan digit hanya jika lingkungan tujuan secara eksplisit mendukung alfa dalam notasi tersebut.
• Gunakan RGB atau RGBA ketika bekerja dengan kanal merah, hijau, dan biru secara terpisah.
• Gunakan HSL atau HSLA untuk membuat variasi tema secara terprogram berdasarkan rona, saturasi, atau kecerahan.
• Gunakan Pengonversi warna jika sudah memiliki nilai dan ingin mengonversinya, bukan memilih warna baru secara visual.

Jangan menganggap nilai RGB di layar sebagai spesifikasi cetak. Percetakan komersial mungkin memerlukan nilai CMYK, profil warna ICC, pemeriksaan hasil cetak, dan kesepakatan dengan pihak percetakan. Konversi matematis saja tidak dapat menjamin warna hasil cetak akan sama dengan warna pada layar yang memancarkan cahaya.

Kapan pemilihan atau konversi warna tidak diperlukan?

Pemilihan atau konversi warna tidak diperlukan jika nilai yang ada sudah menggunakan format yang dibutuhkan oleh tujuan penggunaan. Konversi berulang dapat menimbulkan perbedaan pembulatan, penggunaan huruf besar dan kecil yang tidak konsisten, atau perubahan yang tidak perlu pada file sumber.

Dalam beberapa kasus, sebaiknya pertahankan token desain bernama, seperti variabel tema, daripada menggantinya dengan nilai literal. Token menjaga hubungan antar-komponen dan memungkinkan warna diubah secara terpusat. Demikian pula, warna yang hanya digunakan oleh mesin tidak memerlukan representasi yang lebih mudah dibaca manusia, kecuali seseorang perlu memeriksa atau memeliharanya.

Pemilih warna tidak dapat menentukan sendiri apakah warna yang dipilih memiliki kontras memadai, sesuai dengan spesifikasi merek, atau tetap bisa dibedakan oleh orang dengan gangguan penglihatan warna. Periksa kombinasi warna latar depan dan latar belakang menggunakan alat kontras khusus, lalu tinjau antarmuka dalam konteks sebenarnya.

Pertanyaan umum

Bisakah hasilnya digunakan dalam variabel CSS?

Bisa, asalkan notasi yang dipilih merupakan CSS valid untuk browser dan alat build yang didukung. Simpan nilai lengkap dalam properti kustom, lalu rujuk dengan fungsi var(). Jika proyek memanipulasi kanal secara terpisah, mungkin lebih praktis untuk menyimpan kanal tersebut sesuai konvensi yang sudah digunakan dalam proyek.

Mengapa warna yang sama terlihat berbeda di layar lain?

Setiap layar dapat berbeda dalam hal kalibrasi, kecerahan, teknologi panel, dan dukungan gamut warna. Pengelolaan warna oleh browser serta profil tampilan sistem operasi juga dapat memengaruhi hasil yang ditampilkan. Karena itu, nilai numerik yang sama tidak menjamin tampilan fisik yang identik di setiap perangkat.

Apakah huruf besar dan kecil pada nilai hex mengubah warnanya?

Tidak. Digit heksadesimal A hingga F tidak membedakan huruf besar dan kecil, sehingga #AABBCC dan #aabbcc mewakili warna yang sama. Ikuti konvensi penulisan yang digunakan repositori agar tidak menimbulkan perubahan yang hanya berkaitan dengan pemformatan.

Bisakah nilai warna memuat karakter beraksen atau karakter non-Latin?

Notasi heksadesimal, RGB, dan HSL standar menggunakan digit, huruf, serta tanda baca ASCII. Karakter beraksen atau non-Latin bukan bagian dari sintaks warna numerik tersebut. Karakter itu dapat muncul dalam nama variabel atau metadata di sekitarnya jika bahasa dan pengodean file yang digunakan mendukungnya.

Apakah warna transparan sama dengan tidak ada warna?

Tidak. Warna yang sepenuhnya transparan tetap memiliki nilai kanal meskipun tidak terlihat dengan sendirinya. Kanal tersembunyi tersebut dapat berpengaruh saat animasi, interpolasi, pengomposisian, atau perubahan opasitas berikutnya. Karena itu, pertahankan nilainya jika aplikasi mengandalkan perilaku tersebut.

Haruskah nilai desimal pada kanal dibulatkan?

Bulatkan kanal warna desimal dan nilai alfa hanya hingga presisi yang diterima oleh tujuan penggunaan dan diperlukan agar hasil tetap konsisten. Presisi berlebihan membuat nilai lebih sulit ditinjau, sedangkan pembulatan yang terlalu agresif dapat menimbulkan sedikit perbedaan warna. Setelah membulatkannya, periksa komponen yang ditampilkan terhadap latar belakang dan status interaksi yang dimaksud.