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

Jecelyn Yeen

Sofia Emelianova

Renk Seçici, color ve *-color tanımlarını değiştirmek için bir kullanıcı arayüzü sağlar ve HD olmayan ve HD renkleri tek tıklamayla oluşturmanıza, dönüştürmenize ve hata ayıklamanıza olanak tanır.

Yeni renk alanlarıyla ilgili ayrıntılı bilgi için HD CSS Renk Rehberi'ne bakın.

Renk seçiciyi açıp 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, ilgili 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ı aşağıda verilmiştir:

1. Gölgeler.
2. Damlalık. Damlalıkla herhangi bir yerden renk alma başlıklı makaleyi inceleyin.
3. Panoya kopyala'yı tıklayın. Görüntülenen 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. color ile background-color arasındaki fark budur.
6. Renk paleti. Rengi, tıkladığınız karenin rengine değiştirmek için tıklayın.
7. Gama sınırı. Bu satır yalnızca yeni renk alanları ve color() işlevi için kullanılabilir. Hem HD hem de HD olmayan renkler üretebilirler. Bu çizgi, HD ile 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. Görüntüleme değeri değiştirici. Açılır listeden bir renk alanı seçin. Renk dönüştürme başlıklı makaleyi inceleyin.
12. Kontrast oranını artırın. Kontrastı düzeltmenizi sağlayan 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 eklenir) listeler.
    • Sayfa renkleri paleti. DevTools bu paleti oluşturmak için stil sayfalarınızdaki tüm renkleri arar.

Renk alanı seçme

Renk alanı seçmek için:

1. Renk değerinin yanındaki önizleme simgesini üst karakter tuşunu basılı tutarak tıklayın. Açılır bir 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).

   Alternatif olarak, yeni alanlardan birini de kullanabilirsiniz:

   • 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

Görüntüleme değeri 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 fareyle simgenin üzerine gelin.

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

Kontrastı düzeltme

color beyanı için kontrast sorununu düzeltmek üzere:

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

3. Kurala uygun önerilen rengi kullanın:

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

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

Damlalık ile istediğiniz yerde renk alma

Damlalık, hem sayfadan hem de ekranın herhangi bir yerinden renk örnekleyebilir.

Ekranın herhangi bir yerinden 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 etkinken hedef rengin üzerine gelip rengi örneklemek için tıklayın.

Bu örnekte Renk Seçici, geçerli renk değerini rgb(224 255 255 / 15%) olarak gösterir. Chrome'un dışına tıkladığınızda bu renk pembeye döner.