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

Jecelyn Yeen

Twitter GitHub Ana sayfa

Sofya Emelianova

GitHub

Renk Seçici, color ve *-color beyanlarını değiştirmek için bir GUI sağlar, tek tıklamayla HD olmayan ve HD renkler oluşturmanızı, dönüştürmenizi ve bunlarda hata ayıklamanızı sağlar.

Önemli bilgi: Bu videoda 112'den önceki Chrome Geliştirici Araçları sürümü gösterilmektedir. Sonraki sürümlerde Stiller bölmesi, CSS Renk Düzeyi 4 spesifikasyonundan 12 yeni renk alanı ve 7 yeni gamut, CSS Renk Düzeyi 5

ise color-mix() işlevini destekler.

Yeni renk alanlarıyla ilgili ayrıntılı bilgi 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 sol tarafında, söz konusu rengin önizlemesini gösteren küçük bir kare simge bulunur.

   

   Not: Bu örnekte color-mix() işlevinin yanında kesişen iki daire gösterilmektedir: . Kesişim elde edilen rengin önizlemesidir.

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'deki kullanıcı arayüzü öğelerinin her birinin açıklamasını burada bulabilirsiniz:

1. Gölgeler.
2. Damlalık. Damlalık ile herhangi bir yerden renk örnekleme konusuna bakın.
3. Panoya kopyala. Görüntü değeri'ni panonuza kopyalayın.
4. Görüntülenecek 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 farktır.
6. Renk paleti. Rengini karenin rengiyle değiştirmek için ilgili 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. Çizgi, HD ile HD olmayanı 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.
    Not: Alternatif olarak, açılır menüyü doğrudan açmak için Üst Karakter tuşunu basılı tutarken renk değerinin yanındaki renk önizlemesi simgesini tıklayın.
12. Kontrast oranını genişlet. Kontrastı düzeltme olanağı sunan ilgili bölümü açar.

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

    • Materyal Tasarım paleti.
    • Özel palet. Geçerli rengi bu palete manuel olarak eklemek için düğmesini 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 renkleri arar.

Bir renk alanı seçin

Bir 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.

   Not: Alternatif olarak Renk Seçici'deki Görüntü değeri değiştirici'yi tıklayın.

   

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).

   Veya yeni alanlardan biri:

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

   İsterseniz color(<color_space> X X X) işleviyle tanımlanan bir boşluk da kullanabilirsiniz.

Renkleri dönüştür

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

Dikkat: DevTools, HD'den HD olmayana geçiş yaparken gamutları alana sığacak şekilde kırpar ve kırpılmış değerleri uyarı simgeleriyle işaretler.

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

Bir sonraki videoda dönüşümlerin işleyiş şekli gösteriliyor.

Kontrastı düzelt

Önemli nokta: Renk Seçici yalnızca color değerleri için kontrast oranlarını ve ilgili background-color değerlerine göre hesaplar. Bu nedenle, yalnızca color değerlerinde Kontrast oranı bölümleri vardır.

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.
   • En üstteki Gölgeler önizlemesinde, ilgili çizginin altındaki Renk dairesi'ni sürükleyin.

Not: Renk Seçici varsayılan olarak WebAIM yönergelerini uygulamanızı önerir. Alternatif olarak bunu APCA ile uyumlu değerler önerecek şekilde de ayarlayabilirsiniz: Ayarlar > Denemeler bölümünde, Yeni Gelişmiş Algısal Kontrast Algoritmasını (APCA) etkinleştir

seçeneğini işaretleyin.

Tüm kontrast sorunlarının listesine tek seferde ulaşmak için Web sitenizi daha okunabilir hale getirme kılavuzunu uygulayın.

Damlalık ile istediğiniz yerden renk örneği alın

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

Ekranda herhangi bir yerden bir 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, fareyle hedef rengin üzerine gelin ve örneklemek için tıklayın.

Not: Damlalık, renkleri yalnızca sRGB renk alanında örnekler. Bu alanın dışından örnekleme yaptığınızda, Damlalık rengi en yakın olana doğru kırpar. Renkleri dönüştürme bölümünü inceleyin.

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