Renk Dönüştürücü

Renk Kodu Dönüştürücü: HEX, RGB, HSL ve Tasarımcının Dili

Renk Kodu Dönüştürücü, HEX (#FF5733), RGB (rgb(255,87,51)), HSL (hsl(11°, 100%, 60%)) ve diğer renk formatları arasında anında dönüşüm yapan ücretsiz bir araçtır. Web tasarımı, mobil uygulama geliştirme, grafik tasarım, marka kimliği ve dijital reklamcılık projelerinde aynı rengi farklı formatlarda ifade etmek gerekir: CSS kodu HEX kullanır, JavaScript Canvas RGB ile çalışır, Figma ve Sketch gibi tasarım araçları HSL üzerinden renk paleti oluşturmaya elverişlidir, sosyal medya reklam platformları ise bazen RGBA (alpha kanallı) bekler. Bu araçla bir renk kodunu girip tüm karşılıklarını anında elde edebilirsiniz.

Modern tasarım sistemlerinde renk yönetimi sadece estetik değil, aynı zamanda erişilebilirlik konusudur. WCAG 2.1 standardı, metin ile arka plan arasında en az 4.5:1 kontrast oranı şart koşar (büyük metin için 3:1). Renkleri HSL formatında düşünmek, parlaklık (lightness) değerini ayarlayarak hızlıca kontrast uyumlu varyantlar üretmeyi sağlar. Marka renginizin yanı sıra hover state, disabled state, alert renklerini sistematik olarak türetmek için HSL temelli düşünmek profesyonel bir alışkanlıktır.

Nasıl Kullanılır?

1. Kaynak rengi girin: HEX formatında #3B82F6, RGB formatında rgb(59,130,246) veya HSL formatında hsl(217,91%,60%) şeklinde renk kodunuzu yapıştırın.
2. Hedef formatı seçin: Çıktıyı hangi formatta istediğinizi belirleyin. Bazı araçlar tüm formatları aynı anda gösterir.
3. Çalıştırın: Dönüşüm anlık olarak gerçekleşir. Sonuçta renk önizlemesi de gösterilir; gözle doğrulayın.
4. Projenize entegre edin: CSS değişkeninize, design token dosyanıza, Figma styles paletinize veya React theme provider'ınıza ekleyin.

Sonuçları Nasıl Yorumlamalı?

HEX formatı 6 hex karakterinden oluşur ve her iki karakter sırasıyla kırmızı (R), yeşil (G) ve mavi (B) kanalının 0-255 değerini temsil eder. RGB formatı aynı bilgiyi insan okunaklı ondalık sayılarla ifade eder. HSL ise renk dünyasını farklı bir açıdan modeller: H (Hue, ton) 0-360° arası renk çarkı pozisyonu, S (Saturation, doygunluk) 0-100% arası renkliğin yoğunluğu, L (Lightness, parlaklık) 0-100% arası beyaza/siyaha yakınlık. Aynı tondan birden fazla renk varyantı (light/dark mode için 100, 200, 300, ... 900 tonları) üretmek istediğinizde, H ve S'yi sabit tutup L'yi değiştirmek tutarlı bir palet üretir. Marka renginiz HSL'de hsl(217,91%,60%) ise, light varyantı hsl(217,91%,80%) şeklinde türetebilirsiniz.

Pratik İpuçları

• CSS değişkenleri: Modern CSS'te :root { --primary: 217 91% 60%; } şeklinde HSL bileşenlerini ayrı tutmak, alpha eklerken hsl(var(--primary) / 0.5) kullanımına imkan verir.
• Erişilebilirlik kontrolü: Üretilen rengin ortalama metin arka planı (beyaz) ile kontrastını WebAIM kontrast checker ile doğrulayın; WCAG AA için 4.5:1 minimum şart.
• Marka palet yapısı: Ana rengi belirledikten sonra HSL'den L değerini 10'ar 10'ar değiştirerek 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 tonlarını üretin — Tailwind benzeri sistem doğal olarak oluşur.
• Dark mode dönüşümü: Light tema rengini dark mode'a çevirirken L değerini tersine çevirmek (60% → 40%) basit ama etkili bir başlangıçtır.
• Print için CMYK: Bu araç dijital renk formatları için optimize edilmiştir. Basılı materyaller için CMYK'ya dönüşüm tasarım programınızda yapın; renk profil farkı yüzünden ekrandaki ile baskı sonucu farklı görünür.

Sık Yapılan Hatalar

• 3 karakterli HEX kafa karışıklığı: #F53 aslında #FF5533 kısaltmasıdır. Her hex haneci iki kez tekrar eder; ancak bu kısaltma her renk için kullanılamaz.
• HSL hue 360 mı 0 mı: Hue çarkı dairesel olduğu için hsl(360,...) ve hsl(0,...) aynı renktir (kırmızı); ancak hesaplama hataları doğurabilir.
• sRGB vs P3 farkı: Modern Apple cihazları geniş gamut P3 renk uzayını destekler. Marka renginiz P3 ile tasarlanmışsa, sRGB'ye dönüşümde canlılık kaybı yaşanır.

İlgili Araçlar ve Hizmetler

Renk paletinizi içeriğinizde kullanmak için Markdown HTML Çevirici ile dokümantasyon hazırlayabilir, slug oluşturmak için URL Slug Oluşturucu'yu kullanabilirsiniz. Sosyal medya görsellerinizdeki marka tutarlılığı için Instagram Bio Oluşturucu ile profil metnini optimize edin; Instagram büyüme paketleri için Instagram Pazarlama Çözümleri sayfamızı ziyaret edin.

Takiplus Renk Kodu Dönüştürücü ile tasarım iş akışınızı hızlandırın, tutarlı marka renkleri kullanın ve farklı platformlar arasında renk kayıplarını ortadan kaldırın.