Renk dönüştürücü nedir?
Renk dönüştürücü, bir rengin HEX, RGB ve HSL karşılıklarını tek ekranda gösteren ücretsiz bir araçtır. Web tasarımcıları, front-end geliştiriciler ve sosyal medya görseli hazırlayanlar bir tasarım dosyasından aldıkları HEX kodunu CSS'te RGB ya da HSL olarak kullanmak istediğinde bu araçtan yararlanır. Kurulum gerektirmez, telefonda ve bilgisayarda aynı şekilde çalışır.
Nasıl kullanılır? (Adım adım)
1. Elinizdeki rengi HEX (#3b82f6 gibi) ya da RGB biçiminde ilgili alana yazın veya renk seçiciden bir renk seçin.
2. Araç diğer biçimleri anında hesaplar ve önizleme kutusunda rengi gösterir.
3. İhtiyacınız olan kodu kopyalayıp CSS dosyanıza, Figma, Canva veya Photoshop gibi programlara yapıştırın.
4. Farklı tonları denemek için değeri değiştirin; sonuçlar her değişiklikte güncellenir.
Hangi biçimi ne zaman kullanmalı?
HEX kodları kısa ve yaygın olduğu için marka renklerini paylaşırken en pratik seçenektir. RGB, özellikle rgba() ile saydamlık eklemek istediğinizde kullanışlıdır. HSL ise bir rengin daha açık veya daha koyu tonunu üretmek için idealdir: yalnızca açıklık (L) değerini değiştirerek aynı ailedeki tonları kolayca elde edersiniz. Tasarım sistemleri kurarken HSL ile çalışmak tutarlı bir palet oluşturmayı kolaylaştırır.
Örnek dönüşümler
Saf kırmızı #ff0000, RGB'de rgb(255,0,0), HSL'de hsl(0,100%,50%) olarak yazılır. Toolhane mavisi gibi bir ton olan #3b82f6 ise rgb(59,130,246) ve yaklaşık hsl(217,91%,60%) değerine karşılık gelir. Siyah #000000 tüm kanallarda 0, beyaz #ffffff tüm kanallarda 255 değerindedir. Gri tonlarda üç RGB kanalı birbirine eşittir ve HSL doygunluğu sıfırdır. Bu örnekleri araca girerek sonuçları karşılaştırabilir, kendi marka renklerinizin farklı biçimlerdeki karşılıklarını bir not dosyasında saklayarak ekibinizle tutarlı bir şekilde paylaşabilirsiniz. Saydamlık gerektiğinde RGB değerini rgba(59,130,246,0.5) gibi dördüncü bir alfa değeriyle kullanabilirsiniz.
İpuçları
Erişilebilirlik için metin rengi ile arka plan arasında yeterli kontrast olduğundan emin olun. Baskı işlerinde ekran renklerinin (RGB) CMYK'ya dönüşürken biraz farklı görünebileceğini unutmayın. Görsellerden renk almak isterseniz renk paleti çıkarıcı aracımızı da kullanabilirsiniz.