HEX vs RGB vs HSL — Web Tasarımı İçin Renk Formatları Rehberi

Renkler görsel tasarımın temelidir. Web sitesi oluşturuyor, mobil uygulama tasarlıyor veya dijital sanat eserleri yaratıyor olun, sürekli farklı renk formatlarıyla karşılaşırsınız. Web'deki en yaygın üç format HEX, RGB ve HSL'dir. Her format aynı renkleri farklı şekilde temsil eder. Hangisini seçeceğiniz iş akışınıza, araçlarınıza ve hedefinize bağlıdır.

HEX (onaltılık), web'de en yaygın kullanılan renk formatıdır. Kırmızı için #FF0000, yeşil için #00FF00 ve mavi için #0000FF gibi bir hash sembolünden sonra altı karakterlik bir kod kullanır. HEX, kompakt olması, evrensel desteği ve Figma veya Photoshop gibi tasarım araçlarından kolayca kopyalanabilmesi nedeniyle çoğu web geliştiricinin varsayılan tercihidir.

RGB, Red (Kırmızı), Green (Yeşil), Blue (Mavi) anlamına gelir. CSS'de saf kırmızı rgb(255, 0, 0) olarak yazılır. Her değer 0 ile 255 arasında değişir. RGB, ekranların renk üretme yöntemi olan toplamsıl renk modeline dayanır. Saydamlık için alfa kanalını da destekler: rgba(255, 0, 0, 0.5) yarı saydam kırmızı oluşturur.

HSL, Hue (Ton), Saturation (Doygunluk) ve Lightness (Açıklık) anlamına gelir. Saf kırmızı hsl(0, 100%, 50%) olarak yazılır. Ton, renk çarkında 0 ile 360 derece arasındaki bir açıdır. HSL, insanlar için en sezgisel formattır. Daha koyu bir ton mu istiyorsunuz? Açıklığı azaltın. Daha yumuşak bir ton mu? Doygunluğu düşürün.

Her üç format da aynı 16,7 milyon rengi temsil edebilir. Fark okunabilirlik ve iş akışındadır. HEX en kompakt ama okunması zor. RGB ekranların renk gösterme biçimine karşılık gelir. HSL insanlar için en dostça formattır.

Kompakt ve standart CSS için HEX kullanın. Saydamlık veya programatik renk işleme için RGB kullanın. Tasarım sistemleri, temalar ve dinamik renk varyasyonları için HSL kullanın.

Dönüştürme formüllerini ezberlemenize gerek yok. Renk Seçici aracımız, herhangi bir rengi seçmenize ve HEX, RGB, HSL, CMYK değerlerini anında görmenize olanak tanır. Ücretsiz renk araçlarımızı deneyin.