HEX Renk Kodunu RGB ve HSL Değerlerine Dönüştürme

HEX renk kodunu girerek aynı rengin RGB ve HSL gösterimlerini alabilirsiniz. HEX alanını boş bırakırsanız araç #ff5733 varsayılanıyla dönüşüm yapar.

HEX renk kodunu ne için kullanabilirsiniz?

Bu araç, elinizdeki bir HEX renk kodunu RGB ve HSL karşılıklarına çevirmek için kullanılır. Bir tasarım dosyasındaki renk kodunu farklı renk gösterimlerinde incelemek, arayüz çalışmasında değerleri karşılaştırmak veya bir renk kodunun parlaklık sınıflandırmasını görmek istediğinizde yararlı olabilir. Girdi olarak HEX biçimindeki renk değeri kullanılır; RGB ya da HSL değerleri başlangıç girdisi olarak alınmaz.

HEX değeri girmeden de işlem başlatabilirsiniz. Bu durumda araç, belgelenmiş varsayılan değer olan #ff5733 ile dönüşüm yapar. Sonuç, yalnızca tek bir metin biçimiyle sınırlı değildir: büyük ve küçük harfli altı haneli HEX metinleri, RGB ve HSL metin gösterimleri, sayısal RGB ve HSL bileşenleri ve bir lightness sınıflandırması sunulur.

HEX değerini RGB ve HSL biçimlerine dönüştürme

1. HEX renk değerini ilgili giriş alanına yazın. Başında # bulunan bir değer doğrudan kullanılabilir; # işareti olmayan değer için araç bunu ayrıştırmadan önce ekler. Örneğin 3366cc girdisi, ayrıştırma aşamasında #3366cc olarak ele alınır.

2. Üç karakterli kısa HEX biçimini de kullanabilirsiniz. Araç, her karakteri iki kez tekrarlayarak altı karakterli biçime genişletir. Bu nedenle abc, dönüşüm öncesinde aabbcc mantığıyla işlenir.

3. Dönüşümü başlatan genel kontrolü seçin ve sonuç alanını bekleyin. Girdi bırakılırsa araç varsayılan #ff5733 değerini kullanır. Bu seçenek, belirli bir renk kodu olmadan sonuç biçimlerini görmek için kullanılabilir.

4. Sonuçta büyük harfli ve küçük harfli altı haneli HEX metinlerini birlikte kontrol edin. Ardından RGB ve HSL değerlerini hem metin gösterimi hem de sayısal bileşenler olarak inceleyin. HSL içindeki ton, doygunluk ve açıklık değerleri tam sayıya yuvarlanır.

5. Lightness sınıflandırmasını, diğer sonuçlarla birlikte değerlendirin. Bu sınıflandırma, ağırlıklı RGB parlaklık hesabı 128 değerinden büyük olduğunda true olur; 128 veya daha düşük olduğunda true olarak işaretlenmez. İsteğe bağlı geçmiş kontrolü görünüyorsa varsayılanı false kabul edilir. Bu seçenek dönüşüm sonucuna geçmiş eklemez ve renk dönüşümünü değiştirmez.

Sonuçları ve sınırları nasıl okuyabilirsiniz?

Başarılı bir dönüşümde aynı rengin birden fazla gösterimini karşılaştırabilirsiniz. Büyük ve küçük harfli HEX metinleri yazım biçimini, RGB bileşenleri kırmızı-yeşil-mavi kanallarını, HSL bileşenleri ise ton, doygunluk ve açıklık değerlerini ifade eder. HSL sayıları tam sayıya yuvarlandığı için daha hassas bir kaynak değerle birebir ondalık eşleşme beklemeyin.

Lightness sınıflandırması, basit bir etiket gibi okunmalıdır; yalnızca ağırlıklı RGB parlaklık hesabının 128 eşiğini aşmasına bağlıdır. Bu nedenle etiketi, HSL açıklık sayısıyla otomatik olarak aynı kabul etmeyin. Geçmiş seçeneği varsa onu geçmiş kaydı veya geçmiş görüntüleme özelliği olarak yorumlamayın; incelenen davranışta dönüşüm çıktısını değiştirmez.

Geçersiz bir HEX değeri girildiğinde ayrıştırma sırasında değer ya da indeks hatası oluşabilir. Böyle bir durumda araç bu hatayı dışarı taşımak yerine başarı işaretli bir sonuç içinde hata belirtisi döndürebilir. Bu yüzden başarı işaretini tek başına geçerli bir renk elde edildiğinin kanıtı saymayın; sonuçtaki hata göstergesini de kontrol edin.

Uygulamalı örnek

Bir tasarım notunda bulunan #ff5733 kodunun RGB ve HSL karşılıklarını aynı sonuçta incelemek istiyorsunuz.

HEX alanına #ff5733 yazın ve dönüşümü başlatan genel kontrolü seçin. Dönen sonuçta belirtilen gösterim ve bileşen türlerini kontrol edin.

Sonuçta büyük ve küçük harfli altı haneli HEX metinleri, RGB ve HSL metin gösterimleri, sayısal RGB ve HSL bileşenleri ile lightness sınıflandırması görünür.

Sınırlamalar

• HSL ton, doygunluk ve açıklık değerleri tam sayıya yuvarlanır. Lightness sınıflandırması yalnızca ağırlıklı RGB parlaklık hesabının 128 değerinden büyük olup olmamasına dayanır.
• Geçersiz bir HEX girdisi, ayrıştırma hatasını doğrudan yükseltmek yerine başarı işaretli bir sonuç içinde hata belirtisi döndürebilir.

Sık yapılan hatalar

• # işaretini yanlış biçimde iki kez yazmak veya üç karakterli olmayan geçersiz bir değer girmek hata belirtisi döndürebilir. Tek bir HEX değerini, gerekirse başında yalnızca bir # olacak şekilde girin; kısa biçim kullanıyorsanız üç karakterli olduğundan emin olun.

Sık sorulan sorular

HEX kodunu # işareti olmadan girebilir miyim?

Başında # olmayan bir değer de kullanılabilir; araç ayrıştırmadan önce başına # ekler. Başında # bulunan değer ise bu işaret kaldırılarak ayrıştırılır.

Üç karakterli kısa HEX kodları destekleniyor mu?

Üç karakterli bir HEX değeri kullanılabilir; araç her karakteri tekrarlayarak bunu altı karakterli biçime genişletir. Üç karakterli olmayan geçersiz bir değer ise hata belirtisi döndürebilir.

Geçersiz HEX kodunda neden hata yerine sonuç dönebiliyor?

Geçersiz ayrıştırma durumunda sonuç başarı işaretli görünebilir, ancak içinde hata belirtisi bulunur. Bu nedenle yalnızca başarı işaretine bakmayın ve sonuç içindeki hata bilgisini kontrol edin.