Renkler HEX, RGB ve HSL arasında nasıl dönüştürülür?

Web tasarımcıları ve geliştiricileri genellikle projelerde, tasarım sistemlerinde ve araçlarda farklı formatlardaki renklerle çalışır. İster HSL'deki bir tasarım modeli, RGB kullanan bir CSS dosyası veya HEX'teki bir marka kılavuzu arasında geçiş yapıyor olun, bu formatlar arasında nasıl dönüşüm yapılacağını bilmek hızlı bir şekilde zamandan tasarruf etmenizi sağlar ve hataları önler.

Üç ana renk formatını anlama

HEX (onaltılık) gösterimi, renkleri aşağıdaki gibi altı karakterli kodlar olarak temsil eder #FF5733karakter çiftlerinin kırmızı, yeşil ve mavi yoğunluğunu tanımladığı yer. RGB (kırmızı, yeşil, mavi), her renk kanalı için 0-255 arasındaki ondalık değerleri kullanır; örneğin, rgb(255, 87, 51). HSL (ton, doygunluk, açıklık), renk tonu için bir açı (0-360°), doygunluk için bir yüzde (%0-100) ve açıklık için bir yüzde (%0-100) kullanarak rengi tanımlar; şu şekilde yazılır: hsl(9, 100%, 60%).

Neden formatlar arasında dönüştürme yapmalısınız?

Farklı araçlar ve bağlamlar farklı formatları destekler. Tasarımcılar genellikle HSL'de çalışır çünkü parlaklığı ve doygunluğu ayarlamak sezgiseldir. Web geliştiricileri CSS stil sayfalarında RGB veya HEX kullanır. Baskı üretimi farklı bir renk alanına ihtiyaç duyabilir. Dönüştürme, renkleri manuel olarak yeniden belirlemeye gerek kalmadan işi araçlar arasında taşımanıza olanak tanır.

Dönüşüm nasıl çalışır?

Formatlar arasında dönüştürme matematiksel ilişkileri içerir. HEX'ten RGB'ye geçiş basittir: altı karakteri üç çifte bölün ve her birini onaltılık sistemden (16 tabanlı) ondalık sayıya (10 tabanlı) dönüştürün. RGB'den HSL'ye geçiş daha karmaşıktır; maksimum ve minimum kanal değerlerini bulmak, ardından renk tonu, doygunluk ve açıklığı türetmek. Ters işlemler, geriye gitmek için ters matematik uygular.

Renkleri çevrimiçi dönüştürme

Tekrarlanan dönüşümler için manuel hesaplama hataya açıktır. Kullanmak Renk dönüştürücü HEX, RGB ve HSL arasında anında dönüşüm sağlamak için. Herhangi bir formattaki bir rengi yapıştırın ve diğer tüm formatlardaki eşdeğerlerini görün, böylece matematiği kendi başınıza anlama ihtiyacını ortadan kaldırın.

Erişilebilir renk seçenekleri sağlayın

Bir rengi dönüştürdükten sonra, şunu kullanarak erişilebilirlik standartlarını karşıladığını doğrulayın: Kontrast denetleyici metninizle yeterli kontrastı onaylamak için. Tasarım ilhamına ihtiyacınız varsa Rastgele renk üreteci daha sonra tercih ettiğiniz formata dönüştürebileceğiniz yeni paletler üretir.

Gizlilik: renkler cihazınızda kalır

Renk dönüştürücü, tarayıcınızdaki her dönüşümü işler; sunucuya hiçbir veri gönderilmez. Renk paletleriniz, devam eden tasarımlarınız ve marka spesifikasyonlarınız cihazınızda gizli kalır. Araç, sayfa yüklendikten sonra çevrimdışı çalışır, böylece internet erişiminiz olmadan renkleri dönüştürmeye devam edebilirsiniz.