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

Jecelyn Yeen

Sofia Emelianova

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

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

Untuk mengetahui pembahasan mendalam tentang ruang warna baru, lihat Panduan Warna CSS High Definition.

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 Gaya, 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 samping fungsi color-mix(): . Persimpangan adalah pratinjau warna yang dihasilkan.

Untuk memeriksa nilai yang dihitung, gunakan panel Dihitung.

1. Klik kotak pratinjau di samping warna untuk membuka Pemilih Warna.
2. Untuk mengubah warna, gunakan elemen UI Pemilih Warna.

Elemen Pemilih Warna

Berikut deskripsi setiap elemen UI Pemilih Warna:

1. Shades.
2. Pipet. Lihat Mengambil sampel warna di mana saja dengan Alat Penyalin Warna.
3. Salin ke papan klip. Salin Nilai tampilan ke papan klip Anda.
4. Nilai tampilan. Argumen ruang warna yang dipilih.
5. Rasio kontras. Hanya tersedia untuk nilai color. Perbedaannya adalah color dan background-color.
6. Palet warna. Klik persegi untuk mengubah warna menjadi warna persegi tersebut.
7. Batas gamut. Garis ini hanya tersedia untuk ruang warna baru dan fungsi color(). Model 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 warna untuk mengubah nilai tampilan.
9. Penggeser corak warna.
10. Penggeser opasitas.
11. Pengganti 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 yang memungkinkan Anda Memperbaiki kontras.

13. Pengganti 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 membuat palet ini, DevTools mencari semua warna dalam stylesheet Anda.

Pilih ruang warna

Untuk memilih ruang warna:

1. Klik sambil menekan Shift 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).

Mengonversi warna

Saat Anda beralih di antara ruang warna dengan Pengalih nilai tampilan, DevTools akan otomatis mengonversi nilai.

Perhatian: Saat mengonversi dari HD ke non-HD, DevTools memangkas gamut agar sesuai dengan ruang dan menandai nilai yang dipangkas dengan ikon peringatan .

Arahkan kursor ke ikon untuk melihat nilai aslinya.

Video berikutnya menunjukkan konversi dalam tindakan.

Memperbaiki kontras

Poin penting: Pemilih Warna menghitung rasio kontras hanya untuk nilai color dan relatif terhadap nilai background-color masing-masing. Jadi, hanya nilai color yang memiliki bagian Rasio kontras.

Untuk memperbaiki masalah kontras pada pernyataan color:

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

3. Gunakan warna yang disarankan yang mematuhi pedoman:

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

Secara default, Pemilih Warna menyarankan nilai yang sesuai dengan APCA.

Atau, Anda dapat menyetelnya untuk menyarankan nilai yang sesuai dengan pedoman WebAIM. Di Setelan > Preferensi > Elemen, hapus tanda centang Advanced Perceptual Contrast Algorithm (APCA)....

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

Mengambil sampel warna di mana saja dengan Alat Tetes

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

Untuk memilih warna dari mana saja di layar:

1. Buka Pemilih Warna dan lakukan salah satu hal berikut:
   • Klik tombol .
   • Tekan C untuk mengaktifkan Penetes. Untuk menonaktifkan, tekan Escape.
2. Dengan Penyalin warna yang aktif, arahkan kursor ke warna target, lalu klik untuk mengambil sampel.

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

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