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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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.

    Renk önizleme.

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

color-mix() işlevinin hesaplanan değeri.

  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:

Renk Seçici, açıklama.

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

    Desteklenen tüm renk alanlarını içeren açılır liste.

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

    Yeni alanlardan birini de tercih edebilirsiniz:

    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.

Renk gamı kırpmayı gösteren bir uyarı simgesi ve orijinal değeri içeren bir ipucu.

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ı Genişlet. bölümünü genişletin.

  3. Yönergelere uygun, önerilen rengi kullanın:

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

WebAIM veya APCA yönergelerini içeren genişletilmiş kontrast oranı bölümü.

seçeneğini işaretleyin.

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. 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:
    • Damlalık. 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.

Damlalık&#39;ı ekranın herhangi bir yerinde kullanma.

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.