Pemilih Warna menyediakan GUI untuk mengubah deklarasi color
dan *-color
, serta memungkinkan Anda membuat, mengonversi, dan men-debug warna non-HD dan warna HD dengan sekali klik.
Untuk mempelajari lebih lanjut ruang warna baru, lihat Panduan Warna CSS Definisi Tinggi.
Membuka Pemilih Warna dan mengubah warna
Gunakan Pemilih Warna untuk mengubah nilai warna dengan sekali klik:
- Pilih elemen di panel Elemen.
Di panel Styles, 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.
- Klik kotak pratinjau di samping warna untuk membuka Pemilih Warna.
- Untuk mengubah warna, gunakan salah satu elemen UI Pemilih Warna.
Elemen Pemilih Warna
Berikut adalah deskripsi setiap elemen UI Pemilih Warna:
- Shades.
- Eyedropper. Lihat Mencoba warna di mana saja dengan Eyedropper.
- Salin ke papan klip. Salin Nilai tampilan ke papan klip.
- Nilai tampilan. Argumen ruang warna yang dipilih.
- Rasio kontras. Hanya tersedia untuk
color
nilai. Ini adalah perbedaan antaracolor
danbackground-color
. - Palet warna. Klik persegi untuk mengubah warna kotak tersebut.
- Batas gamut. Garis ini hanya tersedia untuk ruang warna baru dan fungsi
color()
. Kamera dapat menghasilkan warna HD dan non-HD. Garis ini memungkinkan Anda membedakan antara HD dan non-HD. - Lingkaran warna. Tarik lingkaran ini ke bagian bayangan untuk mengubah nilai tampilan.
- Penggeser warna.
- Penggeser opasitas.
- Pengalih nilai tampilan. Pilih ruang warna dari menu drop-down. Lihat Mengonversi warna.
- Perluas rasio kontras. Membuka bagian yang sesuai yang memungkinkan Anda Memperbaiki kontras.
Pengalih palet warna. Klik tombol tersebut 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 di stylesheet Anda.
Memilih ruang warna
Untuk memilih ruang warna:
Shift-klik ikon pratinjau di samping nilai warna. Menu drop-down akan terbuka.
Pilih salah satu ruang warna berikut:
Atau salah satu ruang baru:
Atau ruang yang ditentukan oleh fungsi
color(<color_space> X X X)
.
Konversi warna
Saat Anda beralih antarruang warna dengan Pengalih nilai tampilan, DevTools akan otomatis mengonversi nilai.
Arahkan kursor ke ikon tersebut untuk melihat nilai asli.
Video berikutnya menunjukkan cara kerja konversi.
Perbaiki kontras
Guna memperbaiki masalah kontras untuk deklarasi color
:
- Buka Pemilih Warna di samping nilai
color
. - Luaskan bagian Contrast ratio .
Gunakan warna yang disarankan yang sesuai dengan panduan:
- Klik di samping panduan.
- Pada pratinjau Shades di bagian atas, tarik Lingkaran warna ke bawah garis yang sesuai.
Untuk mendapatkan daftar semua masalah kontras sekaligus, ikuti panduan Membuat situs Anda lebih mudah dibaca.
Cek 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:
- Buka Pemilih Warna dan lakukan salah satu tindakan berikut:
- Klik tombol .
- Tekan C untuk mengaktifkan Eyedropper. Untuk menonaktifkan, tekan Escape.
- Dengan Eyedropper aktif, arahkan kursor ke warna target dan klik untuk mengambil sampel.
Dalam contoh ini, Pemilih Warna menunjukkan nilai warna rgb(224 255 255 / 15%)
saat ini. Warna ini akan berubah menjadi merah muda setelah Anda mengklik di luar Chrome.