Renk seçici

Renk seçici, tarayıcınızda bir renk seçmenizi ve bu rengin değerini istediğiniz biçimde almanızı sağlayan ücretsiz bir araçtır.

Renk seçici hangi sonucu verir?

Renk seçici, renk çarkında seçtiğiniz rengin sayısal karşılığını verir. Görünüşte aynı olan bir renk, çoğunlukla onaltılık, RGB, RGBA, HSL veya HSLA olmak üzere farklı biçimlerde ifade edilebilir.

Bu biçimler rengi farklı yöntemlerle tanımlar. Onaltılık ve RGB biçimleri kırmızı, yeşil ve mavi kanalların değerlerini belirtir. HSL ise renk tonu, doygunluk ve açıklık değerlerini kullanır. Bu sayede düzenli ayarlamalar yapmak daha kolay olabilir. Alfa kanalı içeren biçimler ayrıca opaklığı da tanımlar.

• Onaltılık değerler, bir kare işaretinin ardından gelen onaltılık basamaklardan oluşur. Örneğin #336699.
• RGB değerlerinde her kanal genellikle 0 ile 255 arasında bir sayıyla ifade edilir. Örneğin rgb(51, 102, 153).
• HSL değerleri, renk tonu için bir açı; doygunluk ve açıklık için yüzde değerleri kullanır. Örneğin hsl(210, 50%, 40%).
• RGBA ve HSLA biçimleri saydamlık bilgisi ekler. 0 alfa değeri tamamen saydam, 1 ise tamamen opaktır.

CSS, adlandırılmış renkleri de destekler. Ancak bu adlar yalnızca sabit bir renk kümesini kapsar ve kesin tasarım belirteçleri için pek uygun değildir. Oluşturulan sayısal değerleri tasarım sistemleri, stil dosyaları ve uygulama kodu arasında aktarmak genellikle daha kolaydır.

Renk seçici nasıl kullanılır?

Color alanını seçin, renk çarkında istediğiniz noktayı belirleyin ve elde edilen değeri uygulamanızın gerektirdiği biçimde kullanın. Tüm işlemler tarayıcınızda gerçekleştirilir ve renk girdisi hiçbir zaman bir sunucuya yüklenmez.

Mevcut bir arayüz üzerinde çalışıyorsanız kod tabanında zaten kullanılan biçimle başlayın. Böylece gereksiz renk dönüşümlerinden kaçınır ve değişiklik taleplerinin daha kolay incelenmesini sağlarsınız. Üçüncü taraf verilerini incelerken, görünüşte eşdeğer bir renkle değiştirmeden önce değerlerin opaklık bilgisi içerip içermediğini belirleyin.

Yayımlamadan önce uygulanabilecek pratik bir yöntem, hedeflenen rengi seçmek veya yeniden oluşturmak, uygun gösterimi kopyalamak ve gerçek bileşen durumunda kontrol etmektir. Opaklık ve devralınan stiller ekranda oluşan nihai sonucu değiştirebileceği için normal, üzerine gelme, odaklanma ve devre dışı durumlarını ayrı ayrı test edin.

Sonuç nasıl okunur?

Sonucu kullanılan renk modeline göre okuyun ve koda kopyalamadan önce alfa bileşeni olup olmadığını kontrol edin. RGB biçiminde her kanal değeri, ilgili kırmızı, yeşil veya mavi bileşenin yoğunluğunu belirler. HSL biçiminde renk tonu renk çarkı üzerinde ilerler; doygunluk rengin yoğunluğunu, açıklık ise siyah ile beyaz arasındaki dengeyi kontrol eder.

CSS veya yapılandırılmış verilerde renk söz diziminin kurallarına eksiksiz uyulmalıdır. Elle düzenleme sırasında sık yapılan hatalar şunlardır:

• onaltılık CSS değerinin başındaki kare işaretini yazmamak;
• standart onaltılık uzunluklar arasında yer almayan beş veya yedi basamak kullanmak;
• RGB uygulamasının kanal sayıları beklediği yerde yüzde değerleri kullanmak;
• eski RGB söz diziminde virgülleri unutmak veya birbiriyle uyumsuz eski ve modern söz dizimlerini karıştırmak;
• alfa içeren bir değeri yalnızca altı basamaklı onaltılık değerleri kabul eden bir yazılıma kopyalamak;
• CSS'nin 0.5 gibi noktalı bir ondalık sayı gerektirdiği yerde 0,5 gibi ondalık virgül kullanmak.

Renk seçici renk değerleri oluşturur, genel amaçlı bir CSS doğrulayıcı değildir. Çevresindeki bir bildirimin, JSON belgesinin veya tema dosyasının geçerli olduğunu kanıtlamaz. Bu nedenle renk değerinin dışındaki söz dizimi hatalarının ilgili ayrıştırıcı ya da geliştirme aracıyla ayrıca kontrol edilmesi gerekir.

Örnek renk dönüşümleri

Altı basamaklı onaltılık bir renkte her basamak çifti sırasıyla kırmızı, yeşil ve maviye karşılık gelir. Örneğin aşağıdaki gösterimlerin tümü aynı opak rengi tanımlar.

Onaltılık değer #336699

RGB karşılığı rgb(51, 102, 153)

HSL karşılığı hsl(210, 50%, 40%)

Üç basamaklı onaltılık gösterim bir kısaltmadır. Altı basamaklı değeri oluşturmak için her basamak tekrarlanır.

Kısa onaltılık değer #fff

Genişletilmiş onaltılık değer #ffffff

RGB karşılığı rgb(255, 255, 255)

Sekiz basamaklı onaltılık gösterimde alfa değeri, kırmızı, yeşil ve mavi çiftlerinden sonra yer alır. Kanal sırasını farklı kullanan veya sekiz basamaklı gösterimi kabul etmeyen sistemlere dikkat edin. Görsel olarak aynı olan düz bir renk, başka bir arka plan üzerinde opaklık uygulandığında farklı bir sonuç da verebilir.

Hangi renk biçimini seçmeliyim?

Değiştirmek için açık bir neden yoksa hedefin zaten beklediği renk gösterimini seçin. Altı basamaklı onaltılık gösterim kısa ve özdür; CSS değişkenleri ile tasarım belirteci dosyalarında yaygın olarak kullanılır. Yazılım kanal değerlerini doğrudan gösteriyorsa RGB kullanışlıdır. Açıklığı veya doygunluğu değiştirerek birbiriyle ilişkili renkler oluştururken ise HSL tercih edilebilir.

• Kısa ve geniş ölçüde anlaşılır bir gösterim gerektiğinde, opak web renkleri için altı basamaklı onaltılık biçimi kullanın.
• Sekiz basamaklı onaltılık biçimi yalnızca hedef ortam bu gösterimde alfa kullanımını açıkça destekliyorsa kullanın.
• Kırmızı, yeşil ve mavi kanallar üzerinde ayrı ayrı çalışırken RGB veya RGBA kullanın.
• Renk tonu, doygunluk veya açıklık temelinde programatik tema çeşitleri oluştururken HSL veya HSLA kullanın.
• Elinizde zaten bir değer varsa ve görsel olarak yeni bir renk seçmek yerine bu değeri başka bir biçime dönüştürmeniz gerekiyorsa Renk dönüştürücü aracını kullanın.

Ekranda görünen bir RGB değerini baskı özelliği olarak kabul etmeyin. Ticari baskıda CMYK değerleri, ICC renk profili, prova ve matbaayla mutabakat gerekebilir. Tek başına matematiksel dönüşüm, basılı rengin arkadan aydınlatılan bir ekranla aynı görüneceğini garanti edemez.

Renk seçmek veya dönüştürmek ne zaman gereksizdir?

Mevcut değer hedefin gerektirdiği biçimdeyse renk seçmeye veya dönüştürmeye gerek yoktur. Tekrarlanan dönüşümler yuvarlama farklarına, tutarsız harf kullanımına veya kaynak dosyalarda gereksiz değişikliklere yol açabilir.

Bir tema değişkeni gibi adlandırılmış tasarım belirtecini doğrudan bir değerle değiştirmek yerine korumak da daha iyi olabilir. Belirteçler bileşenler arasındaki ilişkiyi korur ve bir rengin merkezi olarak değiştirilmesini sağlar. Benzer şekilde, yalnızca bir makine tarafından kullanılan rengin daha okunabilir bir gösterime dönüştürülmesi gerekmez. Buna ancak bir kişinin değeri incelemesi veya bakımını yapması gerekiyorsa ihtiyaç duyulur.

Hiçbir renk seçici, seçilen rengin yeterli kontrasta sahip olup olmadığını, marka özelliklerine uyup uymadığını veya renk görme bozukluğu olan kişiler tarafından ayırt edilip edilemeyeceğini tek başına belirleyemez. Ön plan ve arka plan birleşimlerini özel bir kontrast aracıyla kontrol edin, ayrıca arayüzü kullanıldığı bağlamda inceleyin.

Sık sorulan sorular

Sonucu CSS değişkenlerinde kullanabilir miyim?

Evet, seçilen gösterimin desteklediğiniz tarayıcılar ve derleme araçları için geçerli bir CSS değeri olması gerekir. Değerin tamamını özel bir özellikte saklayın, ardından var() işleviyle bu özelliğe başvurun. Proje kanalları ayrı ayrı işliyorsa bu kanalları projenin mevcut kuralına göre saklamak daha uygun olabilir.

Aynı renk başka bir ekranda neden farklı görünüyor?

Ekranların kalibrasyonu, parlaklığı, panel teknolojisi ve desteklediği renk gamı farklı olabilir. Tarayıcının renk yönetimi ve işletim sisteminin ekran profili de görüntüyü etkileyebilir. Bu nedenle sayısal değerlerin aynı olması, rengin her cihazda fiziksel olarak aynı görüneceğini garanti etmez.

Onaltılık değerde büyük veya küçük harf kullanmak rengi değiştirir mi?

Hayır. Onaltılık sistemdeki A ile F arasındaki harfler büyük ve küçük harfe duyarlı değildir. Dolayısıyla #AABBCC ile #aabbcc aynı rengi temsil eder. Yalnızca biçimlendirmeden kaynaklanan değişiklikleri önlemek için kod deposunda kullanılan büyük-küçük harf kuralına uyun.

Renk değerlerinde aksanlı veya Latin alfabesi dışındaki karakterler kullanılabilir mi?

Standart onaltılık, RGB ve HSL gösterimleri ASCII rakamlarını, harflerini ve noktalama işaretlerini kullanır. Aksanlı veya Latin alfabesi dışındaki karakterler bu sayısal renk söz dizimlerinin parçası değildir. İlgili dil ve dosya kodlaması izin veriyorsa çevredeki değişken adlarında veya meta verilerde kullanılabilirler.

Saydam renk, hiç renk olmamasıyla aynı şey midir?

Hayır. Tamamen saydam bir renk, tek başına görünmese bile kanal değerlerine sahiptir. Bu gizli kanallar animasyon, ara değer hesaplama, birleştirme veya daha sonra yapılan opaklık değişiklikleri sırasında önem kazanabilir. Uygulama bu tür davranışlara bağlıysa kanal değerlerini koruyun.

Ondalıklı kanal değerlerini yuvarlamalı mıyım?

Ondalıklı renk kanallarını ve alfa değerlerini yalnızca hedefin kabul ettiği ve tutarlı sonuç için gereken hassasiyete göre yuvarlayın. Gereğinden fazla hassasiyet değerlerin incelenmesini zorlaştırır; fazla yuvarlama ise küçük bir renk farkı oluşturabilir. Yuvarlamadan sonra bileşenin ekrandaki görünümünü hedeflenen arka plan ve etkileşim durumlarıyla birlikte kontrol edin.