HEX'ten RGB'ye Çevirici

HEX'ten RGB'ye nasıl çevrilir?

1. Girişe bir hex kodu yazın veya yapıştırın, örneğin #ff6600 ya da sadece f60.
2. RGB değerleri, rengin önizleme örneğiyle birlikte anında görünür.
3. Örneğin beklediğiniz renkle eşleştiğini kontrol edin.
4. Kopyala düğmesiyle rgb() dizesini alın; CSS'e yapıştırmaya hazırdır.
5. Ters yön mü lazım? Bu sayfada bağlantısı bulunan RGB'den HEX'e çeviriciyi kullanın.

Bu HEX'ten RGB'ye çevirici ne yapar?

Araç bir hex renk kodunu okur ve aynı rengi üç ondalık kanal olarak döndürür: kırmızı, yeşil ve mavi; her biri 0 ile 255 arasında. Ham sayıların yanı sıra yapıştırmaya hazır bir rgb() dizesi ve canlı bir renk örneği de alırsınız; böylece ne elle hesap yapmanız ne de ff'in veya 66'nın on tabanında ne demek olduğunu bulmak için bir hesap makinesine başvurmanız gerekir.

Bilinçli olarak dar kapsamlıdır. Tek bir işi yapar, hex'i RGB'ye çevirir, üstelik bunu tamamen tarayıcınızda, siz yazdığınız anda yapar. Bu odak, gerçek dosyalarda karşılaştığınız zorlu varyasyonları da nasıl ele aldığını açıklar: 3 basamaklı kısa biçim, isteğe bağlı baştaki #, büyük veya küçük harf ve alfa kanalı taşıyan 8 basamaklı kodlar.

Hesap nasıl çalışır?

Bir hex kodu üç çift onaltılık rakamdır: kırmızı, yeşil, mavi. Her çift 0 ile 255 arasında bir ondalık sayıya çevrilir. Yani #ff6600, ff, 66 ve 00 olarak ayrılır; bunlar 255, 102 ve 0'dır ve rgb(255, 102, 0) sonucunu verir. Kısa kodlarda önce her rakam çiftlenir: #f60, #ff6600 olarak açılır.

Hex ve RGB, aynı sRGB uzayında tamamen aynı rengi tanımlar; dolayısıyla dönüşüm her iki yönde de kayıpsızdır. #RRGGBB, tam da aynı kanal değerlerinin 16 tabanındaki gösterimidir; işte bu yüzden hex'i RGB'ye çevirmek, yuvarlama olmadan ve renk kayması olmadan tam matematiksel dönüşümdür. Hangi gösterimi kullanacağınız ise tamamen çevresindeki sözdiziminin ne beklediğine bağlıdır.

RGB'ye ne zaman gerçekten ihtiyaç duyarsınız?

Günlük tetikleyici şeffaflıktır. Bir marka rehberinden gelen hex kodu size opak bir renk verir ama onu %50 oranında istediğiniz anda kanallara ihtiyacınız olur: rgba(26, 115, 232, 0.5) ya da modern rgb(26 115 232 / 50%) sözdizimi; ikisi de #1a73e8 içinde saklı üç sayıyı ister. Önce çevirmek, göz kararı yapmaktan daha hızlı ve daha az hata çıkarır.

CSS'in ötesinde, HTML canvas API'si, birçok grafik ve animasyon kütüphanesi, SVG öznitelikleri ve bazı eski e-posta istemcileri renkleri ayrı kırmızı, yeşil ve mavi değerler olarak bekler. Bir rengi, sonrasında tek bir kanalı değiştiren bir JavaScript koduna veriyorsanız, üzerinde gerçekten aritmetik yapabileceğiniz biçim RGB'dir.

Alfa kanalı ve 8 basamaklı hex

8 basamaklı bir hex kodu, opaklık için dördüncü bir çift ekler: #1a73e880. İlk altı basamak her zamanki gibi RGB'ye çevrilir, son çift ise 00 ile ff aralığını 0 ile 1 arası bir alfaya eşler. Yani hex'teki 80, ondalık olarak 128'dir; bu da yaklaşık 0.5 opaklıktır ve rgba(26, 115, 232, 0.5) sonucunu verir.

Bu önemlidir çünkü tasarımcılar giderek daha çok Figma veya Sketch'ten dışa aktarılan 8 basamaklı kodlar yapıştırıyor. Rengi ve şeffaflığı iki ayrı olgu olarak ele alın: opaklığı ayarladığınızda RGB üçlüsü asla değişmez, yalnızca sondaki alfa çifti değişir.

RGB ve renk erişilebilirliği

Web erişilebilirlik yönergeleri, metin ile arka planı arasında kontrast oranları belirler ve bunların arkasındaki formüller hex dizesi üzerinde değil, RGB kanal değerleri üzerinde çalışır. Hex kodunuzu RGB'ye çevirmek, örneğin #767676 renkli metnin beyaz bir arka planda normal gövde metni için 4.5:1 eşiğini geçip geçmediğini kontrol etmenin ilk adımıdır.

Dönüşüm tam olduğu için, burada aldığınız RGB sayılarını doğrudan bir kontrast denetleyicisine ya da bağıl parlaklığı hesaplayan bir koda güvenle koyabilirsiniz. Bir renk sınırdaysa, RGB'de tek bir kanalı azıcık kaydırıp geri çevirmek, marka tonundan vazgeçmeden uyumlu bir yakın eşleşme bulmanın kolay bir yoludur.

Kaçınılması gereken yaygın hatalar

Alışılmış hata, bozuk bir koddur: 4 veya 5 karakterlik bir dize, araya kaçmış bir boşluk ya da bir araç yalın rakamları isterken bırakılmış bir #. Geçerli hex 3, 6 veya 8 onaltılık karakterdir; bunun dışındaki her şey ya açılması gereken bir kısa biçimdir ya da doğrudan geçersizdir. Bu çevirici büyük/küçük harfe ve baştaki #'e karşı hoşgörülüdür ama alttaki rengin yine de düzgün biçimlendirilmiş olması gerekir.

Diğer tuzak, hex'in bir şekilde RGB'den daha düşük kaliteli olduğunu ya da tam tersini varsaymaktır. Bunlar iki farklı biçimde yazılmış özdeş sRGB renkleridir. Çevrilmiş bir renk yanlış görünüyorsa, sorun neredeyse her zaman kaynak kodun hatalı olmasıdır, dönüşümün hata katması değil.

İlgili renk araçları

Ters yöne gitmek de en az bunun kadar yaygındır; bu yüzden bir tasarım uygulaması veya damlalık size kompakt bir hex belirteci olarak ihtiyaç duyduğunuz yalın kanal sayılarını verdiğinde bunu RGB'den HEX'e çeviriciyle birlikte kullanın. İkisi de tamdır ve ikisi de yerel olarak çalışır.

Sabit bir rengi çevirmek yerine hâlâ bir renk seçiyorsanız, renk seçici bir tona sürükleyip HEX, RGB ve HSL değerlerini bir arada okumanızı sağlar; CSS gradyan oluşturucu da karar kıldığınız renklerden kopyalamaya hazır doğrusal ve dairesel arka planlar oluşturur.

Sık sorulan sorular

İlgili araçlar