Renk Çevirici

Bir renk, üç lehçe

Normal bir iş gününde aynı renk üç farklı kılıkta karşınıza çıkar: marka kılavuzu size bir HEX kodu verir, bir canvas veya grafik kütüphanesi RGB sayılarını ister, modern CSS ise en güzel HSL ile ayarlanır. Bu sayfa üçünü de senkronize tutar — size verilen değerle eşleşen alana yazın, diğer ikisi siz yazdıkça kendini yeniden yazar, örnek renk kutusu da sayıların gerçekte nasıl göründüğünü size gösterir. Kısaltılmış HEX de çalışır: #f80 yapıştırın, tam olarak bir tarayıcının okuyacağı gibi #ff8800'e genişler. Uğraşacağınız bir renk seçici yoktur; buradaki amaç, zaten sahip olduğunuz bir değeri hassas bir şekilde çevirmektir.

HSL ile bir palet oluşturmak

HSL, rengin kendisi değil de varyasyonlarına ihtiyaç duyduğunuz an değerini kanıtlar. Tonu (hue) sabit tutup yalnızca parlaklığı kaydırın: bir hover durumu için on puan düşürün, tonlu bir arka plan için kırk puan yükseltin — her varyant tanınabilir şekilde aynı renk olarak kalır, bu da HEX rakamlarını doğrudan düzenleyerek yapılması neredeyse imkânsız bir şeydir. Doygunluğu (saturation) düşürmek, devre dışı düğmeler ve ince kenarlıklar için işe yarayan soluk, grileşmiş versiyonu verir. Alanlar birbirini canlı olarak güncellediği için, hızlı bir iş akışı şudur: marka HEX'inizi yapıştırın, HSL'yi okuyun, bir sayıyı hafifçe değiştirin ve taze HEX'i geri kopyalayın — bir dakikadan kısa sürede küçük bir palet, hiç tasarım yazılımı olmadan.

Dürüst sınırlar ve komşu bir hile

Bu dönüştürücünün bilinçli olarak yapmadığı iki şey var. Alfa kanalı yoktur — RGB alanı rgba() değil rgb() konuşur — bu yüzden saydamlık, ait olduğu yerde, sonradan CSS'inizde eklediğiniz bir şeydir. Ve HSL değerleri okunabilirlik için tam sayılara yuvarlanır; bu, bir HEX'ten HSL'ye ve tekrar HEX'e gidiş-dönüşün tek bir puan kayabileceği anlamına gelir — ekranda görünmez, ama stil dosyalarını karşılaştırıyorsanız bilinmeye değer. Araç, tüm geliştirici araçlarımız gibi sınırsız ve ücretsizdir. Hatırlanmaya değer bir eşleşme: bu sayfa size bir logo arka planının tam olarak hangi renk olduğunu söyledikten sonra, görsel saydamlık aracımız görselden tam olarak o rengi kaldırabilir — bir web sitesi için grafik hazırlarken kullanışlı iki aşamalı bir yöntem.

Aynı rengi tanımlamanın üç yolu

HEX ve RGB, bir rengi kırmızı, yeşil ve mavi ışık yoğunluğuyla tanımlar (yalnızca farklı gösterimlerle) — HSL ise bunun yerine ton, doygunluk ve parlaklıkla tanımlar; bu da bir tonu elle seçerken veya ayarlarken genellikle daha sezgiseldir.