Renk dönüştürücü

Renk dönüştürücü, HEX, HEX alfa, RGB, RGBA, HSV, HSL veya HSLA biçiminde girilen bir rengi birden fazla eşdeğer renk biçimine dönüştüren ücretsiz bir araçtır.

Hangi renk biçimlerini dönüştürebilirim?

HEX, HEX alfa, RGB, RGBA, HSV, HSL veya HSLA biçiminde bir değer girebilir, desteklenen tüm biçimlerdeki karşılıklarını görebilirsin. Bu özellik, bir tasarım şartnamesi, stil sayfası veya üçüncü taraf API aynı rengi farklı bir biçimde gösterdiğinde işe yarar.

• HEX, kırmızı, yeşil ve mavi kanalları onaltılık sayı çiftleriyle gösterir. Genellikle #RRGGBB biçimindedir.
• HEX Alfa, bir opaklık kanalı ekler. Modern CSS gösteriminde çoğunlukla #RRGGBBAA biçiminde kullanılır.
• RGB, genellikle 0 ile 255 arasında değişen kırmızı, yeşil ve mavi kanal değerlerini kullanır.
• RGBA, RGB'ye alfa saydamlığı ekler.
• HSV, renk tonu, doygunluk ve değer bileşenlerini tanımlar. Renk seçicilerde yaygındır, ancak standart bir CSS renk işlevi değildir.
• HSL, renk tonu, doygunluk ve açıklık bileşenlerini tanımlar. CSS, HSL'yi doğrudan destekler.
• HSLA, alfa değeri eklenmiş HSL biçimidir.

RGB ve HSL farklı renkleri değil, aynı rengin farklı matematiksel tanımlarını ifade eder. Dönüştürme işlemi, hedef biçimin izin verdiği ölçüde amaçlanan rengi koruyarak gösterim biçimini değiştirmeni sağlar.

Renk dönüştürücü nasıl kullanılır?

Kabul edilen biçimlerden biriyle eksiksiz bir renk değerini Color alanına gir, ardından çıktı alanlarında oluşturulan değerleri görüntüle veya kopyala.

1. Baştaki diyez işareti, virgüller, parantezler, yüzde işaretleri veya varsa alfa bileşeni dahil olmak üzere kaynak değeri eksiksiz kopyala.
2. Değeri Color alanına yapıştır.
3. HEX, HEX Alfa, RGB, RGBA, HSV, HSL ve HSLA alanlarında gösterilen eşdeğer değerleri incele.
4. Hedef sistemin kabul ettiği desteklenen renk biçimlerinden birini seç. CSS kuralları için HEX, RGB, RGBA, HSL ve HSLA yaygın seçeneklerdir. HSV ise daha çok düzenleme arayüzlerinde ve renk hesaplamalarında kullanılır.

Dönüştürme işlemi sunucuda gerçekleştirilir. Girdiğin değer HTTPS üzerinden sunucuya iletilir ve saklanmaz. Tek bir renk değeri nadiren hassas bilgi sayılır. Yine de henüz yayımlanmamış bir paleti veya tasarım belirteçleri kümesini çevrim içi bir hizmete göndermeden önce bunların gizli olup olmadığını değerlendir.

Boşluklar ve noktalama işaretleri RGB, HSL ve ilgili diğer söz dizimlerinin bir parçasıdır. Yüzde işaretleri ise yüzde değerlerini ayırt eder. Tek başına bir sayı, boş bir değer veya rastgele metin bir renk belirtmez. Aksanlı ya da Latin alfabesi dışındaki metinlerin de bu sayısal biçimlerde tanımlanmış bir anlamı yoktur.

Dönüştürülen değerleri nasıl okumalıyım?

Her sonucu aynı rengin başka bir gösterimi olarak değerlendir. Kanal aralıklarına, yüzdelere ve alfa saydamlığına özellikle dikkat et. Hangi alanı kopyalaman gerektiği, değeri alacak sistemin desteklediği renk gösterimine bağlıdır.

Altı basamaklı HEX biçiminde ilk çift kırmızıyı, ikinci çift yeşili, üçüncü çift ise maviyi temsil eder. Örneğin #336699, 33, 66 ve 99 onaltılık kanal değerlerini içerir. Bunların ondalık RGB karşılıkları sırasıyla 51, 102 ve 153'tür.

Renk tonu genellikle renk çemberindeki bir açıyla ifade edilir. Doygunluk ile açıklık veya değer çoğunlukla yüzde olarak gösterilir. HSL açıklığı ile HSV değeri farklı yöntemlerle hesaplanır. Bu nedenle yüzdeleri aynı özelliği ölçüyormuş gibi karşılaştırmamalısın.

Alfa, opaklığı tanımlar. Tamamen opak bir renk için alfa destekleyen bir biçim gerekmez, ancak yarı saydam bir renk için gerekir. RGBA veya HSLA rengini düz RGB, HSL ya da altı basamaklı HEX biçimine kopyalarsan hedef gösterimde alfa kanalını kaydedecek bir alan bulunmaz.

Bu dönüştürücü, ayrıntılı tanılama mesajları veren bir söz dizimi doğrulayıcısı olarak belgelenmemiştir. Hatalı bir girdide soruna yol açan karakteri tam olarak belirlemesini bekleme. HEX değerinde diyez işaretinin eksik olması, eşleşmeyen parantezler, atlanan yüzde işaretleri, beklenen aralığın dışındaki alfa değerleri veya HSL ile RGB kanal kurallarının karıştırılması yaygın renk söz dizimi hatalarıdır.

Örnek renk dönüşümleri

Kısa bir örnek, HEX, RGB, HSL ve HSV arasındaki ilişkiyi gösterir. Saf kırmızı aşağıdaki eşdeğer biçimlerde yazılabilir.

• HEX girdisi #ff0000
• RGB karşılığı rgb(255, 0, 0)
• HSL karşılığı hsl(0, 100%, 50%)
• HSV karşılığı hsv(0, 100%, 100%)

Doygunluğu daha düşük bir renk olan #336699, rgb(51, 102, 153) ile eşdeğerdir. HSL gösterimi hsl(210, 50%, 40%) olurken HSV gösteriminde renk tonu 210 derece, doygunluk yaklaşık 66.7% ve değer 60% olur. Bir arayüz, pratikteki anlamı değiştirmeden ondalık değerleri yuvarlayabilir veya boşluk kullanımını değiştirebilir.

Saydamlık da anlaşılır bir örnek sunar. rgba(255, 0, 0, 0.5) ve hsla(0, 100%, 50%, 0.5), kırmızıyı yarı opak olarak tanımlar. Yaygın sekiz basamaklı CSS HEX kuralına göre karşılık gelen değer #ff000080 olur. Buradaki 80, nicelenmiş alfa baytıdır.

Renk dönüştürmek ne zaman faydalıdır?

Rengi alacak uygulama farklı bir gösterim istiyorsa veya başka bir biçim hata ayıklamayı kolaylaştırıyorsa renk dönüştürmek faydalıdır. Figma'daki bir değeri CSS özel özelliğine çevirmek, Chrome DevTools'ta bulunan bir RGBA değerini kontrol etmek, API yükündeki renk alanlarını hazırlamak ya da dağıtımdan önce üçüncü taraf tema verilerini incelemek sık karşılaşılan kullanım örnekleridir.

Mevcut renk gösterimi hedef tarafından zaten destekleniyorsa dönüştürme genellikle gereksizdir. Yalnızca makine tarafından okunabilir CSS elde etmek için altı basamaklı HEX değerini RGB'ye çevirmenin pek faydası yoktur. Ayrıca biçimler arasında ileri geri dönüşüm yapmak HSL veya HSV değerlerinde yuvarlamaya yol açabilir. Benzer şekilde, tüm renklerin tamamen opak olduğu biliniyorsa alfa kanalı ekleme.

Bilinen bir değeri dönüştürmek yerine görsel olarak renk seçmen gerekiyorsa Renk seçici daha doğrudan bir araçtır. Renk dönüştürme, kontrast testinin, renk körlüğü simülasyonunun veya renk profili yönetiminin yerini de tutmaz. Sayısal değerlerin eşdeğer olması, ön plan metninin WCAG kontrast gereksinimlerini karşıladığını kanıtlamaz.

Sık sorulan sorular

Dönüştürücü CSS renk adlarını kabul ediyor mu?

Hayır. Belgelenen giriş biçimleri HEX, HEX alfa, RGB, RGBA, HSV, HSL ve HSLA'dır. Bu nedenle red, rebeccapurple veya transparent gibi adlar desteklenen girdiler arasında yer almaz. Adlandırılmış bir rengi girmeden önce sayısal CSS değerine dönüştür.

Üç basamaklı HEX değeri girebilir miyim?

Kabul edilen girdiler arasında HEX bulunur, ancak desteklenen HEX uzunlukları belgelenmemiştir. Öngörülebilir bir sonuç için #369 gibi kısaltmaları #336699 biçimine genişlet. Aynı ilke, alfa içeren dört basamaklı kısaltmalar için de geçerlidir.

Renk değeri yerine CSS bildirimi yapıştırabilir miyim?

Tam bildirimi değil, yalnızca renk değerini gir. Örneğin özellik adı ve noktalı virgül rengin parçası olmadığından color: #336699; yerine #336699 kullan. JSON'dan veya bir yapılandırma dosyasından değer kopyalarken başındaki ve sonundaki tırnak işaretlerini kaldır.

Sonuç, geniş renk gamı veya renk profili bilgilerini korur mu?

Desteklenen biçimler arasında geniş renk gamı biçimleri veya gömülü renk profilleri yer almaz. Display P3, Lab, LCH ve ICC profil verileri, mevcut HEX, RGB, HSL ve HSV alanlarının ifade edemediği bilgiler içerir. Profil bilgilerini dikkate alan bir dönüşüm gerektiğinde renk yönetimi destekleyen bir uygulama kullan.

Dönüştürülen değerlerde neden bazen ondalık sayılar oluyor?

Kaynak RGB kanalları tam sayı olsa bile HSL ve HSV hesaplamaları kesirli yüzdeler üretebilir. Bu değerleri yuvarlamak, daha sonra RGB'ye geri dönüştürüldüğünde rengi biraz değiştirebilir. Tasarım belirteçlerini saklarken mevcut hassasiyeti koru. Yalnızca hedef biçim veya kodlama standardı gerektiriyorsa yuvarla.