Memeriksa dan men-debug warna HD dan non-HD dengan Color Picker

Jecelyn Yeen

Sofia Emelianova

Pemilih Warna menyediakan GUI untuk mengubah pernyataan color dan *-color serta memungkinkan Anda membuat, mengonversi, dan men-debug warna non-HD dan warna HD dengan sekali klik.

Poin penting: Video ini menampilkan versi Chrome DevTools yang lebih awal dari 112. Di versi yang lebih baru, panel Styles mendukung 12 ruang warna baru dan 7 gamut baru dari spesifikasi CSS Color Level 4, dan fungsi color-mix() dari CSS Color Level 5.

Untuk mempelajari ruang warna baru secara mendalam, lihat Panduan Warna CSS Definisi Tinggi.

Membuka Pemilih Warna dan mengubah warna

Gunakan Pemilih Warna untuk mengubah nilai warna dengan sekali klik:

1. Pilih elemen di panel Elemen.

2. Di panel Styles, temukan deklarasi color atau *-color yang ingin Anda ubah.

   Di sebelah kiri setiap nilai color atau *-color, ada ikon persegi kecil dengan pratinjau warna tersebut.

   

   Catatan: Contoh ini menunjukkan dua lingkaran yang berpotongan di sebelah fungsi color-mix(): . Persimpangan adalah pratinjau dari warna yang dihasilkan.

Untuk memeriksa nilai yang dihitung, gunakan panel Computed.

1. Klik persegi pratinjau di samping warna untuk membuka Pemilih Warna.
2. Untuk mengubah warna, gunakan salah satu elemen UI dari Pemilih Warna.

Elemen Pemilih Warna

Berikut adalah deskripsi setiap elemen UI Pemilih Warna:

1. Shades.
2. Pipet. Lihat Menggunakan sampel warna di mana saja dengan Eyedropper.
3. Salin ke papan klip. Salin Nilai tampilan ke papan klip.
4. Nilai tampilan. Argumen ruang warna yang dipilih.
5. Rasio kontras. Hanya tersedia untuk nilai color. Ini adalah perbedaan antara color dan background-color.
6. Palet warna. Klik sebuah persegi untuk mengubah warnanya menjadi warna persegi tersebut.
7. Batas gamut. Baris ini hanya tersedia untuk ruang warna baru dan fungsi color(). Layar ini dapat menghasilkan warna HD dan non-HD. Garis ini memungkinkan Anda membedakan antara HD dan non-HD.
8. Lingkaran warna. Tarik lingkaran ini melintasi bayangan untuk mengubah nilai tampilan.
9. Penggeser hue.
10. Penggeser opasitas.
11. Pengubah nilai tampilan. Pilih ruang warna dari menu drop-down. Lihat Mengonversi warna.
    Catatan: Atau, untuk membuka menu drop-down secara langsung, tahan Shift dan klik ikon pratinjau warna di samping nilai warna.
12. Perluas rasio kontras. Membuka bagian yang sesuai dan memungkinkan Anda Memperbaiki kontras.

13. Pengalih palet warna. Klik untuk beralih antara:

    • Palet Desain Material.
    • Palet kustom. Untuk menambahkan warna saat ini ke palet ini secara manual, klik .
    • Palet Variabel CSS. Mencantumkan semua variabel CSS kustom (ditambahkan dengan --) di halaman Anda.
    • Palet Warna halaman. Untuk menghasilkan palet ini, DevTools mencari semua warna di stylesheet Anda.

Memilih ruang warna

Untuk memilih ruang warna:

1. Tekan Shift-klik ikon pratinjau di samping nilai warna. Daftar drop-down akan terbuka.

   Catatan: Atau, klik Pengubah nilai tampilan di Pemilih Warna.

   

2. Pilih salah satu ruang warna berikut:

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   Atau salah satu ruang baru:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   Atau ruang yang ditentukan oleh fungsi color(<color_space> X X X).

Konversi warna

Saat Anda beralih antar-ruang warna dengan Pengalih nilai tampilan, DevTools otomatis mengonversi nilai.

Perhatian: Saat melakukan konversi dari HD ke non-HD, DevTools memotong gamut agar sesuai dengan ruang dan menandai nilai yang terpotong dengan ikon peringatan .

Arahkan kursor ke ikon untuk melihat nilai asli.

Video berikutnya menunjukkan cara kerja konversi.

Perbaiki kontras

Poin penting: Pemilih Warna menghitung rasio kontras hanya untuk nilai color dan sesuai dengan nilai background-color masing-masing. Jadi, hanya nilai color yang memiliki bagian Contrast ratio.

Guna memperbaiki masalah kontras untuk deklarasi color:

1. Buka Pemilih Warna di samping nilai color.
2. Luaskan bagian Contrast ratio .

3. Gunakan warna yang disarankan yang sesuai dengan panduan:

   • Klik di samping panduan.
   • Pada pratinjau Shades di bagian atas, tarik Lingkaran warna di bawah garis yang sesuai.

Catatan: Secara default, Pemilih Warna menyarankan Anda untuk mengikuti panduan WebAIM. Atau, Anda dapat menetapkannya untuk menyarankan nilai yang sesuai dengan APCA: Di Setelan > Eksperimen, centang Aktifkan Algoritma Kontras Perseptual Lanjutan (APCA) baru)...

Untuk mendapatkan daftar semua masalah kontras sekaligus, ikuti panduan Membuat situs Anda lebih mudah dibaca.

Buat sampel warna di mana saja dengan Eyedropper

Eyedropper dapat mengambil sampel warna dari halaman dan dari mana saja di layar.

Untuk memilih warna dari mana saja di layar:

1. Buka Color Picker dan lakukan salah satu langkah berikut:
   • Klik tombol .
   • Tekan C untuk mengaktifkan Eyedropper. Untuk menonaktifkan, tekan Escape.
2. Dengan Eyedropper aktif, arahkan kursor ke warna target dan klik untuk mengambil sampel.

Catatan: Eyedropper hanya mengambil sampel warna dalam ruang warna sRGB. Saat Anda mengambil sampel di luar ruang ini, Eyedropper akan mengklip warna ke warna terdekat. Lihat Mengonversi warna.

Dalam contoh ini, Pemilih Warna menampilkan nilai warna rgb(224 255 255 / 15%) saat ini. Warna ini akan berubah menjadi merah muda setelah Anda mengklik di luar Chrome.