HEX, RGB, RGBA, HSL, HSLA ve CSS renk adlarını birbirine dönüştürün. RGB slider'ları, alfa kanalı ve hazır palet desteği dahildir.
CSS'de renkler farklı formatlarda tanımlanabilir: HEX (#ff4d00), RGB (255,77,0), HSL gibi. Bu araç istediğiniz rengi girerek tüm formatları anında üretir. Alfa (şeffaflık) kanalı da dahildir.
Web geliştirme sürecinde farklı araçlar ve kütüphaneler farklı renk formatları kullanır. Bir tasarımcı size HEX kodu verirken, CSS animasyonlarında HSL kullanmanız gerekebilir. Bu dönüştürücü sayesinde tek bir renk değerini girip tüm formatlara anında erişebilirsiniz.
1. Renk Seçin: Üst kısımdaki renk kutusuna tıklayarak tarayıcının renk seçicisini açın veya metin alanına doğrudan bir renk değeri yazın (örneğin #ff4d00, rgb(255, 77, 0) veya tomato).
2. Slider ile Ayarlayın: RGB slider'larını kullanarak kırmızı, yeşil ve mavi kanalları ayrı ayrı ayarlayın. Alfa slider'ı ile şeffaflık seviyesini belirleyin.
3. Formatları Kopyalayın: Alt kısımda HEX, RGB, HSL ve diğer formatlardaki değerler otomatik olarak hesaplanır. İstediğiniz formatın yanındaki "Kopyala" düğmesine tıklayarak değeri panoya alın.
4. Hazır Paletten Seçin: Hızlı Palet bölümünden popüler renklere tek tıkla erişin.
HEX (Hexadecimal): Web'de en yaygın kullanılan formattır. # işaretiyle başlar ve 6 haneli onaltılık sayı içerir (örn. #ff4d00). İlk iki hane kırmızı, ortadaki ikisi yeşil, son ikisi mavi kanalı temsil eder. Kısa yazım olarak 3 hane de kullanılabilir (örn. #f00 = #ff0000). HEX8 formatında son iki hane alfa (şeffaflık) kanalını belirtir.
RGB (Red, Green, Blue): Rengi kırmızı, yeşil ve mavi ışık bileşenlerinin 0–255 arasındaki yoğunluk değerleriyle tanımlar. Ekran teknolojisinin temelini oluşturan bu model, JavaScript ile dinamik renk hesaplamaları yaparken tercih edilir. RGBA formatında ek olarak 0–1 arasında bir alfa değeri alır.
HSL (Hue, Saturation, Lightness): İnsan algısına en yakın renk modelidir. Hue (renk tonu) 0–360 derece arasında bir açıdır; Saturation (doygunluk) ve Lightness (parlaklık) yüzde olarak ifade edilir. Renk temaları oluştururken HSL kullanmak çok pratiktir: aynı hue değerini koruyarak sadece doygunluk ve parlaklığı değiştirerek uyumlu renk paletleri elde edebilirsiniz.
Hangi durumda hangi format? Statik CSS tanımlarında HEX en kısa ve en yaygın seçenektir. JavaScript ile renk hesaplama yapıyorsanız RGB matematiksel işlemlere uygundur. Tema sistemi veya renk paleti tasarlıyorsanız HSL sezgisel yapısıyla en iyi sonucu verir.
HEX renk kodu nedir?
HEX, renkleri onaltılık (hexadecimal) sayı sistemiyle ifade eden bir formattır. # işaretiyle başlar ve 6 karakter içerir. Web tasarımında en yaygın kullanılan renk gösterim biçimidir; CSS, HTML ve tasarım araçlarının tümü HEX kodlarını destekler.
RGB renk modeli nasıl çalışır?
RGB, kırmızı (Red), yeşil (Green) ve mavi (Blue) ışık kanallarının karışımıyla renk oluşturur. Her kanal 0–255 arasında bir değer alır. Üç kanalın tamamı 0 olduğunda siyah, 255 olduğunda beyaz elde edilir. Ekranlar fiziksel olarak bu üç renk ışığını karıştırarak milyonlarca farklı renk üretir.
HSL nedir ve neden tercih edilir?
HSL; Hue (renk tonu), Saturation (doygunluk) ve Lightness (parlaklık) değerlerini kullanır. İnsan gözünün renk algısına en yakın model olduğu için renk paleti oluştururken çok kullanışlıdır. Örneğin bir ana renkten açık ve koyu varyasyonlar üretmek, sadece Lightness değerini değiştirerek mümkündür.
Hangi durumda hangi renk formatını kullanmalıyım?
Genel CSS stilleri için HEX en kısa ve pratik seçenektir. Şeffaflık gerekiyorsa RGBA veya HSLA kullanın. JavaScript ile programatik renk manipülasyonu yapıyorsanız RGB değerleri matematiksel işlemlere uygundur. Tema ve palet tasarımı için HSL en sezgisel seçenektir.
CSS renk adlarını (red, blue gibi) dönüştürebilir miyim?
Evet. Metin alanına doğrudan CSS renk adı yazabilirsiniz (örneğin tomato, steelblue, coral). Araç, tarayıcının tanıdığı tüm CSS renk adlarını otomatik olarak algılar ve HEX, RGB, HSL karşılıklarını hesaplar.