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

Jecelyn Yeen

Sofia Emelianova

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

Untuk mengetahui ruang warna baru lebih dalam, 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 Gaya, temukan deklarasi color atau *-color yang ingin Anda ubah.

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

   

Untuk memeriksa nilai yang dihitung, gunakan panel Computed.

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

Elemen Pemilih Warna

Berikut adalah deskripsi setiap elemen UI Color Picker:

1. Nuansa.
2. Pipet. Lihat Mengambil sampel warna di mana saja dengan Pipet.
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. Ini adalah perbedaan antara color dan background-color.
6. Palet warna. Klik kotak untuk mengubah warna menjadi warna kotak.
7. Batas gamut. Baris 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 ke seluruh nuansa untuk mengubah nilai tampilan.
9. Penggeser hue.
10. Penggeser opasitas.
11. Pengalih nilai tampilan. Pilih ruang warna dari menu drop-down. Lihat Mengonversi warna.
12. Perluas rasio kontras. Membuka bagian yang sesuai yang memungkinkan Anda Memperbaiki kontras.

13. Pengalih palet warna. Klik tombol 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 akan mencari semua warna dalam stylesheet Anda.

Memilih ruang warna

Untuk memilih ruang warna:

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

   

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 antar-ruang warna dengan Pengalih nilai tampilan, DevTools akan otomatis mengonversi nilai.

Arahkan kursor ke ikon untuk melihat nilai aslinya.

Video berikutnya menunjukkan cara kerja konversi.

Memperbaiki kontras

Untuk memperbaiki masalah kontras untuk deklarasi color:

1. Buka Pemilih Warna di samping nilai color.
2. Luaskan bagian Rasio kontras .

3. Gunakan warna yang disarankan yang mematuhi pedoman:

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

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

Mengambil sampel warna di mana saja dengan Pipet

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

Untuk memilih warna dari mana saja di layar:

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

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