HEX Renk Kodunu RGB ve HSL Değerlerine Çevirme
HEX renk kodlarını kolayca doğrulayın; RGB ve HSL formatlarına dönüştürerek tamamlayıcı renk ve ton özelliklerini adım adım inceleyin.
Üç veya altı basamaklı bir onaltılık renk kodunu girdiğinizde bu kod doğrulanır; seçtiğiniz formata bağlı olarak HEX, RGB ve HSL değerlerine dönüştürülür. Çevrim sırasında rengin bileşenlerine göre açık tonlu olup olmadığı da belirlenir.
HEX renk kodunu RGB ve HSL değerlerine dönüştürme
Dijital tasarım ve yazılım projelerinde renklerin farklı formatlarda ifade edilmesi gerekir. CSS dosyalarında genellikle HEX veya HSL tercih edilirken grafik programlarında RGB değerleri öne çıkabilir. Renk Seçici aracı, elinizdeki onaltılık renk kodunu hızlıca doğrular ve standart renk gösterimlerine dönüştürür.
Araç, hem standart altı basamaklı kodları hem de üç basamaklı kısa kodları destekler. Kısa kodlar işlenirken her basamak yinelenerek altı basamağa genişletilir. Giriş metninin başında diyez işareti (#) bulunabilir veya doğrudan kod yazılabilir. Dönüştürme sonucunda elde edilen veriler sayesinde stil sayfalarınızda ya da tasarım şablonlarınızda tutarlı renk gösterimleri kullanabilirsiniz.
Renk seçme adımları ve aracı kullanma
-
Renk giriş alanına üç veya altı basamaklı bir HEX kodu yazın ya da panodan yapıştırın. Örneğin
#3498dbveyaf00yazabilirsiniz. Metnin başındaki ve sonundaki boşluklar sistem tarafından otomatik temizlenir. -
Çıktı biçimi listesinden gereksiniminize uygun seçeneği belirleyin. Tüm gösterimleri aynı anda görmek için Tümü seçeneğini kullanabilir; yalnızca tek bir çıktıya ihtiyaç duyuyorsanız HEX, RGB veya HSL seçeneklerinden birini işaretleyebilirsiniz.
-
Dönüştürme sonucunu inceleyin. Çıktı panelinde standart küçük harfli HEX gösterimi, tam sayılı RGB bileşenleri, yuvarlanmış HSL değerleri ve tamamlayıcı renk kodu listelenir.
-
Hesaplanan değerleri kopyalayarak projenize aktarın. Renk paletiniz için uyumlu tonlar arıyorsanız bir sonraki adımda Renk Uyumu Oluşturucu aracından yararlanabilirsiniz.
Renk formatları ve ton parlaklığını anlama
Seçtiğiniz çıktı formatına göre araç farklı gösterimler üretir. HEX formatı altı basamaklı onaltılık gösterimi verir. RGB çıktısı, kırmızı, yeşil ve mavi kanallarını 0 ile 255 arasında tam sayı değerleriyle tanımlar. HSL çıktısı ise renk tonunu açısal derece, doygunluk ve açıklık oranlarını ise yüzde üzerinden sunar.
Dönüştürme işleminde ayrıca rengin açık tonlu (is_light) olup olmadığı belirlenir. Bu hesaplamada insan gözünün ışık hassasiyetini yansıtan standart formül kullanılır: kırmızı kanal 0,299, yeşil kanal 0,587 ve mavi kanal 0,114 ile ağırlıklandırılır. Toplam ağırlık 128 eşiğinin üzerindeyse renk açık tonlu kabul edilir. Elde edilen durum, zemin ve metin rengi seçiminde fikir verir ancak tek başına bir WCAG erişilebilirlik puanı yerine geçmez.
Uygulamalı dönüşüm örneği
Bir web arayüzünde kullanılan mavi tonunu CSS dosyasında HSL ve RGB olarak tanımlamak istediğinizi varsayalım.
Renk alanına #3498db değerini girin ve çıktı biçimi olarak Tümü seçeneğini belirleyin. Dönüştürme işlemi tamamlandığında şu sonuçlar üretilir:
- HEX:
#3498db - RGB:
rgb(52, 152, 219) - HSL:
hsl(204, 70%, 53%) - Tamamlayıcı Renk:
#cb6724 - Renk Ton Durumu: Açık tonlu (is_light)
Bu çıktılar sayesinde aynı rengi stil dosyanızda şeffaflık veya ton geçişleri için HSL biçiminde, temel arka plan rengi içinse HEX biçiminde güvenle kullanabilirsiniz.
Kullanım sınırları ve dikkat edilmesi gerekenler
- Araç yalnızca geçerli 3 veya 6 basamaklı onaltılık HEX kodlarını kabul eder.
- Doğrudan
rgb(52, 152, 219)gibi fonksiyonel CSS dizeleri veya metinsel renk isimleri girdi olarak kullanılamaz. - Alfa şeffaflık kanalı içeren 8 basamaklı HEX kodları veya RGBA metinleri desteklenmez.
- Açık ton değerlendirmesi formüle dayalı bir sınıflandırmadır; bağımsız bir kontrast uygunluk sertifikasyonu değildir.
Sık yapılan hatalar
En sık karşılaşılan hata, renk kutusuna rgb() veya hsl() metinlerini yapıştırmaktır. Araç sadece onaltılık karakterleri (0-9 ve A-F) işler. Bir diğer yaygın hata, sekiz basamaklı alfa kanallı HEX kodları girmektir; bu tür girdiler geçersiz renk uyarısı verir. Girdinizin yalnızca geçerli basamaklardan oluştuğundan emin olmalısınız.
Sıkça sorulan sorular
Başında diyez işareti olmadan HEX kodu girebilir miyim?
Evet, araç diyez işareti bulunmayan girdileri otomatik olarak geçerli formata tamamlar. Örneğin 3498db veya f00 yazarak dönüştürme yapabilirsiniz.
Üç basamaklı kısa HEX kodları nasıl işlenir?
Üç basamaklı girdilerde her karakter iki kez tekrarlanarak standart altı basamaklı biçime dönüştürülür. Örneğin #f00 kodu #ff0000 olarak hesaplanır.
Açık ton (is_light) durumu nasıl belirlenir?
Kırmızı, yeşil ve mavi kanalları standart ağırlık katsayılarıyla toplanır. Sonuç 128 eşik değerini aşıyorsa renk açık tonlu olarak sınıflandırılır.
RGB metnini doğrudan HEX formatına çevirebilir miyim?
Hayır, araç giriş olarak sadece onaltılık HEX kodlarını kabul eder; fonksiyonel RGB metinleri giriş alanında işlenmez.