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.
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:
- Öğeler panelinde bir öğe seçin.
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.
Hesaplanan değeri incelemek için Hesaplanan bölmesini kullanın.
- Renk Seçici'yi açmak için bir rengin yanındaki önizleme karesini tıklayın.
- 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:
- Gölgeler.
- Damlalık. Damlalık ile herhangi bir yerden renk örnekleme konusuna bakın.
- Panoya kopyala. Görüntü değeri'ni panonuza kopyalayın.
- Görüntülenecek değer. Seçilen renk alanının bağımsız değişkenleri.
- Kontrast oranı. Yalnızca
color
değerleri için kullanılabilir.color
ilebackground-color
arasındaki farktır. - Renk paleti. Rengini karenin rengiyle değiştirmek için ilgili kareyi tıklayın.
- 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. - Renk dairesi. Görüntü değerini değiştirmek için bu daireyi gölgeler boyunca sürükleyin.
- Ton kaydırma çubuğu.
- Opaklık kaydırma çubuğu.
- 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.
- Kontrast oranını genişlet. Kontrastı düzeltme olanağı sunan ilgili bölümü açar.
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:
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.
Aşağıdaki renk alanlarından birini seçin:
Veya yeni alanlardan biri:
İ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.
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
color
beyanında kontrast sorununu düzeltmek için:
color
değerinin yanındaki Renk Seçici'yi açın.- Kontrast oranı bölümünü genişletin.
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.
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:
- 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.
- Damlalık etkinken, fareyle hedef rengin üzerine gelin ve örneklemek için tıklayın.
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.