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

Aynı rengi yazmanın üç yolu

Ekranlar her rengi kırmızı, yeşil ve mavi ışığı karıştırarak oluşturur; HEX, RGB ve HSL ise sRGB renk uzayındaki aynı 16,7 milyon kombinasyon için üç farklı gösterimden ibarettir. Hangisine ihtiyacınız olduğu, değerin nereye gideceğine bağlıdır.

• HEX, örneğin #2563eb: kırmızı, yeşil ve mavi için her biri 00 ile ff (0 ile 255) arasında üç çift onaltılık rakam. Kompakt ve kopyalaması kolay olduğundan tasarım araçlarında, marka kılavuzlarında ve CSS'in büyük kısmında varsayılandır.
• RGB, örneğin rgb(37, 99, 235): aynı üç kanal, ondalık olarak. Canvas çizimi, görüntü işleme, Android renk kaynakları veya Python'daki Pillow gibi kodun doğrudan sayılarla çalıştığı durumlarda kullanışlıdır.
• HSL, örneğin hsl(221, 83%, 53%): ton, doygunluk ve açıklık. Üçü arasında bir insanın mantık yürüterek ayarlayabildiği tek gösterimdir; bu da onu palet ve tema oluşturmanın gözdesi yapar.

Kısa HEX biçimi #36f, her rakamın ikilendiği #3366ff için bir kısaltmadır. Yalnızca her çiftin iki rakamı da aynı olduğunda işe yarar.

HSL değerlerini okumak

HSL bir rengi insanların ondan bahsettiği şekilde tanımlar:

• Ton (hue), renk çemberindeki derece cinsinden konumdur: 0 kırmızı, 60 sarı, 120 yeşil, 180 camgöbeği, 240 mavi, 300 macenta; 360 ise yeniden kırmızıya döner.
• Doygunluk (saturation), nötr bir gri olan %0'dan, o tonun en canlı hali olan %100'e kadar gider.
• Açıklık (lightness), her zaman siyah olan %0'dan, saf renk olan %50'den geçerek, her zaman beyaz olan %100'e kadar gider.

HSL'i tasarım sistemleri için pratik kılan budur. Ton ve doygunluğu sabit tutup açıklığı %95'ten %15'e adım adım düşürdüğünüzde düğmeler, arka planlar ve kenarlıklar için açıktan koyuya bir skala elde edersiniz. Tamamlayıcı bir vurgu rengi için tonu 180 derece, benzer (analog) renkler için ise iki yönden birine 30 derece döndürün.

Bir sınırlama var: HSL açıklığı matematiksel bir ortalamadır, bir rengin ne kadar parlak göründüğü değildir. %50 açıklıktaki sarı, %50'deki maviden çok daha parlak görünür; bu yüzden L değeri aynı olan renklerin beyaz metne karşı kontrastı çok farklı olabilir. Kontrastı her zaman gerçek renk çifti üzerinde kontrol edin.

Bu dönüştürücü neleri kabul eder

Alana yapıştırın veya yazın ya da renk örneğinden seçin; HEX, RGB ve HSL satırları büyük bir önizlemeyle birlikte aynı anda güncellenir. Kabul edilen girdiler:

• # ile veya # olmadan #rgb, #rgba, #rrggbb ve #rrggbbaa.
• tomato veya rebeccapurple gibi 148 CSS renk adı.
• rgb(37, 99, 235) ve rgba(37, 99, 235, 0.5) ya da modern, boşlukla ayrılmış rgb(37 99 235 / 50%). Kanallar ondalık sayı veya yüzde olabilir.
• hsl(221, 83%, 53%), hsla(…) ve hsl(221.5 83% 53%). Ton deg, turn, rad veya grad birimini taşıyabilir; yüzde işaretleri isteğe bağlıdır.
• Üç yalın sayı: 37, 99, 235 veya 37 99 235.

Aralık dışındaki değerler sınıra çekilir: rgb(300, 0, 0) 255 kırmızı olur. 360 veya daha büyük ya da negatif bir ton çemberin etrafında döner. Ondalıklı kanallar tam sayılara yuvarlanır.

Alfa, ister 4 veya 8 haneli HEX'te, ister rgba(), hsla() içinde ya da bir / işaretinden sonra olsun, okunur ama yok sayılır; bu yüzden çıktılar her zaman tamamen opaktır.

Çıktıların altındaki R, G ve B kaydırıcıları her seferinde tek bir kanalı değiştirir. Önizlemeyi ve üç gösterimin güncellenmesini izlerken bir rengi biraz daha sıcak ya da soğuk yöne kaydırmak için kullanışlıdır.

Geri dönüştürürken değerler neden bir kayar

HSL ile RGB arasındaki dönüşümler kesirler içerir ve buradaki her çıktı, CSS'te normalde yazıldığı gibi tam sayılara yuvarlanır. HSL'de RGB'ye göre daha az tam sayı kombinasyonu vardır, kabaca 16,7 milyona karşı 3,6 milyon; bu yüzden birkaç RGB rengi aynı yuvarlanmış HSL değerini paylaşır.

Örneğin #2563eb, hsl(221, 83%, 53%) olarak dönüştürülür; ancak bu HSL değerini geri yazdığınızda #2463eb elde edersiniz: kırmızı 37 yerine 36'dır. Fark gözle görülmez, ama bir marka kılavuzu kesin bir HEX değeri belirtiyorsa önemlidir. HEX veya RGB değerini esas kabul edin; HSL'i resmi renkleri saklamak için değil, varyasyonları keşfetmek için kullanın.

Sonuçları kullanmak

• CSS'te üç çıktı dizesinin hepsi olduğu gibi yapıştırılabilir. --brand: #2563eb; gibi özel özellikler (custom properties) bunları yeniden kullanmanın en temiz yoludur.
• Bir site simgesi için önce marka rengini burada belirleyin, tasarım aracınızda logoya uygulayın, ardından Favicon oluşturucu ile logoyu eksiksiz bir simge setine dönüştürün.
• Markalı bir QR kod için güçlü kontrastı koruyun: beyaz üzerinde %20–30 civarı açıklığa sahip koyu bir ön plan güvenilir şekilde taranır, açık veya düşük doygunluklu renkler ise çoğu zaman başarısız olur. QR kod oluşturucu bunu test etmenizi sağlar.
• Basılı renk ise ayrı bir konudur. Ekranlar RGB, yazıcılar CMYK kullanır ve ekrandaki canlı bir mavi mürekkeple elde edilemeyebilir. Rengin birebir tutması önemliyse matbaadan bir prova isteyin.

Tüm dönüşüm tarayıcınızda gerçekleşir.