Renk Seçici ile HD ve HD olmayan renkleri inceleyip hata ayıklayın

Jecelyn Yeen

Sofia Emelianova

Renk Seçici, color ve *-color bildirimlerini değiştirmek için bir GUI sağlar ve tek bir tıklamayla HD olmayan ve HD renkler oluşturmanıza, dönüştürmenize ve hatalarını ayıklamanıza olanak tanır.

Yeni renk alanları hakkında ayrıntılı bilgi için Yüksek Çözünürlüklü CSS Renk Kılavuzu'na bakın.

Renk seçiciyi açma ve renkleri değiştirme

Renk değerlerini tek tıklamayla değiştirmek için Renk Seçici'yi kullanın:

1. Öğeler panelinde bir öğe seçin.

2. Stiller bölmesinde, değiştirmek istediğiniz color veya *-color bildirimini bulun.

   Her color veya *-color değerinin solunda, o rengin önizlemesini içeren küçük kare bir simge bulunur.

   

Hesaplanan değeri incelemek için Hesaplanan bölmesini kullanın.

1. Renk Seçici'yi açmak için bir rengin yanındaki önizleme karesini tıklayın.
2. Rengi değiştirmek için Renk Seçici'nin kullanıcı arayüzü öğelerinden herhangi birini kullanın.

Renk seçici öğeleri

Renk Seçici'nin her bir kullanıcı arayüzü öğesinin açıklaması aşağıda verilmiştir:

1. Shades.
2. Damlalık. Damlalık ile herhangi bir yerde renk örneği alma başlıklı makaleyi inceleyin.
3. Panoya kopyala'yı tıklayın. Görünen değeri panonuza kopyalayın.
4. Görüntülenen değer. Seçilen renk alanının bağımsız değişkenleri.
5. Kontrast oranı. Yalnızca color değerleri için kullanılabilir. Bu, color ile background-color arasındaki farktır.
6. Renk paleti. Rengi ilgili karenin rengiyle değiştirmek için kareyi tıklayın.
7. Gamut sınırı. Bu çizgi yalnızca yeni renk alanları ve color() işlevi için kullanılabilir. Hem HD hem de HD olmayan renkler üretebilirler. Bu çizgi, HD ve HD olmayan içerikleri ayırt etmenizi sağlar.
8. Renk çemberi. Görüntüleme değerini değiştirmek için bu daireyi tonlar arasında sürükleyin.
9. Ton kaydırma çubuğu.
10. Opaklık kaydırma çubuğu.
11. Değer görüntüleme anahtarı. Açılır listeden bir renk alanı seçin. Renkleri dönüştürme başlıklı makaleyi inceleyin.
12. Kontrast oranını artırın. Kontrastı düzeltmenize olanak tanıyan ilgili bölümü açar.

13. Renk paleti değiştirici. Aşağıdakiler arasında geçiş yapmak için tıklayın:

    • Materyal Tasarım paleti.
    • Özel palet. Mevcut rengi bu palete manuel olarak eklemek için simgesini tıklayın.
    • CSS değişkenleri paleti. Sayfanızdaki tüm özel CSS değişkenlerini (-- ile eklenmiş) listeler.
    • Sayfa renkleri paleti. Geliştirici Araçları, bu paleti oluşturmak için stil sayfalarınızdaki tüm renklere bakar.

Renk alanı seçme

Renk alanı seçmek için:

1. Bir renk değerinin yanındaki önizleme simgesini üst karakter tuşunu basılı tutarak tıklayın. Açılır liste açılır.

   

2. Aşağıdaki renk uzaylarından birini seçin:

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

   Veya yeni alanlardan birini seçin:

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

   Veya color(<color_space> X X X) işleviyle tanımlanan bir alan.

Renkleri dönüştürme

Değer görüntüleme değiştirici ile renk alanları arasında geçiş yaptığınızda DevTools, değerleri otomatik olarak dönüştürür.

Orijinal değeri görmek için imleci simgenin üzerine getirin.

Bir sonraki videoda dönüşümlerin nasıl çalıştığı gösterilmektedir.

Kontrastı düzeltme

color beyanıyla ilgili bir kontrast sorununu düzeltmek için:

1. color değerinin yanındaki Renk Seçici'yi açın.
2. Kontrast oranı bölümünü genişletin.

3. Bir yönergeye uygun olan önerilen rengi kullanın:

   • Kuralların yanındaki simgesini tıklayın.
   • Üstteki Tonlar önizlemesinde, ilgili çizginin altındaki Renk çemberini sürükleyin.

Renk seçici, varsayılan olarak APCA ile uyumlu değerler önerir.

Alternatif olarak, WebAIM yönergelerine uygun değerler önerecek şekilde de ayarlayabilirsiniz. Ayarlar > Tercihler > Öğeler'de Gelişmiş Algısal Kontrast Algoritması (APCA)... onay kutusunun işaretini kaldırın.

Tüm kontrast sorunlarının listesini tek seferde almak için Web sitenizi daha okunabilir hale getirme kılavuzunu inceleyin.

Damlalık ile herhangi bir yerde renk örneği alma

Damlalık, hem sayfadaki hem de ekrandaki herhangi bir yerdeki renkleri örnekleyebilir.

Ekranda herhangi bir yerden renk seçmek için:

1. Renk Seçici'yi açın ve aşağıdakilerden birini yapın:
   • düğmesini tıklayın.
   • Damlalık'ı etkinleştirmek için C tuşuna basın. Devre dışı bırakmak için Escape tuşuna basın.
2. Damlalık aracı etkinken hedef rengin üzerine gelin ve örneklemek için tıklayın.

Bu örnekte, Renk Seçici, mevcut renk değerini rgb(224 255 255 / 15%) olarak gösteriyor. Bu renk, Chrome'un dışını tıkladığınızda pembe olur.