Renk Dönüştürücü
HEX, RGB ve HSL arasında önizleme ile dönüştürün.
Web tasarımı için HEX, RGB ve HSL renk dönüştürücü
Web tasarımı ve frontend geliştirmede renkler, bağlama göre farklı modellerde temsil edilir. HEX formatı (#RRGGBB) kısalığı nedeniyle CSS stil dosyalarında en çok kullanılandır. RGB (Red, Green, Blue) modeli, kırmızı, yeşil ve mavinin 0 ile 255 arasındaki değerlerle katılımlı karışımı ile renkleri tanımlar ve dijital ekranların yerli modelidir. HSL (Hue, Saturation, Lightness) renkleri tasarımcılar için daha sezgisel bir şekilde düzenler ve ton, doygunluk ve parlaklığı bağımsız olarak ayarlamanızı sağlar.
Dönüştürücümüz herhangi bir rengi bu üç format arasında gerçek zamanlı dönüştürür. Bu özellikle Figma veya Adobe XD gibi tasarım araçlarının renkleri HEX olarak dışa aktardığı, ancak JavaScript animasyonları için RGB değerlerine ihtiyaç duyduğunuz veya HSL'de yalnızca parlaklığı ayarlayarak bir rengin varyasyonlarını oluşturmak istediğiniz durumlarda kullanışlıdır. Canlı önizleme, kopyalamadan önce rengin tam olarak nasıl göründüğünü doğrulamanızı sağlar.
Üç formattan herhangi birine manuel olarak değer girebilir veya görsel olarak seçmek için tarayıcının yerel renk seçicisini kullanabilirsiniz. Her format, değeri CSS, JavaScript veya herhangi bir tasarım aracında kullanıma hazır olarak panoya kopyalayan bir kopyalama düğmesi içerir.
Sıkça sorulan sorular
HEX ile RGB arasındaki fark nedir?
Her ikisi de aynı renkleri temsil eder, sadece gösterim şekli değişir. HEX, #RRGGBB formatında onaltılık sayılar (16 tabanlı) kullanırken, RGB her kanal için 0 ile 255 arasında ondalık sayılar kullanır. Örneğin, beyaz HEX'te #FFFFFF ve RGB'de rgb(255, 255, 255)'tir. HEX, CSS için daha kompaktken, RGB programatik olarak işlemesi daha kolaydır.
HSL ne zaman kullanılır?
HSL, uyumlu renk paletleri veya aynı tonun varyasyonlarını oluşturmanız gerektiğinde idealdir. Tonu (H), doygunluğu (S) ve parlaklığı (L) ayırarak, temel tonu değiştirmeden sadece parlaklığı ayarlayarak bir rengin daha açık veya koyu versiyonlarını, veya doygunluğu değiştirerek daha canlı veya soluk versiyonlarını oluşturabilirsiniz.
Tarayıcılar hangi renk modelini kullanır?
Web tarayıcıları CSS'te her üç formatı da anlar: HEX, RGB ve HSL. Dahili olarak ekranlar RGB ile çalışır çünkü her piksel kırmızı, yeşil ve mavi alt piksellerden oluşur. Ancak modern CSS, HDR ekranlarda daha geniş renk gamutları için oklch ve display-p3 gibi daha gelişmiş modelleri de destekler.
Daha fazla bilgi ister misiniz? Tam rehberimizi okuyun →