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. Ayrıca, tek tıklamayla HD olmayan ve HD renkleri oluşturmanıza, dönüştürmenize ve bu renklerde hata ayıklamanıza olanak tanır.

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

Renk Seçici'yi açın ve renkleri değiştirin

Tek tıklamayla renk değerlerini 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 bir kare 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 kullanıcı arayüzü öğelerinin her birinin açıklamasını burada bulabilirsiniz:

1. Gölgeler.
2. Damlalık. Damlalık ile her yerde renk örneği konusuna bakın.
3. Panoya kopyala. Görüntü değeri'ni panonuza kopyalayın.
4. Görüntü değeri. Seçilen renk alanının bağımsız değişkenleri.
5. Kontrast oranı. Yalnızca color değerleri için kullanılabilir. color ile background-color arasındaki fark.
6. Renk paleti. Bir kareyi tıklayarak rengini karenin rengine göre değiştirin.
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. Çizgi, HD olmayan ve HD olmayan içerikleri birbirinden ayırt etmenizi sağlar.
8. Renk dairesi. Görüntü değerini değiştirmek için bu daireyi gölgeler boyunca sürükleyin.
9. Ton kaydırma çubuğu.
10. Opaklık kaydırma çubuğu.
11. Görüntü değeri değiştirici. Açılır listeden bir renk alanı seçin. Renkleri dönüştürme konusuna bakın.
12. Kontrast oranını genişlet. Kontrastı düzeltme işlemini yapmanıza olanak tanıyan ilgili bölümü açar.

13. Renk paleti değiştirici. Şu seçenekler arasında geçiş yapmak için bu düğmeyi tıklayın:

    • Materyal Tasarım paleti.
    • Özel palet. Geçerli rengi bu palete manuel olarak eklemek için simgesini tıklayın.
    • CSS Değişkenleri paletini kullanın. 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 sayfanızdaki tüm renkleri arar.

Renk alanı seçin

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. Bir açılır liste açılır.

   

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

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

   Yeni alanlardan birini de tercih edebilirsiniz:

   • 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 boşluk.

Renkleri dönüştür

Görüntü değeri değiştirici ile renk alanları arasında geçiş yaptığınızda Geliştirici Araçları değerleri otomatik olarak dönüştürür.

Orijinal değeri görmek için fareyle simgenin üzerine gelin.

Bir sonraki videoda dönüşümler uygulamalı olarak gösterilir.

Kontrastı düzelt

color beyanında 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. Yönergelere uygun, önerilen rengi kullanın:

   • Yönergenin yanındaki simgesini tıklayın.
   • Üstteki Gölgeler önizlemesinde, ilgili satırın altındaki Renk dairesini sürükleyin.

Tek seferde tüm kontrast sorunlarının listesini görmek için Web sitenizi daha okunabilir hale getirme kılavuzundaki talimatları uygulayın.

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

Damlalık, hem sayfadaki hem de ekranın herhangi bir yerindeki renklerin örneğini alabilir.

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.
   • C'ı etkinleştirmek için C tuşuna basın. Devre dışı bırakmak için Escape tuşuna basın.
2. Damlalık etkinken hedef rengin üzerine gelin ve örneklemek için tıklayın.

Bu örnekte, Renk Seçici geçerli renk değeri olan rgb(224 255 255 / 15%) gösterilmektedir. Chrome'un dışını tıkladığınızda bu renk pembeye dönüşür.